{"_id":"ecsite-form-builder","_rev":"558-38ef08815adbe016dc0ee7019e518b11","name":"ecsite-form-builder","dist-tags":{"latest":"1.2.3","beta":"2.4.6-beta.72"},"versions":{"1.0.0":{"name":"ecsite-form-builder","version":"1.0.0","description":"A complete form builder for react.","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","material-ui-color-picker":"^3.5.1","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-textarea-autosize":"^7.1.2","xss":"^1.0.8"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"gitHead":"97ce8fb626a2d7946cd808b04cc083802a03fc94","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.0.0","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-KtGknTVAOzil0ctEHtOINLewhKwy+6AamLzB4ncssKTMsHP29VSrdpuCUNeMoEe30q0s05CGlOLnGbCd9aoRHw==","shasum":"1e0b656f649828e9d150557832f0c71eb19ffc9b","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.0.0.tgz","fileCount":38,"unpackedSize":1745609,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr1RoCRA9TVsSAnZWagAAALwP/3Wsufet8gvmQuIVcq02\no3/0Ov2ci1+Z8v1U/+x7mM+TvJjPM71KWesTO+FuvAja3C82ky/4qgdA0+WC\n/KvyfU5eJ91CC3P8a/HOXEOykQyXcCnYw4J0HpeBJMuuYK7SBiqJP0wJPruK\n/Y0RRWeGLwUfgPFpEFgdwdM4q59pq7e4SX9ex5rEihUFWYKZMMqY/yrKIzQI\nkvLbm+0Avl+vKUE+bqiyYapxOEO5fC0rj55eAUdsgMW7wY9g1PAstVqZlZK8\nIqPofacvnF0NV/8JYqcgBtqVm1+lvxpqwbaN1giLedGcsMMYsdawqxARx+aV\nRL+5LrIzLAtw2G89oeeLeqpVhV7rrBmnDu/ianUMB4CyRH+Ex6mEQenpH8v9\ndXHvidRatz1qi8/1jNO3bcyq7OnKM9rJgl8FOcwR6hZMSzHwZPqa+YRBkRZO\nmd4crXHw0ce9V+QlUIUf1u26QdqRek9WttlLNEB9Tep+2SJ6g57/Mbk7bxaQ\n2hQzSvGBI8DfaR2DRc+gLMhHO1C913ORFceXpNRv7A4t8PkWjP6z7AJjdyud\nYe6r5PF08tP5iAqofMLmHZNUJxOUptAzmPSgDXDfQKwJ55aIzFKB9hr/e9tC\nM7+vNygLnhdoopUvnKZ8VWfRh/Z9n2tEVo9vI3303AYKxKy8DjjpfNEtVIZq\nF3+t\r\n=TB8g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/mc77JDwYDszLTG4BslH5ZZvDTNS4IInTd24qY64/VwIhAJ2p4gZcHfYSBmXL0QY98bja7r34sk8D8vyaHj3+rGer"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.0.0_1622103143724_0.7465925627808643"},"_hasShrinkwrap":false},"1.1.0":{"name":"ecsite-form-builder","version":"1.1.0","description":"A complete form builder for react.","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","material-ui-color-picker":"^3.5.1","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-textarea-autosize":"^7.1.2","xss":"^1.0.8"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"gitHead":"97ce8fb626a2d7946cd808b04cc083802a03fc94","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.1.0","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-cJLKS522qoyeTM5JHEbUkQMI1J3eVi4wAFkKbFkvjgZSlXo1qjCjF7aTqvnZ+PBQJamMjj3nvPyy/rtSlxeMag==","shasum":"70db5df0bd6ed93421d0b87653aa7dfd97e5b3b3","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.1.0.tgz","fileCount":38,"unpackedSize":1749598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgsL7oCRA9TVsSAnZWagAAiHEP/ioGwC6OL0g6DkkP/WPF\nLuuRLdmfLfWNdiD1/cMCvXUAjB0lphpDgzErwRvh93GJ6QfQ7n4OJqd3KGct\ni4eVT6fiqapYM8uxrjzmkn0VK2asvq8R8AKA4erZg3WXEYFWuka4xKQ/I9O4\n16rATuTstWz4Qisup9BnCjhvsG3gRf5otgXtCyNu+MN9uKuGczLeMWV63FVX\nPIRJPANIoXHFLXh0kMREPJymMrWmub2vJy7Ha9V50YKW/w+eqXIKHnIutkvK\nHBmjkjvSWhu71fWLDAggU2KKIrHXPGFE2ouPQOn9ws/pCsxq/T/pTcvxkQ4+\nSjffdz6LK+x9ytvm5+Bzsv2wyQqo5w3gYqu/jQA50FZ2GWSjDbBx5SFVIFne\npXJ6xRXoh7jEbVURgDXk5+kAy9aEJPI7Tld9k2Zxv3w8I3YcXWsJCQNY6nA+\niT8DMUZTGUyP+urWJH2WeVrPl6q15s5dgdDfjToGrHgz/WbjKmZo+ObJ0JdJ\nNb4hyG4wTizX8Jnu6QUB2pyLRIe1+V7hEGuKYgUOnHJxBsjpR6c7WmS38Du9\nEsBYy9p69N5MjO5vwYKSGSLcgWxHq/5VUjNuJHkyAGGKQPkj9qBUlOsV7YMV\nej8SuALek6BflnUP2IqPSn421YfR8wX5K/ZVpgG3drPR2atPGWSflK9rLa17\n90K2\r\n=vE/S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIASrFCvNF6PmFroAtTiEB9Yd2GHdlIosD1CVkG+tbbE4AiEAnXkJ4kqjHhXwpNM3e2eVXTpdAZWHpxOafObiXM2Fdok="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.1.0_1622195944005_0.508487482526764"},"_hasShrinkwrap":false},"1.1.1":{"name":"ecsite-form-builder","version":"1.1.1","description":"A complete form builder for react.","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","material-ui-color-picker":"^3.5.1","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-textarea-autosize":"^7.1.2","xss":"^1.0.8"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"licenseText":"The MIT License (MIT)\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.","_id":"ecsite-form-builder@1.1.1","dist":{"shasum":"d94ba5400340796e1a8201dd2e0ff1021b157599","integrity":"sha512-n29rIt4kEMVgd0U5CI6QGoNWUBIlAu4pjqAbRWFcMzwrr2d1Rot6a82Ypc/pLRY2Kr1JqFl2r+MVdTlwQYcF/A==","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.1.1.tgz","fileCount":46,"unpackedSize":1749598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgsNl5CRA9TVsSAnZWagAAcIoQAJPwZjR1ma//xSx4RFpG\ngi8OU5y7Oo3pBEFs8Wig6xNjjmwljgfbgOO5iuoWrpQ0FsaMw4dW16ViIE5i\nysNrODEPnb2o9uSqh+NDo8X0zhnhRvJK1bu9hYlYcyXl7WwIboT5+L1K/nNu\n2yHQT8pFG+9OYZ3WHZV8bf7M1mDcbDRUiiLstXuMyh5pz3Mr5wHh4Nh/CAoh\n+0MHRIAIHAjLcwgCIogUhtXrhsjY/IAgkYu54t2JryyoRpi7lEJrrXkjNxzv\nV4bcUblIo+TdXBYaNCALggew7dRj0P0NUX6b6B5x/2QFHi+xFddb0m19IY5e\nJ86vx7dICSS7NvA6BiNJGCovwzc2ilSxj0t1oHsGuFG3WlVqZkZaIU96Lr6F\nuRxcXQDb1VtN7GnoUodT+gSIkp0JX6ty8SBcaxJ+EMJOO6w4e7BxpVxFlyPL\nucGxhAdIVxRaRZhM1qX9Bv+5d+O85cYAm3oNHS/2zy0R5zMt46nkRBLO4qtD\n5rsSV1fUk/T/zLmc3Y4pEEO/LLtTnRy4D3xWw3vw6KI8vfzNBakmnqGtHUt0\nekme36gYKvQvHzSf+HItrK0cdPWE1RsPgu86N0YQVHfphEYlJLKbOttV+G1F\nV7ZMtCRQqlRFoOIualBQ9cpo2eh12+QjAhgXg/XblNUKy51FfqhkJikPzd0v\nBLfL\r\n=8PII\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC+40xcPmuWXLxOzNDxj5RWPt1Ex+uPxCl1I836zllvxAiBmC3tjRebRy7eWOPxl90iHRs00XIoWgvaYeKMpjoEZGw=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.1.1_1622202743494_0.7859340072287058"},"_hasShrinkwrap":false},"1.2.1":{"name":"ecsite-form-builder","version":"1.2.1","description":"A complete form builder for react.","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","material-ui-color-picker":"^3.5.1","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-textarea-autosize":"^7.1.2","xss":"^1.0.8"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"gitHead":"d22d3aeada687e463563fcb6623d667294074f6a","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.2.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-IF3cAH2Cvn2NtNoyf3YwSqL1o0AjcpAZr2OsoKxs5Z+FrKw070RV5JS7PmD7NbyElNKKSg4ZtGraL3COva0vxA==","shasum":"ae367391d82eddb558685c5dbd8de01c54a980a1","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.2.1.tgz","fileCount":38,"unpackedSize":1760569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtc4ICRA9TVsSAnZWagAAORgP/0EfoyWh74yY8I4naVwG\n6raVxptoPlEDJ7oKtyfhgVzcTqjCugU/+RezxsU+h0msDR722qRuRPyS/VtU\nqm3ivuCqSoLZWa7qxNGrXLg66q2sPwvCC+ddea19QrMBnvwSKGZVD+Hw5bjn\n/ydetec7J/JqcPXL7bWkprMfG+6HsKlwqAYaOAk29KFq98JJSkDiDfhWzwUW\nWmvpvm/iwABFcr+shOHagb9Ta66asgduiOoEFwUW0Qdr+gRRDEFxs4SAUHqH\nKZBdUFNpLQIvTN4H6wENXnBqxFrKjE7uRb3kL222QaOWn9v0/dcVPvKzqOsQ\nNabXQu7RExmSojld0tBcYUhsPDrpFFQnORwCQk6tU8KHJ3HB8iAGp+fic2wJ\n8NCiPUmE/VVMOsZ+C3at+/lQM1in0twmiJcFwpQQN1jQnbjNILyR+nLAolh6\na80RM4DZQIUp88NCBmT8wvJ/mJV0PiiQE7lHO4xXdijkwiZIgzsfVHXr7EBZ\nVnS1xEE2jB2oivYJzlZupuL/TUv+j3PKwqZQ30EVizHI15IEqgGJPeeYTGwC\nlDqhKhstfvD/2R9o0jRTaATN9zo2AcEKD6sFYRdev1avOkAQS4mrD5Vq5VvK\nxkO8upu6ySxEkk0If5SEH1lXlMPx0/zOGxD0xH+4kyQzhvLOBL/JVwWbpabT\n+cZI\r\n=8lbx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBqAEzBWv0hs+VZ4CMhcrUes1sjndMKkrRcbYWcvwl9qAiEA6TKdl2sNXRUw9nktTx11s+VMOZvFfsF534KsEzDsQMo="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.2.1_1622527495526_0.7875961935876268"},"_hasShrinkwrap":false},"1.2.2":{"name":"ecsite-form-builder","version":"1.2.2","description":"A complete form builder for react.","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","material-ui-color-picker":"^3.5.1","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-textarea-autosize":"^7.1.2","xss":"^1.0.8"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"gitHead":"d22d3aeada687e463563fcb6623d667294074f6a","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.2.2","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-0L8VPFn5kb0NnPCWCH0CE/msviteGzMKf+YLK390X64KBSx4oQcHqJKMMTQeTFaiLDVGe0dwYPeA8JK1GgMFqw==","shasum":"84aa6627b00701286577e15bd09e38ff33d86435","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.2.2.tgz","fileCount":38,"unpackedSize":1760569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtjYJCRA9TVsSAnZWagAA2XcP/25Z3bLtieV045bTPrPY\nT0fMVaw6QTsvS+4Sxygo3ZxuncBmSRbntVR8BAEO6XYaA5p8uErtEl8ZGOXH\ni9HgTgoM7d67RFX2Sul3jwtjCzj/g2s9FVKU+oTzsXsbQi+rYvE2Onj5Y2vk\nb7Uvdk09FrCYU/XhH43OadIIM5bvo44XOcZvmDIrga1votpCrvf69h6igPc/\nlB8Oj3w093EvknBvXdFF1++ZKvT9pD9TOyoo+d2xpbwMXkf0Z/s1wgoC9q2g\nEdcqFp9aDHqSdzsZ0ausQCt+17larE2W5phnkNzf09FjhK1CZBtbG2vBwMe9\nbYJE4k5Vw87q9IgAQNQ+qOh5pbUNQ3r30h97pnfaINDRnY5RsVVNfGcPCdBa\nFOVssOF9bL/xXJDNIkNoES2yrVfbmRS/MS2iwZeHQayFqKI2z4oBdixxzBKR\n1cCarjEPQ4vrAST5V/jKDQKf9UHLP1MyN6+ayUi/8CqzdaEUB6Lh1OaBerkM\n6w/iiFMLHYLdFsWX3ykkxzCHie+qHXH6UCssYB62dFM5RH2ySeRU+ofs0Jyy\nYaXKkYiK+pRTT0NQZYgDSuoWjdsZ46b+MTRGOX1fyFJmnJ+dRCiOVKxpwCfj\nhn0KoCwBbLlowQPYnTZ5v7umhdgZrZpwo0S/MKXEV1UvgqceYtJyITYOSOp5\nEaxM\r\n=AyZG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOheZ/UtE8cmCMZh37XimFyVvVp4n6icqv4cYREABpEAIhAPxNZYjDRopwzoKQAvU2wW+OE8THWCKG1bMAv2ums5re"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.2.2_1622554121500_0.96351001014224"},"_hasShrinkwrap":false},"1.2.3":{"name":"ecsite-form-builder","version":"1.2.3","description":"A complete form builder for react.","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","material-ui-color-picker":"^3.5.1","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-textarea-autosize":"^7.1.2","xss":"^1.0.8"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"licenseText":"The MIT License (MIT)\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.","_id":"ecsite-form-builder@1.2.3","dist":{"shasum":"c67ed4c42dde40e21f518baaa780cf1ba7416107","integrity":"sha512-gYK/zfCoMxruuyiosURi1RUVt7CIAVDTHU0fzKPi6atxoQBGVB2qONk1tHv2v5TsrsHF8o7BJew7Mdx58HfzNQ==","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.2.3.tgz","fileCount":46,"unpackedSize":1760569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtj8cCRA9TVsSAnZWagAA7/oQAILmtOOl9OLukL0IaArw\nZ5KsrmTdd85aw2/wYAaoThrryrrEGTTpqBxn+HExHQr1fWiw3I0U8RmNahsT\nYRUeFDwqXndNiVNlMwD8NT/NY0EXXSPdQFYlKVbH9mNvFudn4sxUlQvdrFaw\nGECbRMeQx5qRtoh7tfWY3NrxeJit95MtxdYOReKsIeP/FIKNsipjaVnPmHI5\npni7FM9O09RT2SRB07aLECGS3zljAJqJlytwWtNu/idzfKhu68DGnmxQMshh\nO5+tOEJhnHfnRK2EDg7GvA1bIdrG8sdOJjETcw4gvvJyI1aqRoFicmfvsaPE\nvUpU18yiRgoM2IDyy9bgjxzXMVDYzHtvjjJLIRbf1F4xE14aoHdxhOP66eHe\nHhZO3f6jeto3DsaQYra4poXHU5VEbgu1GdetdvFKa9s00BuA/1Oy5O84LGzF\nMXs2qU5BG1nAsxhLXckKuVRm9XN5lOmiCQL0bGtg9wp+AFm4AQWpiLWR0+wh\nFjQreI7beWiiuIi3cqsyeaOKbKWZmo58PAuyEVIcJAAOt159jP+Cwbj+S/N7\njLAVc1IpYrQldc0cRNJWthI/1Vmik1aFBNLyqu2m18Cu0tS7tAEB7CemPjE2\nDpC7Oue0nvFNV4q41SbiErM/0JsyWlgY0bjFbYJIUr3NKRjCiBPxkA97PnoV\njieT\r\n=LkUq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDVyH6oM++woi8jN2b5/CqggWYFaDKgY0YCTMJlNcoVBAiBgYDzVKgcXPB2iNbzI/CB9KfAwmZMHqJpeLaprzvXCjQ=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.2.3_1622556444011_0.7130483124793343"},"_hasShrinkwrap":false},"1.3.0":{"name":"ecsite-form-builder","version":"1.3.0","description":"A complete form builder for react.","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-textarea-autosize":"^7.1.2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"53c37d601391fe8c47fb30fcbddbcd84658a98ab","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.3.0","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-tuspEC8fQyoXuHg7iVRPeIhWRemKE1NXKJkGeWks6Y48YQxN6VhW0fce1bqjLfgsVn0rb93NJontmthgC121gw==","shasum":"95dcb618e21c38b13f23d6a6d833cbf2c2895023","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.3.0.tgz","fileCount":47,"unpackedSize":1750601,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwclCCRA9TVsSAnZWagAAAU4P/1GXIGfaeiN3LsGfm8IK\nDJcXHKh5rfYsHnP+Hj50RI3gFcB0QKlwq9Ep7BMeu6lE7TDw8HXrSXrCsZkE\n/pckzUAMvQqV3QC3mM1O4Cl6IcFdeiTXKxf5+hsfh5FrdAjqj0Jo6/p4JdII\n/Sfl1mHGP2oRlIHmLJNbsCuWeFdcAWO5XoCsvhGOqygfIvbG/Q+qrtRtQNy4\ntIDHwHRCcuKY0xv2oFKAtZrmgwWFtf6nKfzAclADt3yssqrxbVRYdoL692Pe\nEUKpiPGOmH19oYiqreE77Nh2ZoMO2Co1cnAwS/koqHXx/0Ag0DWaXYtJx2wR\nVm1TbeVh1awZ2xGb+3rbZPmOWAw1ClbulwlKB9BFVPktntMfTUdEjcaws4hI\nhuOOsk18DmE/ncc3M1icwJYKGgoUOkZ0YGyisDCmYR4IiEe8b+BBWKSixOEc\n3NsDlX1p0FuSg5Sa8qxkqjJkXT6k2TVd8T+wrEOzNbOQbUlKqRmEEsuerEaC\nZFqNgf9zb4fjBJBlwdZDH5FZiGEBhiKw/KS/ILcjp4dDOjzI/ymjHY8CpLuo\ntiKJchECCLrFuArhlxDooUN2tOaj834+8ldm/Pc/dgghkLhI9QcXW/PcV2pt\ncRKUHQqPcBtv9D1qaz17O0zkvicpdkWkiGllFf2la49mM4P80p1ruZ1IxLGe\niaqa\r\n=uwA+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMKa5D0kf0JBOk0firYm+41S03U6jB1YFACujq0nfvkgIgP8hlEdVaNo3zjGK6wgYlPqX5BBpgFAHTzLgYPX+9csg="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.3.0_1623312706184_0.07846894420005102"},"_hasShrinkwrap":false},"1.3.0-beta.1":{"name":"ecsite-form-builder","version":"1.3.0-beta.1","description":"A complete form builder for react.","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-textarea-autosize":"^7.1.2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"53c37d601391fe8c47fb30fcbddbcd84658a98ab","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.3.0-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-sHZYbDNMlUhkmkr7LmNk+n7r5iGh4nsvwxXCaD+iPxgPRl01PFK3COfGrOCKDYhOAKcQaK6K+4FkKezBPwsySw==","shasum":"735ca36841030303f37c2fe657a9d38f05b13e3f","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.3.0-beta.1.tgz","fileCount":47,"unpackedSize":1750608,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwcxLCRA9TVsSAnZWagAAAIUP+wfoBinmIx9dqYuZ9R7E\nUzcMYBPTbJv51u3sn5BHLxBTBAgd8PqbpWDWzpGchyHFcT3sVSDknYlURo9y\nw/T1nWm69WCo78pWSAvj4P4t5sZflEM/bh1bJlFmTdlRCSzZoz3AGbf3DMx8\nRc1Tn/QwwwxFnN7yYoAtmSuczVtapeQgk6CY8sST7UDs1zb5aEuCCnk25BL3\n/nGXMSylvlxcU5pVZlgnDUv1exbvvW6Bcdq3183Y6wnip6ck9/ixojZHIFdC\nwc2YkXv2NbuPdkg2zBkVQ7NO062a0p5at3YgHyRbdNcC+tLHKc2/GJ979Uoh\nPR67W3yMuMa6Si4ubZsxiD7fXrlScSn9NT+//e2FrerkeVDETk0h1qCKdvgT\n7OXBR51f5xO6Xv4NdWgbEmndMLFM7EYiGhY7DCyOyDwLjyy6eR8kQHifeceU\n5rDZUquQKU/ebLGR6NIAMoPiw/MRx1grveCY/+Nc0/OiuYneZGNYMUylIcse\nxItdhqNYElDu0FaHNZV5VJA1jyo/CHjk8w7QHGYTqXj1P+SjQYOKcQvMb5y7\nyCptdF0l+DTaCUn4+bP0vHmSE1bSRjhcFO9ovX5OokaqVlgC1ULt2xcJnI0M\nWSYWHo6D7wiy15/pgHTFpDC0ch3mtnwP8xwWMYYqHNV8PEP4ouBqx8RTWMmD\n41jx\r\n=XCpV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0Vnp51wwBgMEdUWWyXSpTihJFdTEKsH7ObeuWFAWH1AIgb/KGfz+34STlxdZeyrjbHbkQYIMqn/BpJZaKwYXLp7s="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.3.0-beta.1_1623313482829_0.6361239149575628"},"_hasShrinkwrap":false},"1.4.0-beta.1":{"name":"ecsite-form-builder","version":"1.4.0-beta.1","description":"A complete form builder for react.","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-textarea-autosize":"^7.1.2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"53c37d601391fe8c47fb30fcbddbcd84658a98ab","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.4.0-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-CcT4zi4F+HqTbgDpGz4vR445FxTHRxx/LmoTV1HCJF8J1UkgofyKYRmVfmDiLfvXwHt0hb0LhZJYAJmdY0B78w==","shasum":"e48310dfdf8adfc40241952806a312bba77c6562","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.4.0-beta.1.tgz","fileCount":47,"unpackedSize":1736665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwew7CRA9TVsSAnZWagAA1iYP/jIBwpNEgFTrh45fKaP2\nNaD2K3bl39tTtGkWjF0dRtxfE72Nr5gBAA8csfTYqy0Cc11HJyjGtsibKw33\n7R35B2KxFqmF1P6olMEIkPXhbWUU00ZycN7G+EhCZSQF3uEw1CEhEM2gdfSr\nO9NgYEUX0M+P3iV41cfH36w/yzbUK0vhfQXTpaspB8SZKOV4vu1zRd21mFvF\nX5zUqMftgHMTbOIWeSXcSdmKkZSSJb2l9S8XS1csOMKHKubIlhFLxlp3VPjo\n8PUUseQaftEvuosPYkymExm1ea91MvyWWVBFRCPYDPbb7y0fo3MdOECmAtcx\nEyKFizah0vdSdMxj4UfqAhRS15Zr0pJCGlM5celB3daxCrVF3ffwxwLvpZQd\nIyZ7QaVGbIf6uM4wk8kTT+BASh7BF0Dz7na+E/isCg9jAGvUpqKFy2yJ+pNA\naGjgOHmFwMq23MEQwoEsVrreo0dpfK/eXrHQlqgi4LyvpRtJdtFW78kpHMRk\n+NvzrpSo9/7iTfqcTsYADdPpfCsWMS0hnFkowdKvQnM3qlIQuginDXRPH9Tw\nlWafZPqurj7h5m334IKNXFDjGDAU5dqQh6Qu7Vue+S3gVFWYpV7uYXLp0VU4\ntgZSdAaYtXMQWr9kJ75j0OaXaSQ5fGY6ztvhinhg28XWPBZExO77ww77G8MJ\nLfza\r\n=1iYp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7Dyv6gQl0TnHN6ZZyN4hG6/WBAuDnxCZncxAJddwvEQIgHdW2X5ErHuPwtcihE/g+U3k7YJ+YhUphuhCu7LzMhtk="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.4.0-beta.1_1623321658824_0.2596174920072798"},"_hasShrinkwrap":false},"1.4.1-beta.1":{"name":"ecsite-form-builder","version":"1.4.1-beta.1","description":"A complete form builder for react.","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-textarea-autosize":"^7.1.2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"53c37d601391fe8c47fb30fcbddbcd84658a98ab","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.4.1-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-KrbLcLaA2pWDOGYaqcKgxzSxihzyI7YhR+tKcq/mv+K6dV1V9rNInT7VePgnZUH0Dedx4wwPhMUiE5fzLYRHsQ==","shasum":"539f272590e0698b383bfa772ef0f7bfea9c477e","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.4.1-beta.1.tgz","fileCount":47,"unpackedSize":1736641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwf94CRA9TVsSAnZWagAAAuUP/Ammers820f31l4lRaZo\nG3S6TwywWaKkb88IF871sPXd6DZ5J64IHaCRhxJ91+DqVGyeXFTrUBwws1j2\ndRHZuXWH7v7BS4tdrSht8zsmU4Cnw9R57fxuXePaxaXkE2MtSNCcPv74UgQU\nLbg79fvvMX5Vk10dYzBBwGfn4AW73uWsYHVrVB0guC8+pK6ioihCLCeImSxN\nlom+nSTtO2N779N31KIgR/gzh5RQBV0RE/oTYPAL2jBD4uz0Rsjo8VCp9Mcf\niaCHbRjxZ+9c2/lErO1jG+x2mOdhhBWnlI8bHpzXGld0XOi3IkkI0suo8hf3\nNKrFdx67eOtDCu3OG9xVbtVEfaLfL9BSclKn49yb37qyGpc+AsN+azj7LinI\nEEDOjrjhavC/w/+vFLwy2RJXvgthxC0OpeWp1AnvfnzoPiDzkqzixu9Bwc0Z\n/6d5bGwiB54kgJMArI/ozknQLG42fRveMJ2Ui1vzdF0STB1AocslyXbsTihI\nYiF7dvH8GR3eRnplSShK8VvuhGMF9Fdv4kIVygnieeZhMPZk7ivsOUgyo6S2\nPY4MLbJtgQBiW5DMCQW1X0okFMPkQ3O2rh7WebCPSUT/8/tIom/px2yZqcWX\nbK10bQleeP/Sx0uNRDvMFWr7hmzvP/VfQxl1hJn/Wjwp7U6MTvt5yq8aPow+\neg5X\r\n=O86h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID6Fu0THxEdF1F15c/CVe8S5Bp/ur5LsSSFHBd828QHVAiBrjhTjn9jnjrPH6Oxv7DxfG/WEyl83QJ7qsicD5eNGqQ=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.4.1-beta.1_1623326584210_0.3194839476651583"},"_hasShrinkwrap":false},"1.5.0-beta.1":{"name":"ecsite-form-builder","version":"1.5.0-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-textarea-autosize":"^7.1.2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"0a58dc53a2d8b6295973ddc435e52507c1153ba1","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.5.0-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-CJ3vzE5Es9/RzI+KajcL0oaegLmnPX1zEG3JWHJsk0SGmGQUMallqzRbkZH2t5OHNERtgDNhq5fiwFZIfESysg==","shasum":"5409474a643fbb714b29e27f62a14ae973ff7a15","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.5.0-beta.1.tgz","fileCount":48,"unpackedSize":1734085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgysWlCRA9TVsSAnZWagAAg4kP/jjzviYsL0DYYLv9pO2o\ng15WZGQML+bmoAwpoKbct+eWUADX2B9KTSjq/hXn+gKo8n+ZdSHw9mkbjVqB\nIqq64v1OmuW+N/Ft1pwMdRy4Dr7jewRC8LcEeLEYcXJe6ALtLX12ZEmfAlXC\n5AaiA9KTXoV+dl/DUjvbzqkuqqyMhvOYPjEDt8yet6ffhQ4mgOEcHfTZ8Hv7\n9+/ml3paacyZY5t2WzjGHoXWEtQP3FGiCsCAwkXHlnMudnuKY4Fnj8ZPUM1o\nySRHMA3X5URbzGlKAChW6ctbM8hn9XtQ5wLwS0o1WKNy3Dexp8KIVXiGPBu1\n2kIG+ZzzgT9wprSkQMO8aFjah5wHAXmtEan+NFGE0MeEHs5ge200zfO+5sXq\nQG0CP96DMRz/uFb3/vyhPOx48NvWT1UEOpkQmhqXvjgAWVHTuyknqvG7Uf0Q\n9DW/uf0Nf7utFesgcEk87USEmX/y2miX+M0I8j9EQhCaAv94uf4AHMOUzohT\nqmWgC8P0UGmmIXfzBsY4JGA0bd+DmcG5zqxNGsNXMG0zqAXxUOXrZLANza23\nF458SaJ6Lbkw+wCFdgyyDYKW9pk2d1YGDeNsFisV7KFVtSu1hd5qgflmoGCo\nDmYctj2F7PEkkXYro4DcS++07RznX7oPcH3X/RSOPzb0L8RTPnuTQyxr1BPL\nJQsh\r\n=gT1V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIENxxo68Pey1MSYcAQoSVbDbHuS6E91SZ0ybVS7f36eJAiAhspeBZkId9cTArKKEfkE1QpFKk4Jn4WMg/1BuJjitkg=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.5.0-beta.1_1623901605395_0.7023645451723131"},"_hasShrinkwrap":false},"1.5.1-beta.1":{"name":"ecsite-form-builder","version":"1.5.1-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-textarea-autosize":"^7.1.2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"3f1e62ecfc1590293584882163f3f2a88ae70353","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.5.1-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-LqaVrhS3yJ1Qa2Tv6jb5KvPt1NkG0Rs/PXh/C2V6w5Y8BbbqQSOTzD2ctN4zObJbbADVXKI7Cc6ZNwspx3la/A==","shasum":"607b686317231ace18dbf3d932feb5e5c363a129","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.5.1-beta.1.tgz","fileCount":48,"unpackedSize":1734010,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyw5wCRA9TVsSAnZWagAAxPwP/iyaXfmFRG2GEcU1VTsk\n0ba+D7dqG5JKIiCrqLTXvVHujKzd3YQY+AddtKmVkUz7D2QiqhKfK6AWXX0l\nHDv75kEL8ZYTaMn5qRCuwmfG6a99+P50OZAxzob3SlsfUyDXrmxL6qFeQwLX\nw5NlxCnqxFLEsu8XrieyEXuWkdqC5bf3mscLbLkyiztfpFyCYDqkykQ5AyIk\nj0SC2EtRehlIipdORSXsEj/UpItRGvt6OR7XrfTapvK2hMtiZ93mFRisjHop\n2z+DAUTu2DrSMLWYWTvHz2EJVTmaaUpqmhpctssBtDIC4obmF86jCKpGHFNG\nr7SrfRLw+P8JQ4gn/APzMChdAv3lCnUB+N32tHfZI/YfUFJbnyE1zzmI3xtz\nb+I/8hlDi7viu7MRaxXZT2/E6thbXQI8EoNZ0YNp2MyEc1uYHrlxpS4t0unT\n3h70pIqABB52EstaxcKvnyp5i3rChJnJutHy8RxpdVvJPaIXuNf5lrLneNvm\nx0yI7WIvJZxmt4VaRW5mpBLCf9+sQqZan2Xy5oAi5rS70rzBa/I9Vtfgj6u5\nxTd13bj0xoQu0OwoOVRBs4Fw2l2qY+apAwrU1nLJLMGuyprexzt8IdTgLO3B\npeoXDVj25AN0J9M+M/ozaF9BXAZSqV2sO0cEYyN3ubRrRiXvCuDziGL4m6gP\nvrIt\r\n=H3WH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDj+iXBA7rXHaME5ADgjUtXHKTegJtDAGNb2F2wEq+AhwIgJzo0mwAgTyZ7MObtkQ743H/DgHte95AWxvotZ1xhUdw="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.5.1-beta.1_1623920239980_0.33836840036709126"},"_hasShrinkwrap":false},"1.5.2-beta.1":{"name":"ecsite-form-builder","version":"1.5.2-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-textarea-autosize":"^7.1.2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"3f1e62ecfc1590293584882163f3f2a88ae70353","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.5.2-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Tpym2DNQKAv1IquKw/5S1hjlPw7W2tLDtKc4tpE8DiD613yoFN4WzR0IcRxRiiIiB36JdCKtThAuZcaClfWy2Q==","shasum":"c0ad0a4860116204bb65735a52419653f504a5cc","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.5.2-beta.1.tgz","fileCount":48,"unpackedSize":1733939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyyejCRA9TVsSAnZWagAAtdIP/3F55vBWOyUJbmqHOs4Y\nlSkLIRVFA03+NJIDiLWD3peN+UMkdPFlE/nWIqa8tXZGMqpKiEZoR1GwH1+G\nvXS0K6lwNtHlCAo4dgSRtQgSBc6EktOjuyVdACfFaOH9DCZBLlw6GU/h72je\nKzVmjOgiNFJ6Up4nocC+blX4u4Oi3Xb11FkGKY0rjjKtF6K5SuGaflUeAeIE\nNuYUF8KmwsfiQAexaheeuwuAlN97lmGi/Tk0Dof6bCGb2pRPtDpDE7jckoDo\nvnt6TnUukFuuJkN78XpeiZIDH+jHITY1AMyKFsR+rLapT7mAzn967NKYClrc\nZGgLklBbzlpgLzWKQAUUBBacMyv+EWudGP3N4PF0zqk0bI5212KfqpxDDGQr\nfRMm8rdl4MmndTcNi0NLFqfrdZMD7GN4hlGDYVgjJba3RrFgWHnKbj0DoAmM\nY6MySvM4cAtw8Q0sf8LWseQBxqyXIwGaD46g2axLpvdLdg7g1zcYNKPDQmw7\nVkdPh4ub9UaexuKn33BJzRrfenOedBZQwGk4IqNtnP2nCZxPjJHki33gjb/c\nUWY5GZ+RllvxovY+hTzfIP6OI+o3ledGuiFGUz3Jv5iziCcQ8p/Lvi9h+4ML\nFFE13FI5b1MtVWNlaFzvnvoYQupppyN1tKGa0teI66nNeECGKTgBseGhaR1t\nSKBL\r\n=iQF5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGL+vOOcL1rOJ4pZxC0MOWGeWvJzvf5wzMxWEem91J7wAiEA596alA4lSNMY5V/WlnRl9/kYoe5d+jd/Ulp/wo1sbs4="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.5.2-beta.1_1623926691079_0.9563392491054574"},"_hasShrinkwrap":false},"1.5.3-beta.1":{"name":"ecsite-form-builder","version":"1.5.3-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-textarea-autosize":"^7.1.2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"d6388d42605bb0590349913bc976d3e4eec5d4f0","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.5.3-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-dszbz3vMg6LaJbsSCuWQpVn695EuksWU4wFpP8d8/0hTZ5UZlt3aPAPz5cN0WkYQz8SM3SCLCWZXJ8z3dHd+XQ==","shasum":"5b05a2cfe9489c4bfa4a77b2ad03a72de746f105","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.5.3-beta.1.tgz","fileCount":48,"unpackedSize":1733874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyymFCRA9TVsSAnZWagAAVC0P/jUslzCyybA76cHRwr9S\nyGzy0KHN2vV91H1K0OHLJsf3xfYMktutaqonwHv4HIgoEB6KeoiVnS74h+GJ\n0GNGLiatWtMf4u+4a3z3G4320g2nUAqWAdLAzVJUQLIlxzzDb2gJyKJ1cHVl\nVlsQGF0uKZ25OKY1DZ/yiSMudxt0/0qKvEE5hmwYlfgyo2MVWR8E6iYsJuSj\nmqOdVixPXmIHYL5Vveal3DKUiQF7m55M/N/YTF7Hie6n2lzj7qDaoYYXQkTt\njt4xaXZc3aEuNrCx824GNXIaqJVikBUQ0CUc7GnZP0bZ0qalDAMrfro1cjQX\ntWm0FAneCdNgYvmET1/A33HeQuz/anHH/xaXfUfmOzC6OosOcLLCVSEfW2X6\n/eZS4hpejCsZF17aD4+/3wUmNk9mwh82xn2+TaF+wxsXl1rbqN+cw5lZqOi3\naEFfe/VM7xqd/yEF7FO81AWXmgugAwbE/wl1JUDc8EUvKzesVckML754rTiy\ndSsRvR8ZZA2V1kFLAfP1JC+ZGUGKmEQPRKiUQWE4iydm/GqlVcAc/OU9oBMZ\nd+h0v/dMWY2a8mY6Ugyg6UYpUFdstGw6OkSN176lig1sIql8Oym2Dx2FghVn\nNA2VZZ1GvpygjmLtOgRL2m/8+WLhUVcRlTHidIN1FnLOaIwryvazu1MMfCfI\nOBhA\r\n=R+e6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDULsG8O26dm7FBOQlL5KUt3rQM+clyilQzxE3VBVYhcAiBBns6ppZtuocA5yZJV1lGJSrPLv5JqSxwe+Br6YhNqSQ=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.5.3-beta.1_1623927173181_0.9099765938718156"},"_hasShrinkwrap":false},"1.5.4-beta.1":{"name":"ecsite-form-builder","version":"1.5.4-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-textarea-autosize":"^7.1.2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"f56016d6aefa0e3407c2316807120b683364f7f4","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.5.4-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-qkTQxbNA1VCzjS8H7v4Dsh3lyLKx18ZmcZ8qry3xdCEY8xTivKfLOH6i8iGmC4LvN4Lobj9UkFoqTnTEkMhfWw==","shasum":"b6695f1e2bf20fb8fff637b25d6bd3f0068894dc","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.5.4-beta.1.tgz","fileCount":48,"unpackedSize":1734066,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzEahCRA9TVsSAnZWagAAPxoP/3Wa8tFQPpjH451d4Z7S\nmTJKhjGbGc9cmbg5sMuu3jNz6gfVqWRPShzPTaugJcvbaMsiG7k5DpTqyyGw\nl/rhIOrx6PQhP6g0tk6STCVAxdKWPX3VtKkNo86e8FnXkGj4QwVUhkOubEeh\nk/PfGYblYMbUgBiDIfViejF6n6W1GCYyPtyL2UegjuwqTMYSH7NrjneGIDxA\n4wlNsbWRezgV0QONHz4oPndt01hmTY+Aq+8B0Jm9ik8SnjtV4YZD3d2kumeM\nNwbhpw9ix5SxCehITSDJ8eQ9E6qVC8/XZreL3S1E5aU+Tq9vfBw+yZ5zeO3N\n9AhF0ZzXFbrOdnJY0JvPoRWCW4Wv5VRFPkfpEX3ujj8t/n5whPDWkEauoLt4\nkv2LstLu4nJe4/ViCAEH1QqeeWxtTVsLI5MVPicZ/bBTuqJFs5WlJzmA68jV\n6r5CavWLerXbAI/DDu5gcMFWNajbJ0UgVCM4ukb+8qQDzbfxc8AG/MjRfxip\nicEvi6wPCpUNhM3xQZrpSpsgSsd6c4E/EhYKr7w9rbPcIHqgtg0VyScxtgsJ\niLBmc+Mi5Nf7LI0hwh4CTlVWVdz7v976YEPFIEalHq6QRV6mCWofk6pQir90\nBIkkBBpfndVIFNHCPBM/IpoiUFVmGZr9fQTgEEHWeXqiQAQ6avQXhibLbsI0\n5zfQ\r\n=USSp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDf9LUlwqzVtO4xzXpnBA+nDoj8t8TPQxrh1vvtmCKa0AiAhIucMYc8mMe/gxTZTM52+iioBEy9z/yAjejK3QQu9hg=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.5.4-beta.1_1624000161033_0.591638710600789"},"_hasShrinkwrap":false},"1.5.5-beta.1":{"name":"ecsite-form-builder","version":"1.5.5-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-textarea-autosize":"^7.1.2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"f56016d6aefa0e3407c2316807120b683364f7f4","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.5.5-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-57FaFgA50WHfc7M3AHI6LKoH+vuhktwmUMDkrbpZqIpHNU4cctSIH1OfYX3W8P5TvT2w1WHNJyDzUUc1WYbwNg==","shasum":"ce106153057241b7c8d9a02a6e50aa81767b9a80","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.5.5-beta.1.tgz","fileCount":48,"unpackedSize":1734074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzEuPCRA9TVsSAnZWagAAdAYP/RE/TDOeS0tPlA+RMKSz\nHT7G87RV4/VNkOaIHERSx8JBI3V94XYiXlB5u3KzpXD/WobCLxMXPYDs7aMT\nDvUfTnosanwQlx7XKOxDmT5ptWFNBoTzpaHRFxYRkzpLlzK3fLvwZ8MGhk32\nhSistJGaapfQhVKKuqnvUOGgxolpA8Rlt00Jfrh//2cuD1mzDlqaCTm8M6G1\nG0xq0bksgM03B/Di+85pgRqHTEV10uOCK/go+w4BxqORrGO3rCPP5PRnQ2Sa\n8WijFpcMyMOpwTpZUZ5sxtLMbG6ZyOxZzH/4uuJpkbwulFjAyjjkce4nmjTj\nVnU+efWUOgHB6REEwL26evimoRE7slnnuq88VfvKjoG38XpUiVUrPpXZ005w\nuSTG0u6IK8UF3FXQMxnKKV/iHwc0SRxeQfXbh1vgVOELAdWFxozrDfyIkaUl\nP/XkW25TIxC2aed5NqSjjge7ohay83tQKFPdWowiRpUtRKCs89cia3Veoufi\n7eBj+c647If2tuVjeFCFqW/nWWEfViHmyZlK3fASQg3J9I+9crm4SrbDJFwq\nP/8yFnLbP/g4Mh3g+gRCP/nUhsOHmPsaRQPiBfyHUQKWIb78yihlprpCPBFO\nMNGzVEsK5cJMi+Dre6lew6ZbvoxZmcXccvwOMuRla1nO55x6VKm6FLcbLxqD\n8CNh\r\n=DK14\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDT+3qbTRxZXsFmBS2jjptX81uJ2s8j5ydqMbjXg3pyPAIhAJExiZU3NG0oMhxK/eL+vsWrxavX+fue11JQK7Gv9i9K"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.5.5-beta.1_1624001422404_0.4651672322129605"},"_hasShrinkwrap":false},"1.5.6-beta.1":{"name":"ecsite-form-builder","version":"1.5.6-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-textarea-autosize":"^7.1.2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"9a281c3629331abcea95a5ee361882bdeb691496","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.5.6-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-ceH4ek1iWL7EyE07wZxnamzo6QbhIRNgRKqk/xRqaYriynKvKcSskeFofPNUfX/jUHf9uXCTSFTCrmffGyTfsA==","shasum":"c76da57c4cfa43cb91bce6d9397a616b4916e4e1","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.5.6-beta.1.tgz","fileCount":48,"unpackedSize":1733614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzHPpCRA9TVsSAnZWagAAzjoP/A6QZGy2v+ehgBY83agC\nTCYzyAPuEWVCyc3oO8G/AR/7H0zNNsvWdGT/Y5Urhd43bzGXU66qKzZOXuFE\nQqrNXrKPOePA3vvknkBVYW8EMAsG4KIc79+95DB7KT0KKB4H/usBQnOihNEk\nwObNoBGPsIdwqIvpY19N2SqB8yvGSb74RyGoPAzpdHAmVBMX3ewEpxcSfAAW\nXh8ZZM78KS2NERNsmSztj2YS+TxaOCQXCuwZjVIs+30XW3cOxr4lPnVwVbhF\nS1zi48WDdDJDEXXtZF/aXawoykxcJEovBdQxXuV8vWOJdkJLlKu3dU+GOi2L\nL6A7Y7iwukQc0ukeTI3iPXawTC2tDcpOsf75+XhgNdt8KDZIjfb9RtIHPBlu\nXj1BQHKDPDI6XzIbisIF6ycFFwM3GUJycaBiJ4AMhHc11drQ2hiV057r9mlZ\nqtttyMBfeg4H5V2l9OtnpGLOEU4XqeJg2laPi3fV88rp+86AloZal5m31HOd\nJVjXpS2X7t2+7ZpTbIhJY/fUMBwGBTSBuLvdGpqNO4WUf5R2FgnT7CqRW6Tp\n2sHMYEnTpzPPDFSusT5b7hLhyp8xhWH9p5gSfvNsP840pRCXFal1RBKDuO/c\nMYMy7z8vUkWCGzBZcuLDafN/8OfDhVEPAYTZRCoLUAk+QKkkf0Qf4S6s0kl0\n0kS5\r\n=Z9LQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDU+wO7M4ZGPCYSEIIJTe6TZgI2qWL+UQ4ft+LzlYHnCwIhANFMwrqrddqZPLlxNsVE+WO5IkjX/5SXSVDReP4mphp3"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.5.6-beta.1_1624011752620_0.21894728922425877"},"_hasShrinkwrap":false},"1.5.7-beta.1":{"name":"ecsite-form-builder","version":"1.5.7-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-textarea-autosize":"^7.1.2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"9a281c3629331abcea95a5ee361882bdeb691496","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.5.7-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-vkJclvYo1atzuDbKBGGhnHLQB7vt+0neGguf2VYF3CQhgcRd0WY3QtbhAC7aeXcFsh8JrHpKhnH7mGkJnSx6aQ==","shasum":"91b253433e74bbdb6f130c201bdb012045ef80db","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.5.7-beta.1.tgz","fileCount":48,"unpackedSize":1733806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzJvzCRA9TVsSAnZWagAAb1UQAJXXcFY6eotyjliwgT+p\nCpHytiMy3QZyvT9birqIif5VHCrXb2SYqshdoHjBlcJM0ROacavPrZaKZfGp\nFegsgsr1ImSxjHhVD1kylzhN6UoMRTJijIjS4oRbjAVowfqUUMk5ndpXeZUF\n/xDibljwRrcoXkfeVz3DeekNw7YnHQ8NHJLpccdvczVwDLjoaUCoQM1VjraK\nuaEf6UJeguulLZmfp2t0njFkEXmMWzocoFke8E1jDR9Qn0eJUsJVpM3XMKnE\nK5S1T6ChApo08YDQFRDrkfVqYQOyF/n2NEVpHH9kQFetflw544UrktYBgQY/\nZMhUg5WVZPAt1TRAw+kMHzYOyHp4NOoMFIX/KXzLyF+4Kad7gDv2iZH7p21b\nxwn8t/oFQ56r9Ggv6yAOrUyg/Og/9MompD4ZODNxpUroYBLjnMFYR7ndaBNO\nSEJ6+rR54VsY1MIThg/emRU/MUmITO8MoHmx+Q3cOPk7xyTcyrk/LG8ut1SH\n057s2rUG4imahfgsNaSngUubxvNT75m00kQbi8JvAMm4VC3501E9Ipviav19\nDtjEFfJF4oMj/Xa2sfwW6cxPwLeBbufO4uyG69xsYoDtV4i/74EuNP+530Ya\n9jFtgrWP57vcQKXwIlr7qjCxv3GYyt91LsbZc66He7DX2rhWJ7QyEgOkL8to\npEsT\r\n=QTqY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxxmCxdT7MDDxEW4dGA5NROSgLP9iRZ9hg2woDHlu8zwIgM0YEOJKldV7yc0ne/S1Jm8REpneHJGKCxRjFk+bR1Uc="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.5.7-beta.1_1624022002475_0.3222109470410284"},"_hasShrinkwrap":false},"1.5.8-beta.1":{"name":"ecsite-form-builder","version":"1.5.8-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-textarea-autosize":"^7.1.2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"f3bc9440896490a3a1dbb96f850750cc4c452394","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.5.8-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-tzUtbk9Q1Q4IrIuZoF8qdCF0wD79xWyE+VzrndV+fREgDPd8A0IJQ+iw0onzTKakXDcOADPPbsqqx0pxNjzq+w==","shasum":"e001787f0fcaa4f716aacb9058b97350fd25b7fa","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.5.8-beta.1.tgz","fileCount":48,"unpackedSize":1733862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzKAPCRA9TVsSAnZWagAA/oYP/3C6uKDGtd6769ulwPj+\nHoswGEv5Iz4MQPCVCLyis4lWFsbtGnvb6+izQH2lv8Sc2M7LVxEJQbnaAz77\nChUikXtSE4eWSyM8tBkeaxG0vO+klqTs2SP/+oXQUy9BoCIJgt7dpnX25B5A\nZq5lKtITnJep/2cqRGtFcv+dWOGXb4wp20BvhypHG9vbQYUqoA7htxSLY5Tb\nspoT8YAq8tL0Sab6u17arW7fDc9CoDaLnkJy69xCQgJjUBmXJE/4bO1U+/qf\noUMu+Kzhcx/LxfmfC+GCc8/bW4ScesIp1Gfjx+WEIV1dhlwh3koUyKND8+x6\n1VynSwaXP/h4neKfxsPg+JEZZAyeMosjR7o9+mo355HO9syuBJ8kZ0paT4A4\nfYsvKTHLskS0CyreuPFrbpsJo0oY6Yr7AHhMXPRwIJZ5PfDyugKw04LMu040\nKqIA8eNBSsnlrrzoY39P/21db8RANczMMm8kVu9dU1cdScf5R5Rerg9ZXrWv\n1l1nbAIPy5s7z95m2cb9H4wvjEXOnnlBgF/IhEJKxygxt7Y1IjeJJ55drfKX\nS5k2vdiswRUQU0SxYSiPTa+HrqpqLmU0jti1gBcNdpj6wCFdQwuLS+e2TTkM\nC/9BWQBaESN/hlw2N1JsVGKLzSh1+n+2C/Q+uKsGjfU+xa1xfa+15U/35eRh\njxOo\r\n=BLsQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGLA5yxDx7NnQMAJlKaY+vTWuFu24XjjoxmIxGZnHJy/AiEAi7U6IyXKeqfiNqpIUP/fbxv9iTSv17DwjIiI01NvCUc="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.5.8-beta.1_1624023054671_0.1757140395284733"},"_hasShrinkwrap":false},"1.5.9-beta.1":{"name":"ecsite-form-builder","version":"1.5.9-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-textarea-autosize":"^7.1.2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"f3bc9440896490a3a1dbb96f850750cc4c452394","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.5.9-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-8BQ5IH/ZuezWr99nWkyGmkBNZ4iuJdnLJKxkhupgHaY2BOD3wU7ooHDDVeuzrt8rvPCsKYmy8xIg85KKdVGKHw==","shasum":"73a68c0096c2f8d2f0a585aea5a384fe3f112422","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.5.9-beta.1.tgz","fileCount":48,"unpackedSize":1733826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzKGaCRA9TVsSAnZWagAAaKgP/1yZiap9KGDlipAEJeaG\nOE5kGKp8QyiNzfs/dMTQvNfhMX4awOC07/qkC7pmTDSB8qdpGMrqDEDnPCtl\nHCHLxg8ApBJExZaZ7VsENkMgTHzQTCZD1Ij1xLMffk0KTH8W459u0APdI9VG\nVlFsnAj3BS/mLjvLIjf/YfKKzXKcDEO03y35ZlFcr7Q+Xtt/SKXYGhyCHzGb\nbSOrGGkfWGW9+Yh2OOVTGIqVKG11bQ/UAQPtdYSPRgW7gHeqmTiGGZIfkVNI\n+t54ER6x988HvurbZwF9KcxVlv/LnsfJ/RNMyxQbw+IwvCFFEibdMDThU+uO\nGEllXkRVdoa5Ffma2OlJoYdxQx6Kf6yzrX+nvQTj9E9ddlGrYV+RYcUVk9ys\nc+hfeSPK8795Y1RzDiSIuBdYIcu43E+ji1LZfQMC/GFhzP7CqvW8AiYRt9Ss\nXdBxIJIm9Qpy6FfOnkIShmazObFCMo8xieEGy00AgkszS6RW1BId8jxdArnk\nF2beFaqxNVww5juz5WCW6Lg0ODYv1ZNJ6wYaDoDcFUkBxZGaMOp9FJPo2nds\nxOvCuDnH8dvk9v2UZGpiu9RG/KkAFyuAcHZO4cSNlLap6UwDyBR4Wad/17ov\nwAdIYpxqXmJbrq97c6WtMOgIlyqpzRD9ISO3n4eQTJpv+dBvjuhzHeOQVV0i\n+muE\r\n=ZRHL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWH3B4QIjirngGwou2vpz+6GN7998ev7Q5PAx47I8qkgIhAIbvqCXmKLH5bsExGBDI98BDcTgrWi31QFzrmRdceV4s"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.5.9-beta.1_1624023449730_0.7891167252499709"},"_hasShrinkwrap":false},"1.6.0-beta.1":{"name":"ecsite-form-builder","version":"1.6.0-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-textarea-autosize":"^7.1.2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"gitHead":"a3b4c52ee93fd49dd8bb5810d89d5df3365abae3","readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.6.0-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-PbJmGK6RgTbBALMJrqCn7/mL/6gw2PJWXNIL6ExvHqFjaJU25Rqi+ZcxHxmnRYC0EN0Wof0tgQz2+GFDxSgLAQ==","shasum":"de2b860666b696ad4e01352540790d3342caca62","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.6.0-beta.1.tgz","fileCount":48,"unpackedSize":1734240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0LIbCRA9TVsSAnZWagAAadYP/iIW4gnVzQrs2xF5VdRV\nGTgP8HpvYRfwu/rIOzHh2P/uk9DrKOkFyM7XD8yYjMldYoBS6ghjQEAG4oWX\n46qvd/DM5gajgHfi6fMHDSSlrQ80lM+eCoLn4twr4VFlUwmTZHGoFdDL6sAu\npt/Rexx6Mrrxe6JSSc0AsLGh4kp+ovPFSQZ5gOeHXi861pLvNZ6uZJYipB0T\n8G1X76ScPG9TjmYlmqbF3h/Z3cBthc9SR1ypttjr932SWcbGdQLajFPROsi5\n59Hq7P2/0Nk4uF+3i1xCRABbMUW+pu1YOEnC7OeJ4Yao7ciB3kWdLPOMGpaF\n3He4dxna747sNBw7W2rZGI8/vvgXSX/3e8Y+J7QJGKfOH2MgVO6G8kDytMrN\npmgpoy+1yR6JAJSbJbo/sbSEVjSGIa3glRnSCobZ+zK8ujrdD53UgtImsLOq\nRsLaPIjThlf7O+oIKFndfn9158kf5mywVsg0jUXm+QOZCaCILyyeqt5MSQYR\nBJ3apl4Z9yrzKNqvtUQGXTrNXkjAmfh1V1yY5n4xmkKn2SBhEmPd0aQOPWyT\ncq0P4GZjHLSPdTEE7uYCf2EBKvqORBJeaoqMoqGk+sZAI701AxseI26k1UHN\ne80HIZkIhl3q2LOoOv8PuefT9fJul4kb29PbSRVBTB+zqAPQM5ekCJmmxB0i\nFLGW\r\n=HYyA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3MxuJ1P+L+Pq1fr5eTRkMCVBO43FI3gGd1y5iJlzDrgIhAIgvkJShrjwqUXHPKDgXr3YdD1i7zK2S4CVSJR0dx7ud"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.6.0-beta.1_1624289815938_0.550698550433043"},"_hasShrinkwrap":false},"1.6.1-beta.1":{"name":"ecsite-form-builder","version":"1.6.1-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-textarea-autosize":"^7.1.2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"a3b4c52ee93fd49dd8bb5810d89d5df3365abae3","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.6.1-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-lCw9CKCFDKc/XyVtcIKZhMWEQiYcKcnXpvlGIuTjihSSDTJu+4y6ko0kK0wETLJG+hW2GC/HWRJNlr8V2ZWf4g==","shasum":"611f6fb51fa628499c0239eb3ea7af98fdb6ca68","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.6.1-beta.1.tgz","fileCount":48,"unpackedSize":1731970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0cwcCRA9TVsSAnZWagAANTUP/Rr97mX0lYLtUKtuMcmM\nq/iedDEuXMSBprCg4Y0JYrMB2/lfT6Zlpuaam7Xx5E0tvK9sOW6gpz9vl/nQ\n3BqbgmTVyEEDXEwJV8QJj3pXBWkJR1VRgXfz3NzD7dt+kHNWShv8rP6v8KhL\nHpsCYFJOb/0FMSzUZrdqZDNhEH8dSXwftrJz2FW2HZ7GDURBT9zkFoFrGg4m\nzdhJ8YFbRxGtvPV/+3beH7BhOk3fropXAuhx4lxRRxRcIG/Io2pG/SR5+xl0\n6oHLjpMHMPYQAR4Qhs2eAEXRA2GqtMjoa5pbx0Q3dU4o/vpQN4nLMHB8Z/Ji\nN0sYeDx1wAhDOjD/J57+VqXKw+O6TXU6aJXo4NoRgW+e6PIweufPxsJIO/aM\nKMvc22QEOaalJSTh8hUEn6xbExOqwr/da2r4Ck2Ct+FkmPIL6AJXdA9+gWy8\nAAXVNycuRmuEEo2VKCRVWUYmlbDfeOqXxqQhAvjjbyDA4iMpTfGbQiBzf1H9\nY2Vvsbv/RW3sPDAdKg/pslS6Sia1ls/SqJbqGw214QVncESeSt/alySNfoUI\nyhKRd/uIBDv1o1qMVLaLI2bF6PX3zSMIkYvjV9xujYEygsae2o70nPgCSciR\nPr04M2GfsKvthsCO6PEAZSD6tE088GaVSH0ew415svqt82sEc+LnJlF6SjnV\nrffv\r\n=i2n2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJboNlRKmU5qu6rVSRhNcUPv2Q6ohlEFF7tpEl3jX9cgIgNrICaVDSZfoD8X43kbkzwG6kcYykXlSVXoVxmTZAOKc="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.6.1-beta.1_1624362012232_0.315627089150776"},"_hasShrinkwrap":false},"1.7.0-beta.1":{"name":"ecsite-form-builder","version":"1.7.0-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-textarea-autosize":"^7.1.2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"c86a8b4de94173fb79d242d4175d4884f9deda33","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.7.0-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Uh+efC2S9mUgsOjehKh4se1e0Vp3u6gURvyRpxD6UqZQR6Pm4CfLFNS9BHLPtXiuwr5zOLK19tPkPzy6vqLWuA==","shasum":"41d614d0256bbfe1c2f913d6ee5c17a839c8f825","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.7.0-beta.1.tgz","fileCount":54,"unpackedSize":1841302,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1ZahCRA9TVsSAnZWagAAcVgQAKJ7lmNs6lRj7HfbDGrT\n/n95zEPXF948MvtqfgU4EGzaoseXhel819OdRHph4LorZD2SDdZh9IFADBvd\nEM3O00FF+a3bzeKHhbecP1s6ZFBynR6bY76/hJbHTnYRXjkzd73jpfIzeCdE\nrWjYJz/P3MXhLommDPTaFtD7aMuqiYsak4PSgIVXvNeGVz+RO3DuCOuSqVEh\n28fiuMVRz7nHAKpYGvArxTyQPCWt2BKj1znHhLuv6uex/RZeVr1+wprgmMss\nj/x4HaMpsRf1uEXkz7hRznxA/OY8S4rANLWVU1fewu/6ri3NLqckjoKCkI8B\nnOV2LhjBil5LZua0twOvbtPmpGqloU8FDZKEbsTLj70DrOhtJyjTXkzobLJD\n8O3/9tf+tnv/Pi35BVQG8DFroNDOeutfpY7srlAhy48S1gvXlppYGl5CGD+W\nrA3M+QfExeZbHYGX5ygG9Q+YvanVAkwoYLLeD8tGA4lF3Hws9RjJl1SlCI/k\nZUsn4kHPrbDMgUhq+tfH53HSIlY9f9M/isD0yJGWo9NgLGSQr5s0/qZoa5cP\n7zHAF3OpjNL9dkzcA9JpagsO+mKeX/54Axl7rt0uRmyL120MqMR2ug8tBEEe\nVU5H0ci/Lpn9sLx+3czWdLFX0PiJF7ZgA/c84713klmPwrZ6H6Pjl/S5VGWZ\n7wP8\r\n=vVIm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCymw+e206bTffePa8uj5s+wUERf1ekXZ5U/ZRT0gJ2vwIhANTCtq19gI69I4Csmtx0NxRjxgxTEht7zVJx1TQQnUQU"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.7.0-beta.1_1624610465442_0.3215650142667339"},"_hasShrinkwrap":false},"1.8.0-beta.1":{"name":"ecsite-form-builder","version":"1.8.0-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-textarea-autosize":"^7.1.2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"60801dfc678304e483124b6a143d93172f00e8e8","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.8.0-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-H52BrBg8bBDLkvJGUrMagSOfvRxcBTzRCSbrodjs1OTRtQmqPThYaw9T7vCMSOnAFJL7eT9XL9cbcxmfKPKxbw==","shasum":"866bdab82b1cebf52e83511ab103dd99b66f4b70","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.8.0-beta.1.tgz","fileCount":54,"unpackedSize":1826635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3GJCCRA9TVsSAnZWagAAd9UP/iPWS11EkoRcw236LLXp\nNDRewUAA5CGpWTTeQVb4QrgXHTs017WjxB7BGuZMqMbieWv3d2ThevLhoU1p\nT4MyLlowCDvIyiXsGIlIMsuAiHI/7nzsSvBNyR+V3a+DBR76mH/qPDJh/RaN\nCAU1wGP+wYS6W0qGu2CXrXqFBp2yNNkuLOB19wIyiI0+SMqGKBvK9a+Ph2sw\nRblBofCi8mbjsdH716Rij62s+3MSzAbMqs2ffe++1BD1r4lLuc0hhsxSE4E0\nljxg87dcYgMvge1H8i2AI/SyT0XT75vLRNyak7GiChLtB9JJbUONqSQu/GYH\noKNoj6VB1+ZDp7zEZPVek+MzJh11MfmD6bG5ZxQbEjwn7gl96X6rbQeAn8cD\n1LQpoE1oU7P18XXm/SgrPXIN2psl/fLkFD76Gvijlys3wtbV76PwfR80EQJq\nm2slCwV6uiEZYQD5SFv/S63j/CHWqOj9b+JAERG3q1dblsvLv2vFIq5P5qdt\nYEuv7kM6Cn9D0lDtv0X40loM0H1ey1qFKS8TAtB1rN4nI+v5LRljDjwV3IHA\nZhW1wcUg/CVzVmiryBqgLp/tq+9uwB9Qo3gMR1qJSXIw0vca9+l2HIHjSGAh\njLF5apXCeVZcG+eu7rTYulbVaQ+5QxcRZgW73o6TAOsZETftDSbIMwaPhUXo\nEIOS\r\n=g3Ll\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHGueTGTriDrQDjHeHIkYU/zShH0d/vHdhHbNj2rCLrGAiEA2t5PqOCu5YvrDdX0XquDGyMVKSo6yCGttOELc+hX+5k="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.8.0-beta.1_1625055810248_0.8974680408978277"},"_hasShrinkwrap":false},"1.9.0-beta.1":{"name":"ecsite-form-builder","version":"1.9.0-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-textarea-autosize":"^7.1.2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"57a49064608b31b1888f9fbaeb6a14dd632f137d","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.9.0-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-0YqWeEC2Ea6WWA00NgCjUQ8MLYiPmlYkh2iyG4U6sBSygnrLooHfX3KujjIxfXzmAP3sTWOXjw06Yx33IG/KUA==","shasum":"bf2195773a093fa54e2217d0d55aac29b197a0d4","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.9.0-beta.1.tgz","fileCount":56,"unpackedSize":1858156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3HEHCRA9TVsSAnZWagAAMiwQAIyEgdJj0qMSM5sI/vNE\naDvDZfA0RatkFjO48DdMMPIG2VPKiBVyWZqL9aGsTJqc122k01dguFVds2lg\nTSYLyYZzk0tEzqRmYJ8vMu1EDcPkGwEiUCCslT/pTuKvJJO3kE4QEkPG0/3h\nyGPeLWwLM8TAX7QKOIQzFPGuGvh5fhEduqKW/F4WDc/0jUgA3TVMgkT3LtMt\nPW35v0MgcE7PPgAovrFFFVcUnkiV+WIFT77P3UvQU6y7oP2ntp6HEgqwb0K6\nR6AziQyZ9uHL4I5+pM5wyKGgWoU+deOC6Ffg1D7yaWJaBXxj0OP3BehkKeQP\ni+ryHF+BNt0MSx40xSwd4dXVFD2X23p1BRuNAeBSvCxTi3qpq9hcMiyCg01U\nds1PYhyGvfOqCdFDOBfo7Y2KOOYrFUeyf7ynjYYILSUlYMgq0OBfJMzK9nMj\nCKrrXnvElYpOV8e+wvUqU3jZcFMWKx81HzuOVMudFUace+ZiEKbwtdodKEyb\nXXWGjffxaDiwQPSyYgLMp3juf9Hke/sHK8Crd2aS9dkgAf+WBzV0Tg+FoCk5\nUjMrLKn3SlfdSlFY7iRi0wQKhHi02zk0Qyrf1q+TV+IRv350ZM2xib0sbG3g\nWeWR4VKbBC67iHwq5chLy38EX6j8pcFwU5XnNtrSJawE4+YOGTlRIcAWM41j\n6v+M\r\n=nkay\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDC2nMSiqC3Zu7Lb17mYxJOrGZcIGLoeTnYZMB/9JOVSAIgF8SpiBLsOsP58Nl1P2qZ0fQWr3RnQMtCPdSDe7YBQ4s="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.9.0-beta.1_1625059589797_0.9564298559455184"},"_hasShrinkwrap":false},"1.9.1-beta.1":{"name":"ecsite-form-builder","version":"1.9.1-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-textarea-autosize":"^7.1.2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"ceadca1a47b082a28edadbd7f23a53f1bf3b70b6","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.9.1-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-nCC5I9tw9kXaO2fwtSQEUNcEikAHIPrB2NLVqoY4u54w21M50QgwXqD4dOXTKGSAR/4ccR1lO/jTcBGSBVTYKg==","shasum":"5ee18aae767ea0b4f41f73b3022ccc9fd7a9f870","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.9.1-beta.1.tgz","fileCount":56,"unpackedSize":1859058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3cuyCRA9TVsSAnZWagAA44kQAIVtIgQnKLD7fK4zTJqw\nrKLxn92QPQ84wC1RaPDiPSelKJFdkvyIUsAPlEYoJXVMQcPrFNocNvW5oSnl\nyiHNdsm6AIZwrQiUyFphEyV48BITETkbPQEGizzxPC93q6oHVbbEtAT/YL+1\ng6YsmK2jNkdRWqqy7PD1US41eJxFEioWPDk2XwLtQ1I93zyiJ/bPWL3qMxws\nRrkLLb6bLoNI3UHjhhZzyz7QPiSH+jqpd+0caUrxnR+yoJHVb3LilYDZJ8Ao\nRUJwuon/AaPUbKYxHTKS/EYWyPDZpSgd2kn9g77FbPRwLnjWZJfxdwYSDOrB\nzhrJdCcdkVnFFlefGEiVKwI0bkqoi4EW+ux8x8SoCspcTxd7IqhXJdoOIPAC\noeraW3q9KwU9g4Za+apg2jB8VRiWsqVOknyC3P4+2WoKRY3a0DwgoeXXb7kP\nYst2DARPurK8vXNZyoC0RaQx5AY5FtqQUdn95sp44QDxhbb4M45RLghYs3S0\nmwIBF+R7bLybvpqDVZsT+XAUU3nkFWwJDyrvgmvnJEsuMVpwW2RFXBHQbkYW\nDH9Z8mJMe47935QM5OvbUimEUp0UTB59pstSBYVRHzHAnrWJPdd0jqYUp3TD\nT5EizS4z4JnonxgrMRVBQ0iRN0P2peqEz4xZEy4lxmtNFTIb5vyGnZEp4xv1\na6g3\r\n=FMqS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDs9ueSBBhRf+eQ2LGB11theCj79Lj+SoazPV1BaBtq5AiAAjfj+oHcjjslBYWEghBxO8qj8ORB6qPBJauuOFfGkRw=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.9.1-beta.1_1625148337665_0.5405275432449324"},"_hasShrinkwrap":false},"1.11.0-beta.1":{"name":"ecsite-form-builder","version":"1.11.0-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-textarea-autosize":"^7.1.2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"8fcde76782357d3bbf37fc9405593de02fe334fa","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.11.0-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-InFxaB4daqhboeTdPRgkuxHLtp4/5dbhfwI7W4oBSSnYj6qDU/IO0DceJDkHnw0uNW0DY5CLaB3mu/BWdXcLiw==","shasum":"dbef0d48e78335f30388b9eafd35533226791567","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.11.0-beta.1.tgz","fileCount":56,"unpackedSize":1859208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3eD5CRA9TVsSAnZWagAAarwP/3bqRh7CHS0pcQQn9MXV\nkuUA36tbDOqcyO7DNYBLAf7EZ0ShELA/10DfD88JPbBlSv/relHKhd4dZhn6\nTmlyN8E7A5zYewDx8TtkDpI/zVUxaDEeGoHJXecVDxME2XuXv5F2DDmpz2I+\nVM1k4UXB67kJ19UtkrwVmY8i9e0mHoweWNsxo2wKgaa+s0Z4uIaedZuu+hap\nhXX2wXpwj/WFevm1+1nlKCVs2xsLzqLim9dUxbRod21xnsNsbmnZc43XJUNk\n3It/Kc4eflCMwIawCBzbPTpXPEyrHFSKXsx7fpwIgcXk28NFz/nPp+E/a+XD\n1rUOFaPjf2GMrDJtduyM5gaVdPpFdjwBUCgs4m7g3SE/gmRgjPsDgFuv/V28\nb+D4C20sIVSH0ZZ+SZKod4zjYVZoJTRg+WRTROTi86Qwuegx2Lk716YcmGt+\nFuF/1DKC2urNzlOBLaSFMQHxLQytYXS9bar0eP4eGknSicgVAMMJtI2emUmn\nSFro7frh/Vt8f4iHM9qEG0eTP4URJJmJOJD3IPjHp3XZweXmLRA223jXbv3p\nKm3kn8t4iAhmNf21yvSSmlBJxioOH4ksW4+Bc/ocdQWtdVoOBEnmUL7XAbQq\nixhpTOY+x8YtpW1cHBcZSfCXaAkfUa/zQj+TEBgPwBoY3kxPhQQc8Ms0geOE\naI/V\r\n=kF7Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE6pRfqLK0kVYc2YPJmzzDRv7UXnYWbInv1/hKhr5De1AiEA0/fxYZmjxewKmUjWDLaXVSM2kh/mKfs6r/ATorxXgtQ="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.11.0-beta.1_1625153784971_0.1358195676400551"},"_hasShrinkwrap":false},"1.12.0-beta.1":{"name":"ecsite-form-builder","version":"1.12.0-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-textarea-autosize":"^7.1.2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"981ae8e1a2bd3cb18123cd6ac6e20345f1106d3f","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.12.0-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-YxdtzkN35L2zSbFbzCnKNDdtU9uuXH9pX/B0t9esPuRxPO0sMSDBcbdcpO6Gc5jQslwo7jJg6FothteqBcaxMw==","shasum":"9848f4832a3e3a33f0fb09503ae9159aee500062","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.12.0-beta.1.tgz","fileCount":56,"unpackedSize":1859234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3e+gCRA9TVsSAnZWagAAaSsQAJgJ2VHucmxLj5A9Wn7X\nVZoQ8EuXBkrR5o3n5giIsR5Hjb7wsybEidBM7GdyRgEc5r7dD6R7/v0BTvfB\n7ENYWsrSow0Flgp7G/WY7JsqoK7hJcRxuR49xwWLihJ8XKFQ8MiHH656cL4g\nS62S1eTOFiw1YYpxLy92Xz8bayxGfSgMejM5vzPiF2g0NRbYYwo+tbDpcJDj\nS0Bii3NDn3gvfRP0DcGBtvb3NqbBQ3iLolTrVOOKfoAeoN6TQoVvnKKO/oaz\naWzYSK14SQASkcxSMeb9biKhuKvZjZtaTFRzjZYFM+CWBcEaTxai4FMYHPJ6\nckF/aqJzofhg6PUilTUHQS49TJdFnsU/LpejqrF7ZzPqZrH4dMri3T283Dhi\nWWUnZ6tI2zL2X7T4NTWXBphbWqwbzZkFXX/hvjO97kNXmiUqu1ZyyxLHsD2W\nMkreYWXCbLMVBmyqwRWKdYL0v5H35yr0kyVrQQkpSN6g+6IfQBrmApv7Y+o4\nNNxjKdfW2vAHz7HvQ9wx4EtCD22dnXMIyBsXuJACxVM9p4pRM7ukA1PHhGDA\nu6C0crDfeU29wQ0PDkh48kjX2VrVkNdlMf39QCu3mdLvdDAzQkyym72aUp+J\nw3I5QpfPD6U/alVsGAsFpY0kgt6tTv2DMDTQM4BHJLuakhUW0uIVAPmEg+7f\nIygj\r\n=x7cM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF+ucFNlKfDVryVVXyLfMzrqqo/ssG/7qlihhGpQH4WRAiASm6r2s+O+7CeNkxeblcqN6l8fqsA3iHYUvhqhuNq3Zg=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.12.0-beta.1_1625157536174_0.9689989282293705"},"_hasShrinkwrap":false},"1.13.0-beta.1":{"name":"ecsite-form-builder","version":"1.13.0-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"5cc1f0156a14bf118e2a76c263e9a75ebfaa912d","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.13.0-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Bsa8Bl8TRUcf+tH3y/EavQgp2UTjI3bouXEsKSe7HNFxysmCFE52se13JM9MTcKVuo261j9OmYmMOPJbivpo3Q==","shasum":"652a80680637b58ad6c16a2b2d4215204aa57f33","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.13.0-beta.1.tgz","fileCount":59,"unpackedSize":1917075,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg42s8CRA9TVsSAnZWagAAKIMP/3sNsbrt0DxrO17toBOr\n0fmdZoWw8H5AS422M4mM+oPhwGGz+FPFxiPxl3LIEyBI/BhVT601MYCv+sLw\nTr2XknKb6gnwv2Tw9Dp/mt4TkyQA+6w1TzgM+p15+RgoKGJo5FvvprdedwkM\nfbhCke8RcHIRHfmhCH096xOZLy+5pNcI3zpvxAM6DQd6XQqs1h2GCdtIO0ZJ\nSsvLDbcxsdo+ZKzCl9MkwPR0wOhAyYotU9GLsADZR635ImVbjMKlvqnFlwFF\nbamHuwy3/aVLu00I1Uojb+wxUkzj6mrWdBVXDiO7euOM/vTSG2b8bIsQfmWO\nyR0jVBKj0X40klcjTWNdtXPH9yDnDtNuNFQWHTKIqsyVHwsJ+MruT8eeCEKq\nDLrWiUn3m3NinSE5co6zp491+2Siw+KqTGDKT4zp/wIHJXM8IEkvyLQxAuDs\n8wfHoU9ghHWpwc6PX4i6FgzGIP75naUFQMh3/rwMaooSMGy+uimOgZcafnRP\nzo6u8Xu5A8codkUOKn/PEHx0bGnoCSHgeVMTKZsCrmiSvs3YXRITDg8oeiIA\naI/pa3KiBeugkf7UDiX5CUQG+E3JA5VfDj/vWFpvPqW13XMbbsvHi2cMJDyK\nhuTO4iCr4RKJ9+NA28lZaG2ploppRZmEbbBSt5yiplL6D6iy/fwgfdzHeKBz\nF93G\r\n=wIIV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdiPM+6rVIjSy15FPgYi7q3pee2eKMttLCvOMUAc+DEAIgPkxZK6PxLLFvZ0Fc/rjaSbjP5hG/Xba5YF7xjd7EUEw="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.13.0-beta.1_1625516859989_0.47596792163014134"},"_hasShrinkwrap":false},"1.13.1-beta.1":{"name":"ecsite-form-builder","version":"1.13.1-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"5ad3d20dba413ce100a742ed0cbe4797b4733a3f","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.13.1-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-2xzRErxrIdCI6DAqbddh0ieXEQ+v1jDl2FYV6HNFfwQdo506/MURzG9uqs+3phmq/DW4qnkea/dBudBneFAEmA==","shasum":"d943026c3c96bf245d20fb38e442574d0057c9a8","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.13.1-beta.1.tgz","fileCount":59,"unpackedSize":1917041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg43FZCRA9TVsSAnZWagAACL8P/17OfgOZiaN15yWQ0YGo\ny0mp7ZSGMaNwWXUyswS3yhYR4P8njHtfreycEfUBUloGpYn9W7emcWEX5RyM\nIOLuzCFpmofQItU+G2ciQ/yCpOFF39DHIQBijpyDx1UuwvktNTPJAg243WwQ\nB+ERHKZONcHC9ok1TZRrIwU+/zcg/5wEXSwSimDRng4H3BdfOU92tB/GKrlh\n9izHEggdNrqYpfW5IMAyxylVrQk9CTBj5eQrj5iybPI4W9zfhGerGMTzi4O4\nX5ME3PuhwtdwOwOAQQVKRCLJM4Ja5pOkJwuifamo7TqG9hABDrS6MdrjVWe+\nSw230RCCnIp47+gedGppBqGGNubkOmQeFoGvrihbxJd6krTkYkDoU8Q4bAyC\nONAtTU7WdE9yGfE6/kY8mhjdzJy+sVpFv0xGXm+PdTdrmZ3KJbJ6OIDMhvx6\nS2P/6fb+sEeWurI6vXHy4wwVvlYJZdKYvJu/DTKxI+DZlnZhfQAxOW0K/Ewz\nXjfqNd/KQBW2KD2XQoksNPIdKPc5ylXUTpu8PeCTo650HMq0s5oTUyiop/33\nvlfVR5NNK4D3XwtVtfWrnQ6TK3m/QJZquDEmM/S7n4FXCcVG/uF6orn7Dwr6\n1GR7VddpJV22d3F1bh1Vkm7cYAA9ec/nKM1t5LQX+nSiMjehE4DFk7+FOUXR\n4kQi\r\n=hNel\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHrJz8yRcCeLEcRCi4+KMIh2udhdh41nbNd3wM6XnEqhAiEAkGORpaMT+GmxwxOilJOcPr9BQOYJGyHLE/oYZnkKJ40="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.13.1-beta.1_1625518424928_0.9247715439857591"},"_hasShrinkwrap":false},"1.14.0-beta.1":{"name":"ecsite-form-builder","version":"1.14.0-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"4efc96678d831113dc337a638fa89422387a959f","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.14.0-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-b3lE7r+XK3ggeGbsoBzB2kiMSiimfTwnL3k1VIFTvZQsznCKEsq9jGXpWvBvJiGayJMjWymjGi8Wv0lqek7mnA==","shasum":"826b4371be4d4b0ee6ad27c673f6c92ef4ceafe8","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.14.0-beta.1.tgz","fileCount":67,"unpackedSize":2530934,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg6dZ0CRA9TVsSAnZWagAAHWwP/RJTcZFVimqcFR1j7Xzg\nvfX+1WVRH2EK/dDSAWdYaNOiPpA1kOJIXrRSo/9VKbVZR6KmII4L3cNz9cou\nbeQqYiOoL+ZDS3wM302P48Bm7xFrMq3vWeQREqrlBBpxcSoQ0byu4u5hb5XQ\n/yG1N7vdg/g1Nn6Hp1RNyAb9tVQVUikwqWstpBOGt/mqVFrtQEcuP+WrShu3\nGEK6b5LCqSYjdbNZkRPpTJx1RFS0zlaeo94+6pQIJmfWy+JynelliOOxC69S\n1d3i1XjO5Z8m9rLUCUU+TSJoBFW3cCn6OH7iIgLVKCFT9iK0DvNhDBkPON9F\nqvcEbh/pT1Lp1XmdlIp63lji6QwFimRNpU+QSA5h5e3sPy2bA6ww8U+3lyuE\nKhTuWla2CjwELHYnCZmH6zaD5dVnkcsasAYV4sJgSnA6oiVE84E6kJnv0W+a\nzpuSA+VXBn2OWPPxLCh6OyDntXNfhoFy+8ktBdVVYrzSpQRKIUtSFbIvxoPS\n6Nlp3Tgtj9oSHF+ixoOYDQzcuYf6559kQtW1J1uEl35MAseCDm+WbwV/Db7o\nPnoPuiCQsQPjycVw5bz0f6JuVUTSG1E5a/V8/VpzvDKmX1WQw1CaEMHBGSfk\nwsjQHTXtJLBEalxokG3hGC4l1xehtW9rHsu+1E0Pfl58D11lsDMWY5qfpaQv\nLOlA\r\n=pqXR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCpXvKl3YmiLDusWXtj2B9v8zxdSK1OAdB6EERSPRZDaAIhAJpTgxWE7Bvp3usED6/7gvuEaEt3WPbPMiHVuyXxJ4+e"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.14.0-beta.1_1625937523571_0.23483000210368465"},"_hasShrinkwrap":false},"1.15.0-beta.1":{"name":"ecsite-form-builder","version":"1.15.0-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"f78274306267e6ed170e57c7596558adbe2dc54c","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.15.0-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-G9bCMG23DkB6E6tKv+QjxsQXt9MY+ozU1yvY70uuFwv2sOD7AjNFfVIQQk4LYcLcioGcGLOGBAIBSm4dJPD4Ww==","shasum":"f502dc9da7c42b1c7b348aca6e1eb8cfce4257a9","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.15.0-beta.1.tgz","fileCount":67,"unpackedSize":2543857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7TlMCRA9TVsSAnZWagAA7KsQAKP5D50cdO60G2Nq1l90\nWgSQctkqdZ0avZCjbUZXsqUruE5rBTch+IkuJgPeOLktFOlRYYdyq3WiVJpz\nxsTdzeveR65wk794/gLK+x6vSmyM/ypKSNa2sIsTdg2UOOGzVaKANI/417Ow\n43VBIbs5iYCDHcbsb5/Omf65hctsWRwEtQRJpzqzmP08VSa2dZxWkjVix4p1\nWcxdXdmHPtyGP5GNP+jj8qD+/jv+CfmHDcf3vIWF8dNH7T+GrhF2JkP8+lpt\nREJR755mFOkxkk+wptlwrlqZQNIPk80waxQw4hZlOUozh1f0Qc+QeVF8Ynw0\nLdrY7vYZqPBzsvJV9UHtFXJBKHyZmv3Bju1qBtUXWoYGo0q/P/caIWDY5WMs\nAAHLuRH57ZIba9yuelaIetezzXtpxsizRVtbKl9EhCswL8XR2C49OS07twTx\nzC2+4MibRdM5GB992D2GpStBYI44hwAtTN8OP7xEF0k4p1sRDp+lgsng2SOx\na0aC7N86u7Rpn6yeF3PPG2V+VNRpqR6utWaxUMZNBRQ4rB/+HtjJKy3fq0bg\nnDPnZtVWBI8sl4Skzoq3zResmrRaZFFcY0nJGheGOKgB3jOMDXL7D/zBc2A6\nYxtlQ1j61angH6/2BpHqJoQA3+RP1wvmhpx/S2lRVU9OdKLaQjxYrxgIisnt\nM9Tl\r\n=VhPh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICUSeFeX0FDu8e9WeK0GuJ37tgmupFnZEBjxUXlhYVEqAiAaBXSNERJmoBixG3dqwUTVePpKfUs8jy6jSffS3NBCVw=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.15.0-beta.1_1626159435421_0.7151235076215445"},"_hasShrinkwrap":false},"1.16.0-beta.1":{"name":"ecsite-form-builder","version":"1.16.0-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"3dc8d7f49ccc73cc00b4f8e6fe1fd76cbda2a9da","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.16.0-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-k0VM13mXe5wcNR/UawcAaPa84FO3pq6ecIL38YhO3jtVl4S5G2zGrnS5aMTAJtr0udBt1U54OYi2edx3Lemb/Q==","shasum":"60f0074924740548bd08e9a30b2806cfffe22300","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.16.0-beta.1.tgz","fileCount":67,"unpackedSize":2544951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7Y1sCRA9TVsSAnZWagAAskkP/ibWeCqbA7TEqXoWjUMO\nPQilLdyghKWEacD7Gpop4OMazHl0Tp6E9PmXIV6NS/1EzR3MHBdzV92IqlAG\nIRAIsTUl+bgQ/Ai8Qb1j/B+8V2YMIlVK6/xa/1Eq3FdALPPGDN4+i6FeUOBk\nVmSlwthqyTeJBKhjU6Zv6MH6ZF2RCM+8IGI5H5JyQ+3mT66FQ6ZZqrwjYdqu\nchLOFdui4gy9xQy/xXqn25T/M3I6Wos7FaQT4ib6gvGf7Tgqu8NtKgIvUKRY\nSavkBaJl5VxB8uc62YBT8MOp1FyF8r89Eq+/2Zk4yDmJvzH1KOpofbGZ4GOI\nRAiySromBU7LCh+FQTtho5FPXRQLmWDmk0gGsIcyJE3SoA1F0z7xEM5e3ZCI\nYDqg9MTEjaO/TKil8LtM6IEdCHE93h91Xsv8RfOjALzdX7D6bqIaz9Z8Ul7w\nCV5HwTPaw+QNstOsP0VYSZqQhVw6/3fbvpYhV0IOkU4Dx5CEClNZTF/PxiTi\n8U4xwCsLpCYDQ1aeUAvrxgVZ3LYhRQfDZEXCI1Sju3Cic4n57iVasSpFHRIb\n3xrcVmcdtZ74tVr/U7xFuVkg3YClSjD/XsLHK6dFe7bJL5Qr9W5t/oIXAow1\nEju+8WsNl+go1hsKL4YiQgzNvLbFbLyqoxISVkuh7rsujPmIfFzztu0xYM/y\nK8oV\r\n=LWww\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBOAja+sDlDbPaO1pMP0F3CSmErgKUIgktwemaPvcv1vAiB9X8TUAmxCqdqzT7483bMvpAS3VVpOVaVyA1rWLsXZYw=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.16.0-beta.1_1626180971772_0.21916419760005046"},"_hasShrinkwrap":false},"1.17.0-beta.1":{"name":"ecsite-form-builder","version":"1.17.0-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"0af04f1d78156191fe578036f3ce528ff4f0c48d","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.17.0-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-qqHeFOnC4uCiQPqczOB13tug1WheImgMr/YXddARp19w9gJ7zxvBfWeVghMU3QRSb6yqv7MvIR8kjGtRYZceEA==","shasum":"4db4cdedf3eb6345d486c1eca0924bedef56f5c6","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.17.0-beta.1.tgz","fileCount":67,"unpackedSize":2544949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7tOPCRA9TVsSAnZWagAAnuYP/jM4ClnE2gbQYueUCspI\n7sZNFRTlMvrnTe6FXsMh2Edu8AjKWW5ne2zNuC6pPaerHkC8BoWHrAD6WHGz\nojMFgIjp6Vb4BIB/RVbBvtTFD18HIF2fCPHI1SlytU+cRbTVnrwk0iGb8wNp\n52eOUIxa3F3ubGAJ0RaWsCI4YH+4/UCUqSXZDUARKiOHurg1e4Yw2fmOGGpg\n1KItKMGs43Sl0jlgwGUhaMenOeV204mbQjAtaRulWNVx+CIP0UhDyD80bhqJ\njGbRZA6m4kVj+T+LSNFtmBxZ8dSJdk7KZ5Z/W7auoVZMbtelp+x2jSAiCYEG\nDwbUwW4PoORMAC7nVC87AYcatkcXMAEAZHrdQtT9JRHfFKU8ZDJA3wIGXZle\ni6mpogih5ZEZvcAjqNY2TlmRtZFoJgP+MQE12hUW/CCYxII+FuYL3RM+OVcg\nTcYWK7EEFAde528cPe9k5xEoqZ8HdrQwi/CYs2jdT+FbGqe9wTomjuQVuRZW\n10Orxytj60X2B4NtFSKh+kTHVOhBnyfx6qUKE8r2oNWtUFV9R7wpwrbdRzeK\nXYzajDziomgWK7Ys+qf7tLhP1uWGfX24WOVEZ24ozCmHQLGzCAc3ng16O0cl\ntQdAbB0fEE5OgWBGzduR/BM5KOxcORXY9/+A+qf1QG1ATqtYuwrzUlCu1q79\nwyvm\r\n=rNqN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBrqToEGmMDSgje4oNMCe53Ggt+NaNCseAgrLy9MbEJkAiAKW1eHvk+kwe6OiHWZAssljDfbkb9HwK7FPbLqKNB7gg=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.17.0-beta.1_1626264462779_0.2950753446656691"},"_hasShrinkwrap":false},"1.18.0-beta.1":{"name":"ecsite-form-builder","version":"1.18.0-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"75082766c1bf145cb08d13921ce6ebdd3f2eb1ce","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.18.0-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-eAbQXCdd/km+/3dPLGf7N61i42xOGs045fI2JiHKA++ym1GUEoVxQun5D+d1IOSI+c0up5kWGWj+IYGqfPYHqg==","shasum":"42504c615ec00997b4156d13bae502765bc606ea","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.18.0-beta.1.tgz","fileCount":67,"unpackedSize":2544955,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7uElCRA9TVsSAnZWagAA+UUP/RqkG2p8OS65naruOiKC\nrxaFmQccJD8+4FzQoYux9EIe22foEFZbUGZNP4a3s/nSSRtFGCZe/SOe2Q+0\noeEDfenOLs+AmWlg/zG/au8ci41K2Fvm4902blIESmkFYC8BzJ+hvKryuyX5\nFwli2G77/x+8PxEJxWOnG10gnpXcDdn9xcNFnL4nkuDSwjZplrDmlKJwj0Xu\nTK2VNysR9SdGQM3Weplud1JKucdfXAyhdpe1prXXUVOXLO8UxusHXjSdN3za\nnpKdau7AsSq7yIW/maUAkc12GgDKp6hkR5z5OKFrnW6zqETePr1NezdUnG0E\ndkjIcqze8XcMWmCjFfhmYFkhux1VbylhoVrsQ9k0CNox9l+qwgiX8ugsl56z\nNlFZcYDcJbn+fYvj0/3XsWGPQAVcLfIspkPBxHmjWtNdTqmF+2O1YZGoSaG+\n3QhEhrBeXid+40AQ93B0ee3Yv/9OAatGkR4MH1Taj/sNoDuVl8vJJwd1eqhk\nh7vvFW0J+MoN/l2Zozz+aQQ09+F1VujBQ9oQKuX8TpMPjIYYYrNP1p1QOeDQ\n2OKLJ0XYy3yCr3WlIUE/HeiCLXoA0P0/xbP8fcV0n1VbA5vv6kHUvClcwmjx\n8ado9W9PZVTRKPFdMAGL8Q0l93zix4iYlDfzwZSQmVUtnbyQdwgIpbLabFTQ\nQsFx\r\n=KGZO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICDf41sXMmMRdrzy9FNoelkRr+yYVlCPnGT+o+CVpt2yAiEA2GO7MW2uEkl/lI/U7R1c+nEBzHlrk0DnLBfE0enrgiI="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.18.0-beta.1_1626267940866_0.8512618169238029"},"_hasShrinkwrap":false},"1.19.0-beta.1":{"name":"ecsite-form-builder","version":"1.19.0-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"425eea8b3899d122a3755270d3b83bdf7aa55c20","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.19.0-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-pV+cU8ut+hsM47m5IMkryDf3QYCuQJM1hoNeG6i7HZHOxtLwP7CsAs3TqY15w0M54sBmA1IZr2tnxlodfWChUA==","shasum":"bdd6bbd74d3848136fa2c86f25eb46bc5577ef6f","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.19.0-beta.1.tgz","fileCount":67,"unpackedSize":2544983,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7xtcCRA9TVsSAnZWagAALaoP/2DNcDhqx/jTRbsDmd54\n9cra9rorpwGOS21CRxKOG8WmVByFHC8VPbqWSv1tV/P0AfZnqhubX+DPSOmg\nvSeN3NEfAUKA44DAmy1joLhIYHbiVYbSf8tKkZYhrQYh8SCRaX9Jn7dB5nPr\nI9K5Y+gdsihCVzIBJBwgf35R5tJpOYBrwG3cyjOyPolDHp/ZowrR0cZiR0uV\nQAaprvqBWkMw2NfdT90EVq4Mg7kaekt6kh2KhLoOUUYZjpN/Mr6hB6N1fzdu\nGVcrZQIqlUBFSzuq4eN9SEbc03eyE0ShOQCpGyPSt/W17KkHf7gPPfL9W7zv\nUAjD26nTMoSfgcx4KUmd9f3tQ25a53XzxfvEu6nAYN1LODd1+aKwUvqspxMv\nRQEOq6tRTx4otPres2ana3aH++Q/s5wm89cOxXT4P8wphzKvkWVHScxx0sEs\n7qmfBGxOqwLBp1v0zGH4J0zvK+0fB42/24eCZx86B9V3tm+rVH7oymv2KTiu\nzCKsuu7qwfxeDXgd1Yzg2PQxhbixxh6Yv4BElNvBqpv6nfDG9wiCr+XNVHlX\ndmKEORkTDldVD6+wkDQ+i0XYV6wr7vgSht8ZkVlReZ3SdwLs+QiP22RiZAnl\nzEgP3fKUT78W0G5vh/HAAK+KL6cLFY4AEaS+Z6swnjQnuxuR1DpKt2KL1Bkf\n+2bz\r\n=q9Ah\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbGpE2DbiWXFDOuN1F/MkC0FsHvZ6l4hOn1kMJCu1qsQIhALmepQT6X7MwNEGY5inUFTTK5+YXeKVDfsUjsj/QCzwD"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.19.0-beta.1_1626282843179_0.9982270708424106"},"_hasShrinkwrap":false},"1.20.0-beta.1":{"name":"ecsite-form-builder","version":"1.20.0-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"e5b072e6197aa75b31b74de91517e88cc8799d47","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.20.0-beta.1","_nodeVersion":"12.18.3","_npmVersion":"6.14.8","dist":{"integrity":"sha512-yCdcCdk6hDcEMiaeCoCLbLZ9J3WiRi+4v8JqemA8rdtgbZ2pRrS65B7c6HtTyJJ0c51Qsd9phH5vCQkd589g/Q==","shasum":"fb61fdd83aa025280563bed7850f8172941977e3","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.20.0-beta.1.tgz","fileCount":69,"unpackedSize":2567555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8BliCRA9TVsSAnZWagAAf6oQAJCaApcw6BqkvqYMalik\nPst/zpKeWrXBXtGYIHqA77HdLCPIFEUkSQc0nzlgppub2ApJyOiAqFo3grzw\ntyAcSiK0BjXcOhOW6C5ZAyZExgOuFGbql6e2ytUHIEX1Ni4nu0JbgthZNsLN\n+HXiDlx+Q978fYFHi7EXCCX9SxM9n8o6zgvo1ER6yj3untQC/xVeia8jjCM9\ndJgl1fhztkWw4FvamXbkhEOHWyZZ2hCiYHsNL3ANjpvhD2PBwK9WdM3QcFIW\nrntPtFCPa6sg9mW5NctEYajYKm8a8u1R3zVlnS9ohb4e8l9S4nEZkBBwfbaS\nSKgQ68aDcZ4fqkdrleY1n0SXEF6IqpTb7TopOD4Qc8BhyguTniMZE46dsauF\nG/PirflYz6wpX3F95XJMufy06OOG7a4qqaZwQyG2ejViRV8MmcXdfBqeU320\ngjfm+7+ql7ryo36ffKFyi6jiHNIxBesogZ0gLqOsHA8LPch81b4DbyRRe+K1\nNmK/1ngoBg770q4yS8SGk/e4+ecHwwB2nw4GSCAZNM47ftePUUFzSCeT2Scy\nPu8oRI7TX4eb7DF4sJxkjjbXVO/s9r4UY2Lv2awV2Lr77jpYnAQf9h4Z657n\n8TT4YEnjPZz5W5d/jQnmQQw1HMVTtHEj2L2tD/cJbNiFqJPysiJ7LbJ/HPNw\npSjg\r\n=zPx1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID9RBrpJnIjhBcd7nAZFAVEXBFcEIY41GHXXVy14EXm1AiAELjLoyvl8xapZkbj04bc9gsYXjtalwhMTCL8fRhYWqA=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.20.0-beta.1_1626347873688_0.528410803597045"},"_hasShrinkwrap":false},"1.21.0-beta.1":{"name":"ecsite-form-builder","version":"1.21.0-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.11.4","@material-ui/icons":"^4.11.2","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"5e49570ccfc35aca75a40dfa5dc8ddfcab854ef9","bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","_id":"ecsite-form-builder@1.21.0-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-osMESRsyfuAxlgPvRir59Pqt32aOnO2XpriwP7r05XNbWhblvbqPXyjDK15JMq5KxTlVo3uT5QCJoq8FnL9vuw==","shasum":"2d960c82069074762f84006f389edcfebaf3517b","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.21.0-beta.1.tgz","fileCount":71,"unpackedSize":2698499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+6H3CRA9TVsSAnZWagAAvokP/jBeb7C6on3m43OpULfc\n4uES+A1ugqadR9043gpVdsrx75lsvUPIcJZkMBjmMhMTyTRcQIwHmfpMkpdm\n6Ldn6v550q5MReNKljCaNH3sLX/jezbF4RoybnecYphP6IdKkDW2t1hyo9on\n7JCRw2tbqyVKqQoE5YVrspxFtIYolML8TE/eXO36kQVAHLrvpOhNZbfn+sNt\nvGiyHdo54WHnX5rG40gmwsgQyojAPqvU2mgpmMOYiJiUJh5OdQUN7NyWFNT5\nCD9JPpabUWD1EihN0Po2AlWN/6mbludyGFuMSLl7n1d3pSpEFv8Ald7TuKRK\njAF9TY/Fq2ZlAZoO5XTaCk9dzbsrqV/ieb0gX9TNS3fBh0tvz2rXOq3k4Uub\nP+Nxk8VpEnGtFnGA6XpdaoQyMWD8zEDvJT+jHMMehDbSaV8lFKJErakSUBeO\n2ykvU8FL2SpVTUyo3UBQgkBPORVT7wbrpahPTJEWjN0HG2DwZpgas6smmAIU\nXn8bGITKHhUz2AapyATENA4V3mBiiL8PBP76E2l4E+1/u/gE8U5grtZ4CClE\nNdhWxpa6wolMcRq/5BCJN1KudG7owZluwtEzfHfC+L/owwS8rRgJcihH1N3u\nq7RDLTnFLmpZbDjFNR4aErIzeVb6BQRUZCq86ik3WFnukZe3DH+gqbN3Yyky\n4Q6c\r\n=EJL0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6gYyVJwy+pAhzoIZNnzP4vTatKp7jg/e4B+86JcIaugIgISyMledetMKQrwB+7R7F0AYjDj8owZ/BZBJ4N3Te/ms="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"directories":{},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.21.0-beta.1_1627103734842_0.6353899266887648"},"_hasShrinkwrap":false},"1.22.0-beta.1":{"name":"ecsite-form-builder","version":"1.22.0-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"415394cd407f32ae0f80887cbc41c60cbce0be21","_id":"ecsite-form-builder@1.22.0-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-nzL2g9K62/MYdQ2ieSXdZ4VAYndJUQwgynwY2g5z07iI+LxiPSy09yNnq5xjEBMVW8DhO0MEPF6fixOXEjz9cA==","shasum":"379b38ad6f2f0f53287aa61c14a24ed5f4a03d57","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.22.0-beta.1.tgz","fileCount":73,"unpackedSize":2761033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhASfvCRA9TVsSAnZWagAAAOsQAKKRz29K/KgeenMZiYlK\nMnorJWW271iNZHy3IWDR5BU/DlESfRN5smnRMSTHzAAazIWypwVdL/16sP70\nXo4frp3X0prlwxUekbb4I3p1nng6ulJNRpQcUcYVWyLZa2cZ9jz4uVtzcjMW\nJzODMAuOHjl5YqIhVrqvnLK2zqWfDPDQlWVwLYmE9aNhADpMDA9gmpTaXoDZ\nf3hLJ33dWuwVhmRECJ5zWLi4+YtnKAcRlqmztXrukGv/H657AcufExB5gvkB\nAIWMTZS3Ax5izqIiljwyagfHambwvDHWh0RA0j80WgtLUpEsagMQIa/f5B0G\nczsMgwWvsoQid5E2GibK12rUq53QUATErHBweXmtXUuiqGcGQoqY4Mppid2/\n9Xi+IaVbmk/Lu8YNNZXRXrw+BRK8Gz4+3H7Va5Wb2TKE24M54VR1Q9KBo0mN\n5NDqq6dVAi/ziNNYch/aprk15QllYXjqdQHNHGnk1DUb9kLEpF17EvICAjSw\nFQlNMdXnCUdwJtNxURwwlkVBnbxLWrNueR1R+A9mYL+GRlmCPGKpYqt6i3iw\nGVRsGMrYCQBAtOPK94kk/yJ3jqp6zuoMqyCLF51e9cP1g7xI8HukAumCuAzR\nLqFnGejY8LtammAIz6gWXNGHhUpPwoACp+jQKmSNEP2wbtDGOCAQvC6rUkfY\nDm9B\r\n=05lO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9PJG6JBQvaNXyRHBG9yAi9vdLP6m/IN/H7rBPWgWshQIgQtaxypZJrpHmGxT3qn07CN0VOmpirvy5rhBl4n8UyNQ="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.22.0-beta.1_1627465710845_0.12903995089912912"},"_hasShrinkwrap":false},"1.23.0-beta.1":{"name":"ecsite-form-builder","version":"1.23.0-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"f7601eb5c5b835b51db89a1ade24edf39ac00df5","_id":"ecsite-form-builder@1.23.0-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-FMT9Yp3UAUxNStOna1h0488wFjDeaeOcNG+yBMqHxKcC3OXJ8yTQVa1FtA4Z9uxQm5Kt8KXd0MGY6bT3enmm4A==","shasum":"941add746c97e583aec343072ccbb18f8912472a","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-1.23.0-beta.1.tgz","fileCount":75,"unpackedSize":2789530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAX4fCRA9TVsSAnZWagAAgmQQAIg/Tsz+egof+eLaIW6i\nESvEJ0hBq1/hCAADV7tVfzVCZBwYmdyzO3dN6VVEJ+hErQXNCFgXMLa310+L\nNITm/LB09Iq9aqAIUdEa6x/LlM4h56d97HdWfuZSnDQIoyxxJ37VZdQM4NmZ\ns952s0xEUOX/8sZp1BqIwqkyyGbshDd5xaJOi8TxbByjKdbYTLzSd12a+Ane\ntWE4vBk7db+LCO++lNHmngla21P+dTOdNBNs/+VMMyCf+cBc1/QHLj10VxmP\nJD3tG5AKUq36hyfdn0RC/T2mj38uEqVb2IWLaXpt9OzjePOs8H2qKTdkg8vL\nWulehs8A5t0CcNFtam/2z/Ssa04EbgvvXihjFtJARdgIHU94D03Kr5QVez6S\nZTiCPRIgxxo/n9qLWwfUOD2IWtXzOiC/myWurLq2ZjoGwiIyr8dkXgcDxZdO\nwpgpFTSWRrfh8TDCR7UxRv3B7FUKdvruSUQ2iTpKiExKmMTE6P9KEhS28c0H\n//D8cvfVt/5xFMQOZN3hgBQYJ9SY76SbMOyYOmkppi17X7PHTfo7FePqlEdi\nusC8WxIcWAUF29GyZQtX7mVcmUiMUpfR1ESE0TLzvyNGELlt7cjqkkELop1c\nRKN+sKRSkKYtk7lqSHezV7l+vT+5YR8PQepTv0q0nUVgvYxQlEYz5W3v/U2K\nK+e7\r\n=OwJJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8QsCAQ7ZF58ZybVkDMeyKGAU9ppAwjDMGsFSiEALhHAIhAIvcbSdTVGZsmTzYhoQhMgFimJMrL0AacuwsuMmvyY8Z"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_1.23.0-beta.1_1627487774794_0.6721262758665103"},"_hasShrinkwrap":false},"2.0.0-beta.1":{"name":"ecsite-form-builder","version":"2.0.0-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"c0a015849f61278458034ff3d7c90f64090c3365","_id":"ecsite-form-builder@2.0.0-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-CdI9nDy+7Y4JzWK3g+41QfSGA5GWqgQYsMMUMN16dTmNnT57ymGm4dbIlnq82urqQUOdgjr12x6QplyO0ZgIdw==","shasum":"12a051b23966fa0fcbd6f883add7a1d1cbb12678","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.0-beta.1.tgz","fileCount":76,"unpackedSize":2827287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAgTVCRA9TVsSAnZWagAAw1QQAIGb93lYlqowlHuf/z7D\nsOoslcZfNbeB7tofGaztPSIsmVsysP2lZBXogl16lvRzfPVArCcSpIONqsHA\n4OVB4a2V2+YkgHJeyp0WO+3VwnJhsNEoHAGDSkJfMVH3mL54UEoevA/oPz18\njUbg3DegzFkOsoTarGym+udEdQGNFl2i92JXyxiA8OQkGF7aXgpfqjmeMN+b\nXWglCUahaoErIdVPAL7yN/WUvlu1nXZVXUYWQBhM8R+eyxSq/gW6N4WovRe4\nEMKbaCT67gjJFvA1sfuNVGJX7ExOrpGIrq/APAhtosHKuhnBhpcERneKi/PZ\nPd0Le4gRWl0OcIK3cDXThHjIFjVs/HCXbppqNq/wu48c/qTqcKPcPRLXDTEc\nsRpYisQumnLknUvqWbaEQIQAuAAdy6Xoshk3xsKA1H1gVHS0L3/QuB9wF/0V\nIvcKLFmpN0e5dQYQpEc+h5zlV2swU7TS7ZodNDdkwfyhCFGVECrjcupgeq9P\nCdOHilrHWFBhhn8J4wY2Egp56sXQbBrnPF4OkOuPf95PA2KK8Dg4ijFcFq0E\nXPussyOPskatdIGmrE7nDiJC4T9rk2nWpGsD+OxwOHPd6WHhNiO2AcC0x7f/\nv7Ok7J/e+QcxDFNNjDYoh+6d+uXjpsiKHZT9cQ03JV/VpxMWGIv+eio6KJHJ\nJJJE\r\n=QONd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlJN3hELlAwHfVjrVmcYGtgTMX1InCwClx+XisG3wM1wIhALNupp57dVEINV3/vSpMeev07HrokFT4g2X+wmxBpXCW"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.0-beta.1_1627522261622_0.29547707500732323"},"_hasShrinkwrap":false},"2.0.1-beta.1":{"name":"ecsite-form-builder","version":"2.0.1-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"0a4e3c972e34bbb06ffa53f67449c7a95d0420d1","_id":"ecsite-form-builder@2.0.1-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-ISn9hka16lWcVzGiXtKzxXg69561b10Uo+acZzUJNNQPB6OGjC1ghBchiniNFdCbD2ImttYklxTLQZw91jPLWw==","shasum":"7878fb554984fed9c6f11d7e74fe8d7305d2412b","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.1-beta.1.tgz","fileCount":76,"unpackedSize":2827568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAoUWCRA9TVsSAnZWagAAOaYP/11SX4l+lIY8SX2LUWRK\nEgeFshrnISy+2vg13bgmmd+86iFXErvn4DoBh3UiEQxYrgmHLBMov37M4h4I\nONQK+F2YYJwT3j1T/DrJjsZACb/CYbhDy3MlfmqaBp0FJk1ANL3kmCO2hhiq\noGfceERDYuGH/CBsb8m4JvgdOcu5lcPV4/WEN9WygxGP7iPZyHN0+w0rVZJI\n0c7+gCI/5qbOkOoyCHRZWIP8ehDbgRnOeCUcZPtIij90YYuJd/MkJFtfmm0L\nV/HtJmvUAqXsy7KU1kK9ovgJOI4YCTIN9fVVL8ngx0MN7q7XUgGY1ociduhX\ngxXvTVCzaPBGoXyUaIWfYu0VtMFEg+fQMKmEiHx4/EcJZWs8yRZ1zhPeStrC\nEjbf/3Jim4yi7k9HlT00MtW1GUED2WGJLVI6Ucjul7B2tEIQsXorOHSo0hyR\nMk/8Q4CIpBqWToBEzl7BglMcaHnYCOSQdj92KW/cF44wlaSWilEIlBh7xgeN\nTkbNuRqhv0JLDoUJi9ZmjAVNM+zKPYjak1EPXaL0zDIczPPMhQXlRfLo86o3\nyEt6n+a8DcVuSAVwS5JPcvxJzAjB3t8madJMULOGw+jRjfTSdhpO6QDhMkCY\nftIFvFJwJaR1zdjPLa7QpZezpszXH0R9Xs9+dFKdts8OUdQk9BEHVdBOGAaY\nlmQt\r\n=MYfY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGaqFtLnlPkv+kI/1QqtgfFv+9u5S2XxUgQ0qKAoaUCxAiAhOwRgBu3Evk3hulHAZ1+/oBO4mfYxo2/e6YrTab8Fig=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.1-beta.1_1627555093935_0.9349867629323649"},"_hasShrinkwrap":false},"2.0.2-beta.1":{"name":"ecsite-form-builder","version":"2.0.2-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"f23d8a2d96152e0bef2c884f51cc404c3462dd62","_id":"ecsite-form-builder@2.0.2-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Za9O0thuZZSUFba7w5JUFFjkHc4dm8/MYjsJ2ANHVk22IzR8cQwreMefP/rfZiw85zI1tL8CqDu1NjUAv8iaEQ==","shasum":"c24f6cdc7ff817b9de262b9c0a361c0af08ff52d","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.2-beta.1.tgz","fileCount":76,"unpackedSize":2834825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhA263CRA9TVsSAnZWagAAMEAQAKIRVrsuu4bQ4O2S/Ijf\ncSe3zL1xLfcvDwSKILqcVy/xR+1huV9wmul2rJJMW0kOZrMiRl2ZqE4eXmlF\nY9IqKAODBTMeRWfQoVK5WFRA+tniqM5Re6f7lXAnBztbQErmoWZV02YgDR6L\nx/6USPDAphoHahMNQ6NU+rPATIW1zDQMg4mg8/a/BQgmnH+vzbAa74eSzD0j\n8j4XDSXfoA5OSCHl84LHzZymwxjYVKnkQBzIksuD0M3IhD+oK5n0OzgZ15aM\nB8i8qSyUQu/XI3WE49omtxw3yD5sQzUKA1uvuPAu8vCel9rr+Rsj3+LhTLGh\nm96P3wGGxq9wDLRn6XWwg3GBJwWUsyt5ph9Mu9WtU2h/igCIz9YaYyEgpFzd\ngny4jXSAQ8HoXoW5Cp6kZqGzOAGWWEWg3D6kAj56he1Y9/Xgys2rjH+wbLgU\n8x42J7uDph1oQ329xGxoSBiXCmMfy7hCa3tICze+9L1G9idAqa38FJR6A4td\n+unCuMJCcJAmMSnQ/Hht0EDj8XCjnN7kFwUwvk2fOoHH/hVpmBzdhqdseTzQ\n5KL7JUYph8CVqz9x6062k86otslO1+OA7LDStix2XAyczsXprm5BqvMa+U8O\nKdo/kX1FwrWofSMsCOcHwdxAKVUCXvVP/l/FhAwrrw1YaA+b/3Hy3mFkHZwg\nr9Vk\r\n=lzDN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKzIAw808TFR9KhJCJCv+UQUf8xRjoZGC0MywbqxoGeQIhAK++j7Av0p+HFTq0wznNBUwtIce+36FHdJUB6QCbim0p"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.2-beta.1_1627614903237_0.9654825567467484"},"_hasShrinkwrap":false},"2.0.3-beta.1":{"name":"ecsite-form-builder","version":"2.0.3-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"e5809051dc0444c72d373e4e505f5e1c7103506a","_id":"ecsite-form-builder@2.0.3-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-swGUfaJf6TMdqE6z5V69VmAmq7xXf/PpIXbeVZG9awxTJ1HAXfDniajWdjCDT3V9jfT3MAhVNrrcqrd53fDp3g==","shasum":"ad1f4d55c337838c8efd8e69f432275caff2f3ee","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.3-beta.1.tgz","fileCount":76,"unpackedSize":2943810,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhB1tfCRA9TVsSAnZWagAAW3EP/0gzx3hJEXpNPCjahiKt\nz4toZbIEb9e3fScut01v606LjMw/lLTOEkVoXhs1gsUP2qlmAvPjTl+Zhi2E\ntOEj/St8010m+IEOO5bdCMDsP6dAL0LJUjIn+wZBvYuk9qM2UuNZg4fEy9l4\nykMqMzlOUqtbfF0wEZqDJ6DTVNTffT4F58NoZDcCFGEhZIpCX6m+MYbTkCbE\nX7pS+r9UjW76tBbHyuy0b6iAbFbRDEFHVtE/v/jhYAX5fyiwoKOHgiZuxPXJ\nwAD46AlIcxn8bbzXc+bCfjgzGqRF2WEiHv2ntcz1XOn3r/e38K98h0OMXiRd\nPKSY4rlVG9o0lqiPZRIBimfaH5K0fWAnixKgIz0nQ+dg7j5ovpZnAJbd2Kwf\nPuhUpR8z2HGrJU1TCH/MJutfaJEnpII2VCmJVZAUvwEG4+yJrLT1rMsCV1vY\nPHAeiLD2qC7N3GnE19vT+mD7mlgunQAY8IG84vaIj25IqtyKGwgEvET5kYlx\nyN0T1HogActhQjZHM/wMoeybGJL0yDe8BnUMDPF+jELXiMXqawHlB4kkja/s\nPZ8MQ/GSjH7MPV8uUNBGehDa4sC216CPoZq6xv+XYgj2UAhlQEKzfuwCJLNh\nALI01QoTAsXyMPUNu+ebc6rOGMxq8dVyrZhiQMCsKv33DohIEgFUBd4Hm62d\nSGmO\r\n=4Yk6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJER8Kd2xx+dSuSc314GzTTalTERorQI/kzk961WjBgwIhAMudW8mSpuKSULfdb1ZquVUv8DL3RPGtcmF8Ds6pGfQ6"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.3-beta.1_1627872095766_0.3789887807794454"},"_hasShrinkwrap":false},"2.0.4-beta.1":{"name":"ecsite-form-builder","version":"2.0.4-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"fbdf5103cdf3b89089fe45afd3de90ab0219b140","_id":"ecsite-form-builder@2.0.4-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-fMz4O6N5Jh380W40ZCwN1XgBwERIc8vP0wPDin/f/0q8mn6YEcGiPh5givnb0fTVeQ1c89znKMp2UYP9fKFdGQ==","shasum":"29c9c77b53d76b62ff6fd0accad3fcfcae9a6121","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.4-beta.1.tgz","fileCount":76,"unpackedSize":2944836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCKxyCRA9TVsSAnZWagAAqyQP/RDdcZ7sySrQokfRSa00\nLnlnHSG5A2AJlqosLlOO/wTluTZ4UfJFbgrNLKRgIDisLrrNSWS6r0YhS+cP\nbhJ4U8mWewxeqtww+FysScXIEx5/cP0QxRT8/HVvaKM8vcMusX2zGqMjRLrZ\n/kWmCuMfktiSXtxijMKZfg/3TrUWwA8Mor47VRJKqHIi2zwMwqSGsgnHg8NC\nsFybg8gV5x21Gxwykn4aTBJjjDhyXihtV1JDQa0H2OIbNEK2P45kKdeFa9JJ\nj4Cf/rny3gYWLOu/GjQKkStnYlIyZjw3pmDLERtjGn/qM0NgXQU6E4aDC2T+\n+HmDCuf660zABxEg7tz9lzjCQLS/vSBqQ6KiOmU1qIYStMQt55PrNqen46ju\nUROqKsQcMYHH2wIHQm5iTOE18VsYGGi1uu8S+2ShTe9q4IXtIwJPBy/RlqNd\ntF+ibku7VMj77XwHZH931jFRuXWG+S+1EsrWlmrXK+i+YvQQOAHo1HqAo9YR\nlk5X7Qcst8W6c07CcNrdo3zDtlO3bS/hI4yNPX/RHkJnCZZt4b+GDvdZl7Ks\nydl6PGET7foiRuwJqQb/go1YhKufWZzC+3ruY8+dl/LAOFkG/PaPD0H/R1L8\nKjvRNDKbmyz0nhKoRnjksapELKW2fYuRVPjoERwyKpkKfKy6mqcODWxo4gpJ\nCpCL\r\n=tKOE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmpb3tUSkWzkG9FSfahb4NRi9Rb/j+ZnVHSORUBi/8kgIhAN8i4STQyA79CkByZnfNi2SWTfhR609oAEt9vQAtm39u"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.4-beta.1_1627958386020_0.2878227685865853"},"_hasShrinkwrap":false},"2.0.5-beta.1":{"name":"ecsite-form-builder","version":"2.0.5-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"72e32313f396f7a39eb179ba0b77e1361800b189","_id":"ecsite-form-builder@2.0.5-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-py5P8lzHneMPJZyDFjFrrgiDitUaRaaRlIZYp4b/3hH+7Tf71Y/CLe45Tof5S+puS/5FA4WuDRu/x+mTJsXoSw==","shasum":"aed253f01ae87ffe51db29bd40298f296812d57e","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.5-beta.1.tgz","fileCount":79,"unpackedSize":2994864,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCoV+CRA9TVsSAnZWagAAuWsQAIUqrzWa5+z7S5YXcQxZ\nnbv2N22jqUqxlaPasj9GXPz4i98HTwJu7/dds0NjVhlsG3V4EyUqcEzNUM1W\n3h11oRV+KCvzBavHLdFbwkEpLnp3tRwrl2gKJ2jvz2JGfnfVK+Rt5anByoLQ\nqY5GvyyBn2OnlNyVW48KgHpLfmiH0D9J86+pWgWEY4ba3Hj+MWzEaPtUMq9c\nW1i8OGW6m3WSwxdOGa2qNJf6rl6k9uKXSfbhqNzQ6H9J5N+U2dVmjqi4BiID\npSFmtfg8RZyT6NzBHtFqH5GhaK0yMl3xqgCda4NIigzjeiywyYii2ALVY3Me\nFvgOAeusWCmLKbGjGSRIKutLThHijEuR1xnlUwA6xeHIImn2/b52nWKz2wX9\naTPo/TIP1y7XiBKZg6YXDyNEo6QjWQ2AoELjriw8wPv1IIIj/bJf1XF/LKMr\nT8zYWOqWhfoSfMXUuDU8f63psTaACZuVvoYb97cHtwjUhb6xB1f2I2lX1ZYE\nJtSwE+WCL71a0K6alh4AoBQK8nBIhre3OnuHrpcdG9min+nlJWZ8Tr+7w+Qw\nEJkWt81IdKPE/Kasy4dWLRH7gGutJX54Ct8nYJNXHiKi8NHVaqYK1mO113qL\nXGVWj4wrdT5bOYyHy1+EtAMgjIzwHXW5BIAY5umcx4fvwowNGJnbC73u1ygu\nhIOl\r\n=uzqg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtC/sqxB6A2K/H2DMUI5BpQ1FFBeGP1DI51PbvBqqc8AIhANFulfEJaZfNlZnDWZEJcsSHbQqXG5A5/uAeJxsf1op/"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.5-beta.1_1628079486199_0.35269090492449084"},"_hasShrinkwrap":false},"2.0.6-beta.1":{"name":"ecsite-form-builder","version":"2.0.6-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"34de12a3500ea56f60cc94b36284f9696d2ce664","_id":"ecsite-form-builder@2.0.6-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-g1t+loUF9Tx7OjG05uYwyVJ6OoGsupRyTkpQAi9R/TIY0NoBUiQJ+yCInLgi32ab8K4A8x+X6wRRV421/ITOlw==","shasum":"a125be288cfa8c46c53dd6223e1be0640d3f0e2a","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.6-beta.1.tgz","fileCount":79,"unpackedSize":2994864,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCo+bCRA9TVsSAnZWagAAjM4QAJ2D83CeBjMZkmf4xrdf\nI3Y99arZRspRCGx0hSf6PEh5ywXBJsHRsVA3wRhIvTjW359SmuyY4CK7Tx/e\n8ectreIXFjR1XIP9sI/JXVAmHeSw4Ra5LIs+P8rD0msMj/7Dr3Efo//jzcDq\n5tshLK02KIk6R5KGg68qUL9NRBYzSnAVx+pQv32amaEWgqx9Vrnn1CVYzc6I\ntWsqSuJq58tI7sF3AmR2elFgacFELPECdJRY9LUvGvOOj0hdJWJvc5OwMCGl\nZyjZJxGPhaCMLu7MuhyJq4y65xwgil5aDKuJ//yWAt/wiu9hBDIZIFWceQM/\nFooAPVwo1KCJ//uVhZtu/hPeyceRdsRhMuoe1lhPg+KsnwS2qQip4JfPItu3\nFMFQlCHAtQ56OcpBrOXn3HjTbZK/dc8bERYDYBXvVKjU21B7ItrDtmHfA7Yr\nlPD08AUpdFvs+oHrJ4e5RRs7kaeuJaMfECKKhHT5FQWXfBlzJSivnmuoOzOD\nWQyQQnu+M1V5BX7PYu+EuqPmL3VwD6hvYi5a3LW+Y0tviWBOifb8v1E9KnN5\nzoG6TlabPSH5UUE4D4ogOvvDHllU+Eol+oZAPBsoOi4kDC3jlkqJmJ26M/VX\nqjWpOUkY0nJr6w77eYYXECEE9H1iWV8+RvqeJVfJ2gfJv3K2q447DB50JNM/\nwboY\r\n=kfGk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAp3OAzpTnZRy30Pv50lBcbe+fDiG1FpcmamLKWNy1l7AiAYFkjd+qx/3a/S+f7HwvrRfXycONWgvCU/TdvtdmzxXw=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.6-beta.1_1628082075444_0.644173965112181"},"_hasShrinkwrap":false},"2.0.7-beta.1":{"name":"ecsite-form-builder","version":"2.0.7-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"bfe00212b7c7564bf6747d01255a35236c2ea7ee","_id":"ecsite-form-builder@2.0.7-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-i+A1gVJqcjWD/42T2l4eo9UXTqhPq+BPTwoQyaWAARux1JOAZEzTysy5mubCqxLFO5o2EG15SV5dplUsHesJLg==","shasum":"3b9428f55d704916dd71f2ad079513dd8b3423c5","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.7-beta.1.tgz","fileCount":79,"unpackedSize":2995597,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC142CRA9TVsSAnZWagAAOtEP/jCIsr6BRWbI6FlmpLDe\nAs09MX+mcs8fu/vfHmGcA1l140lqZPb3bLnHnP+j2oD37QvkE2pJ9lmNyCGq\nDWKxr8dgQ3u2cSh1oYwyUMgt+PNnFKyMGdGHdcU41egzD8iJE8eY6TrfSV43\nfdZYBW0AEiDOdtv7oKeCHqCxxJxWasoQMBnOh91YZqVk4m/Cd7g64SYGVXrl\ngsT79+Ke2mrVsjTaVYCTb11VyKjKYYVTJS3nGtC+fxCoZTCiVggytxpuC1le\n9saa7k9218xOdIvNPDxJ9+4qhurCddWt8wSuZ9tPKUJ38+8VgCcGcf6TtfsO\nNaUV+7lNPxA+wcoEBh930ZRwCl9+GmqP1oPdbH+7nu4M+dLZpYem2mmVsBCt\nLRq4+LYUKR44KIWI52pvGWsneL8i2op2n5WF/4fTxHbhsIevmPlBsK6tkq9p\nQ0PMH7uCPDLg5Czl6bk74toFSTjCrsM77PhZrzPx/myYdvMOZ5vBDpdMofvA\n5DcS95RnKMWRIPwAiv6Oeb0tDT2e+oxTdWMcpZzJbfN1Tdey9h2ke9vfVbWW\nJCEFT24Pu1B5BHiQiEQPm+LjjrzPv0+nJSON8H/+9Sw57mA1MVwLJ2T04Zhy\n3Xzh7paOm3upayL+5gtJ9vdnRHxlB+ABib9h1y2JM1f4Q3XYw53ddeGw+u4k\nxV3e\r\n=XqOy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC43/AxrNbDD7PtlrynhrHvLl0dMSPOAN2QelM+ZOHDcAiBt4Mo/PaO8nA14mQaxSOSbK7pHY+WJzq/WUfEEj9SByg=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.7-beta.1_1628134966187_0.4241546234225675"},"_hasShrinkwrap":false},"2.0.8-beta.1":{"name":"ecsite-form-builder","version":"2.0.8-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"98597beee34a1e154f763b5ec2d9b2b5c1500dc0","_id":"ecsite-form-builder@2.0.8-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-suyHLytDTimP0H6FnqirLw2LUqhufgvMXj/VDlTQE/nk4A1KBAANYxhu/PD4mQOFoboty0squAOR20JSOZ4GtA==","shasum":"e1512aae5941842a4265d333125da71effba91ea","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.8-beta.1.tgz","fileCount":79,"unpackedSize":2995765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC2OvCRA9TVsSAnZWagAALuoP/3ofj+mPwc5nb+hirLKg\nv7n/aZpKSok4tV8adnFkttS5OKRRe+hBYcAfegSz/RMz8f1N+7OVp370VM5B\nLR2NgLcGkgqSfTfIS2LUzg9u1U3CfxSuWr+oZS7oaX2bUTEItf3Zw7eLJOVQ\nDwzmBXOTcyBgrXOKk5vilq6eABzpkR7Dejxy3MLWlT01XQiyUjxsSspa4Tpp\nIUYpOJ7R2o3JAOVWroDk5A1/F7W20udV9NaSeo6EM5aD5qQqPcaxI4VxXBAz\nu3pDP8/u/t3ACp1uatcINBUawW8ZT6U43o3KjdHHAig6WxCLYjeB78rS+Vju\ntnN7SgR4bufwiA83X6jvw7KY3NW+qEMFIEfrhZwUnISLe/DPTAhJbKOuzfOi\nr9fTzUb0/SHaVXEJVhdciboAXmJ/vlik0ZPkHCGW1750A5HvzePvUBz/m4MQ\n8Fqlpb5tQqvu/MV/E9aPRGdfE0d9EsUGgf3rwVqWLcC05CKDK9Jp5LwJY/ks\npExtOJCxf7ny3Kl777ZIXfZElOuNRNwVMszRWRjCllzYI6Fd92MmVIxGrWWt\nV9GUBrgD0Prcdi93tV1uelVtTITxDM5ZWLBzzX9eTBbAfAQmZmeh3rlPvwg6\n6xRa78oXwYADOTEDyEbsXagXOk4pdUkd2P52ASgATxQTM+V/gfiQ9WOuUXJY\n6XVS\r\n=yx6F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBL0taWn1pBa8xa88FGkEpk3uoB5If+woJ1GsM0SgfQjAiEAwHFw9dFoJKJWXsKq3b09x/HGFQQkVj52x6qmcRC3Hgk="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.8-beta.1_1628136367307_0.09659862610715675"},"_hasShrinkwrap":false},"2.0.9-beta.1":{"name":"ecsite-form-builder","version":"2.0.9-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"c2c4e6f5344e4cf17a4e04759d6bacb144c30a54","_id":"ecsite-form-builder@2.0.9-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-xISh41ivf5ym6SEopV9IoSEJLrxQeQgowFnVuQgfmVFxpDtZkUyUre3m29llu4LfcSWacaMjxJj1I2+PNuO1+Q==","shasum":"e3c7df5496ae2ef5e9a75e6920db0b1efc8a1bec","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.9-beta.1.tgz","fileCount":79,"unpackedSize":3000825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDVF0CRA9TVsSAnZWagAAEfEQAJ70WWtT2rFK5MxAlRv5\nlM3UXRoX3bMZQQfafw9j26TfmX4NIipcoe8Eq7J13kKx42H2M7n81dpwvSTq\nSh2IpdnJ80hNuJeROup1BfMZ3dfC2GIlmLTA5iPSGfw0KlWIIuttcaKmP/K3\nqxXiGUoCuGSHtn6QcJAii3aI2bJYHN9G7HF1qE99hdtOPAtsCTLAQXY4/Gg9\nIjw0MZzu8lrsCABf39xDxnuHpi+9Nvw4EQyH4UCGtvpXHhrARFc5zrJeYYB2\nE/qNjR9PF2Bnf1wJh7JfPRP9MT5dHfQQdGQAn58x1rxXUlaw+leQUFR8ZX8A\nsoUOiehhxOFTlS89RKufdg1YPbSpPKqBvKnhI6VqErZGDsOek2BpgDD8h9kw\nzQ7mGf6H1T9V0h7xUKliO1lFq9YDmRZfVyWzoXjhlnJK0mSJyO72YquTThHK\nQRqqLf4Khf6XirMdSCSY7SqGpl/kXZM29ZxzigxqAzyd701jL5m7E8gtMg1Q\nK8eDHW0n0u5KnyoAb4Wgq5XKDCaQZ74AEklNMoV18S9HH914u+vZ+UbeHTCf\ncR39wrMjNMWkzRt/DmMt2Q1o7w8g6DWkZgFBh2ZUrUxqK/GraRR8INZCGDxz\ndklYcG3no2wBg5GQwIl1fe6HPHgRUYl5IV+e+gSO1oClw8F+2SYvYHyzA5ed\nMhnS\r\n=hyQ0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC/bob9danYVfmQ+845y8FmamZsVQVDv191e0MohQdgsAiB84ZywXIhV8ytQOSlI40UWVmbNi24R7XOBnfd/5LoGsQ=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.9-beta.1_1628262772568_0.3699758079873967"},"_hasShrinkwrap":false},"2.0.10-beta.1":{"name":"ecsite-form-builder","version":"2.0.10-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"958a9ac0710ede6878e60a59a8535963ccb5e3e3","_id":"ecsite-form-builder@2.0.10-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-fVrGKVFUSrU0Nftaj8D1WxV++vkn6HjoWIwcbkzLCf7DrNHbX0x+I6DLcIn/cXUpO9vQMGiin6z5nCQgeLbfEw==","shasum":"6c5c3529818d825d1ab89b5ad3bbb31bdada7172","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.10-beta.1.tgz","fileCount":79,"unpackedSize":3005837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhES+0CRA9TVsSAnZWagAA5xcP/2yUZ/odAahMhX/9/kaj\nhuLoa/ehWGbqRaWZ+YcS/IU8umZ3KmTPuW8taO4Nlbgo9RxZlnWv94nI8ArF\nB6Kyo2ldbIcq19Ty48KsmOlMEncxUZ4CGbIFtQew6haCDEp12TAFGgsWLAXJ\nbzWOYtRSH/253klZQO3fsJNgqj4/wcy1Q4I8Mt21Bt3J1rZLw50uQy0FWt5j\nmSaYO6sClBGlplvdkSFkdz0cwnEtKbmYPma6XXSmUsfvgTf7X0sJ2D+zYgyC\nvMFlIF64zInyzLe6/CatyZ7TxuHdWbDQLuHTBEIWYKvnpskWWgkMMrfdc80e\nrEF5c1qKUwRvNjv1ebxcUToYTZxRD3UrfP85slQ+a48jeOapY8FiIRwxzGbR\nUjZjtXP1wJrLYSaEGXS0z37N28uWPN5V0hoLVlpXU+XoZw7VELqYsn6CpF7n\nDAbhlEGr+XagL7HoPtCg8YG9/bRuHxKr4mm4QKVSD2IM1AFI56KzdAUcZgSg\nnDjGgVGCz5y43QZgRfEHz6PE+I91vyoPNc2oLXvgvoX9T/oCd9UHyrS5Fnz8\nNn/hV3IEFHf7BRPf9+Y7mXoCm5kyLsREd9aQprdJiKYiACFjsWwfRWFIGRCo\nVU0Tb5v1IY0wHj8S1wyIKSptN1/8FAjOnLaqO0taf4RM+Xdc16Pw/OK/4/ji\nOhVA\r\n=6d4M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB6HqXh/7kiStYSuD31c60J3Q7T9sL7TF2QR4FT/wvJ2AiBo0jn43dHNcjMv2zZl2WgyAnlFdUdHdTYcTfsgBGglRg=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.10-beta.1_1628516276792_0.26126910196402586"},"_hasShrinkwrap":false},"2.0.11-beta.1":{"name":"ecsite-form-builder","version":"2.0.11-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"2593d9319dc803eb1627c0fc6ae6f00204174303","_id":"ecsite-form-builder@2.0.11-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-ABO+VQMiK+xXw/AgkNy6XD+uDX+ahSAHNV/TeNz4EbXJJ9+zNC2r+PQyzSwbhizFAwknyRWfAGEKow7edGtjHw==","shasum":"308456ab914e682d3a55ad0a64dfe3c0725376b0","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.11-beta.1.tgz","fileCount":79,"unpackedSize":3001746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEVMsCRA9TVsSAnZWagAAyAEP/RqqzpKcuWpzLnhjI9W5\nt9yFNwyYNy2zE3EZlaHk+23e4xp7QPcNE0TJxEBCM2QJmeNJgzZtg/ZFkmwJ\nAJpfCoVnBpCPUUc9tSYojcpRz8tBdlGGiN7r/BoH8x1vq1qpSdAO+1afQMG2\nUwLzTBOSPXWOmpyi6PzeTfvI09aCUIUnCOq5q8Qla+QtSJQxctod/xXYDXyM\njKo/qXha3rBQKSQm87Q/Fzi1ZpJzeqgTB8CtfvBDFRfRTzzFTFNi5b9fC4MV\n14sxf9yTE8dSDBjOSfQpPrqnnQHkNX+zTJfi3uSmPR6Y2v1zx+R8kIDRBQm6\nMpnYUlNttxY5d01TFNGxX9zQtKnJ4LZl8YlaODVOrxjz5oIro+nld5iqUF5B\nrrZKPZS6+D4v5oEg0c3gPq34XKhTlrNm2Fi3c+O/zX4I52c9FW/nkcEd+CW4\nahrLOg3ju4nQ1Q1ng/2ARR5coy5KWk7Jt0mQkrjN62OMDqqE9UmLoMtpi+3E\neR4ODh7+5zMaNLBPUsZQuZiv/uUPhLLI9OiGrt1PqQT4dF9k9wsqjN9gX3fz\nAOVXNx6XmQTxOj5rEFh1CKNyCiPyXTSpF+tNCQNQpZNpuaEYbs5vYeCZbgh3\nkBXdz8ZWybJfKQSjQK8/rxuiA/ztvsCjfhnFneIHPI+26oGqYKfAmO0vhB2z\nGMhN\r\n=lmA7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsK8WEh4B75dXioi0oflnR/DnPfpK1o0yTWgmdFrYFSAIhAPWdsiKa5cxyiT4xeyuoJ9ZxoUJGTyWYIuh7zVdTq8rU"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.11-beta.1_1628525356021_0.5714897080941135"},"_hasShrinkwrap":false},"2.0.12-beta.1":{"name":"ecsite-form-builder","version":"2.0.12-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"5cbc743244824ccd89c06c8d9fc2600874ce2836","_id":"ecsite-form-builder@2.0.12-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-LE2slRhq6wxMtlis5k8i+/oiS1pziFkR/4LAlvWkOryW7vIgV0dID3yvTA7TUssOybjs5WqbZE6fr0vUECVGJQ==","shasum":"177fb541e4216deee3a6b9b70a2ef965bd3ccc93","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.12-beta.1.tgz","fileCount":79,"unpackedSize":2995672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEfZZCRA9TVsSAnZWagAABLIP/38ctsggQhQCaIchBY5w\nGqZK75jJV8B2d9SYr71wEL/2yq5naX+DGHAJQMNaRg7tLLiHMsJiTaelw/II\n8d8MRz+OSzPblgIxOXRXjYwbsVMwhB7xImhDvEaRR3E+B8wJg8TxFWCEpsIu\nLqHV4waBRzOx86aMFs6XVaRxYBKCRu1YoJDY5oC0vqLRa4wdb6S8XYLbUA8j\n5+5q098V08NmcLLH9kvsWr4H7Qrx+3ysfVXfb+z2f3nDpZ5C3Igi5ue66gAx\nhY6VUv1cj2+Bxf9GUhhAzrjfB6lWtqrb3XfyaudbbNVi16hZViOO9jOPkiDJ\nM7VZidS5yV1L14Ma4YODz783JLQQOTH5nhP8l2NekOQr075uRjPksnmfCj+3\nI60TkIkkNaGiHJjqFbE9C0O5SO5iZnJq5WupHpBnEt1Z52tmuzHBI0aUtdtZ\nPObYM+lcXN5GtfQxRJkC2XQnGjNW0PG/GYZHD3SJ79sRZeQHrsXJkxYV4+yc\nk8mBznAnIMQ5tiEj0s9RmRPopkSF2FTItbQSVwrWjT1NP1K2+ZHnZOjzq3r+\nXRkLO2npbBR592eNsfpfCz3iJ30GtJg3mXuWp5IbWX67dR+Ibp6a4IYx+Lp9\nGoDtltiop5k1O1qTRAyFshlOXNkVtLv1/i/KZtOczApufhYunC1RdYnWYKac\nVUuG\r\n=wYr6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIrY1TqXRnq9OQRNS8Yx4IxZhefbrcz9yEA1Y/HQGfRQIhAI1Iv7wXsRQnqgoNENGgQxCcghDDWrzsV6texKfsBf1C"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.12-beta.1_1628567129672_0.47914556954538257"},"_hasShrinkwrap":false},"2.0.13-beta.1":{"name":"ecsite-form-builder","version":"2.0.13-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"51ec698818e13c31a98f82ea34e09d8eae47d264","_id":"ecsite-form-builder@2.0.13-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-RJ8hCJPdNxUzoiZlRhuGsGHviCgFSGVXQoiS8CgX/2w9STS6qElPk57e8X0k6v1Zs4+jfTHF3suIybUdvzN6Pg==","shasum":"81bc66708ac45d3eba4c41f39a3d81303188d763","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.13-beta.1.tgz","fileCount":79,"unpackedSize":2995712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEftQCRA9TVsSAnZWagAAekgP/0yP8cZHKtzfZ0PP57wb\nSo9uT6D7iY2ry+oMxztbsSC9nyJ5phm4QneMQiJt7xwOePVpCLFk2VWQ/Zcf\naDXpav7lhBTwGdDnZtQdvqa0nVETve8TTvM9v1A/ieeiOA2nEDhssbxvCguI\n1/h3w4SKBpY/ysj1MDv8BEhIK8Xl5sPxwulmnut0VynDq0qyHeoXSyn1Hh48\nxJ3cxCmk7V+oR98vsHbbGYwYCW72WIAu3kYsQxuQRMiS7gv6EWb3jC70HC0B\nM2kjaz6so01++4ka9L/ebPLvOph8ILA1LkHh44HVJBuSWv41pOJ5vDt64+B4\n1ZwayTy9WOO+D1Pn/E9Gfs9r0TEVEhgc3PX+1R1pFGkFpigu0JnpmicpQbFB\np5cJ32D3BeMm1hygruIsjVqC+5iNK1lnLV8PASoYByOvFUnTUFYwW9poafkT\nhNCihdmMiEXSgbJjImpC9HGSes8WkhidTOHiLMnfrcyK+9195SBMpPSuv69J\nZsdnLFwxYvAP+liN0DoO+ufL9HWoyqhwV/a6U6EFwihcNdNUqqiR4hxeaRTT\nAN6ewD/i4RzIVhV0nYUgk8PgtWG4MZyWtiG4LsgzT1f0G1hbVmnoQ2AtV1ru\n5RGz/llBonSh0D/U18LfUsvU3KWkZU8VfitDYelQw3LVlvZ2QsO0oFjB9kX0\n6R5e\r\n=Pd9x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSE3ubS4aolWMsF7kjIcosIU2oCK7QqUQrDRzp+EQP1gIhAPs6cvNHXV6RGQwODiy6BlzDoOSC8wJAnEBxun/cVFXl"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.13-beta.1_1628568400766_0.011919228963915618"},"_hasShrinkwrap":false},"2.0.14-beta.1":{"name":"ecsite-form-builder","version":"2.0.14-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"2593d9319dc803eb1627c0fc6ae6f00204174303","_id":"ecsite-form-builder@2.0.14-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-sNnLug5Yb1bPfyP+W/swil6cRDD4bXimFydyQHimOzk+aNJSxkx1FXh8AY8WApW+NrmeXvTN3yLAPipUVYabuw==","shasum":"940f3823436412b3c6c19a8347158886745000d1","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.14-beta.1.tgz","fileCount":79,"unpackedSize":3001692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEgzgCRA9TVsSAnZWagAAh4AQAKA2t5UsKGQpoBrCehD7\n4RK6HEkpH42XoU5+ot23MZW/G8FqkuwsO87CPC7sy6rqS54vyA9nYVppWxAF\nPerKjpLTOyhNvhPGa8v7zM6LJFnFfCdBVPEE79sRZece8Q5hxMHF4ktm9RTr\nVQFaYZbwsiVSXE7Dvnprnm5oLnfn2haPL8z0Ee3JExmXJMItwknuNH411Q7T\nKbRKbdFAl/x+KKN79MhCTtJAj5q8EOcav1ODNevFyg1q9rCsVMkjL0CeFrN8\n2vVILsR7BtVCizRt1wVufZrrrvK54/NW35458nUbtuBrSaXj6ZH/gTEFRsC8\n/zxgz4Vlg2YVS0+lo2DYLk0XueDd/Ml4D7olLVdCiAI/dYua1SBA2Z3Y4FzR\n1Od1nPRsa8oZ+EEi50fEpvqgfOEWb5LbWCAsbvFAE42tIwoyINAp8vew/HJd\nHFjhJr28b7os9iO3OYgaZWMgiTEfDEyuqH/Yyzr+Q0QIGLL/Ewi0m6ksskrl\ndsNMQsS4n8mQoWFyB9mzmsKJ8/jMEpRaNhoPPCp5F6P7HbMlEmRWTn7hN6kj\n+rH2UffDxFUJGch6uRhYHCvOH9b/FgcjRjI4zb1uFXuGAmf8sb1cm9Uhf/xb\niiHDvTjSjiKOPTHRccSZ65BKIe64fDmaSoxcIjREnDBPJUug0W/BymKz+p6r\nk1XU\r\n=b6ds\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBjOzd+2TiRWkJI7ZnR1epApfuIRcWc6BY/l7YPrNPRBAiAtPet+BL56JiF3g6W/UaznRdMLpbEkezYja3w7sYCxtg=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.14-beta.1_1628572895935_0.8385390304914488"},"_hasShrinkwrap":false},"2.0.15-beta.1":{"name":"ecsite-form-builder","version":"2.0.15-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"f67757924b349e50a47fbcb8512f4195294bc51a","_id":"ecsite-form-builder@2.0.15-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-y7hlx/OvbLqqulzJMQmLtPrQMHCbUdUYOIp45BYgEHvB7lB9UuRqjFqBUq5Fd8OmyyJgHns0pu/DCJYsh8N4YQ==","shasum":"a382826c3b1f02641cc9ade9bfafaee89bfd12d0","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.15-beta.1.tgz","fileCount":79,"unpackedSize":3002324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEjegCRA9TVsSAnZWagAAZc0P/jpJPux0lj1iyg4HVTuY\nrvZVYd1ETgH2THn1K+0a47KGNAtbSFjXAx6jfbg7iuDXoMiAwOBXdgoqoU3q\ni0pOivRz9PvWoGRCOuCTAHcjVtcPeIybvYAlP3/1ZppvzEG63UikTi866zjN\neN1jY8gJsIYrSvM9sYNcpS1tBaoEppitCWRlDgdjZolYY+HEGpmU9QzOZcNz\nSQ4dQbduaDZaQUfGCtJDZ9fl/V8zPRkeU5Es8wSmdVcQn4thdVhq3LupWjix\nhEUfJYszyKJ27NIDFRUqE3WM12xX5+BKWY6gdGP0tYc49ndiKJ9mdjjvAehS\nxskREwLkZTr0nC9C0eaEU/uCu/Gmw78nGepny0Jp6dKTFg15tRcIBcLOMe8I\nHMZWFCoZUJP6zztlS/5erzWdBx6hUXxQ2wy+Qy1vNwZ89UVUx4aOIZuln0wj\nGbWsDTR96WSZTPzUV4toYWh9RwCZnH/LNvqKv0e/4JpfOnbzyNYJKw6L2+Ra\n/pEobc1vd/KJarUncRZkmi0KBsTxB+GhXcmZWLcN4i4KR13tdWOKwVj2Zx9j\n2uDgiDpEyZtYNMsHDqLOpYhMhSEjz6pb4rw+4lhpaFs68NpmiJuX9i6nqUXu\n5i5qI+88B3v6rifx12YjpCY9CaxLbuS6NM4Y3q8CxkHbjHIERwtBPPzzoTdo\n/MTz\r\n=Hi+u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZPvoOHF+mvVlmYQfiDg00hLKYgWJtmma9+ctk7pSMXQIhAKTFNTjRlCRsvDwjmkQ8riHY3asDMetz9bqUyilLcEny"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.15-beta.1_1628583840678_0.3709145860351477"},"_hasShrinkwrap":false},"2.0.16-beta.1":{"name":"ecsite-form-builder","version":"2.0.16-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"9091e120d16f2bb3103f0f9aa8bb44fe351a3ca7","_id":"ecsite-form-builder@2.0.16-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-gpez5GA6AJAvSm9OQ+w4bq/YVoh/PFt02ipyYxCmS1uLQmIrw+1p8hMngHC9QnDAtqgArX7EvY/Y9KtbMEAyPA==","shasum":"37c6f2b254c83e6acd815f5ea3eeea9fe9215f42","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.16-beta.1.tgz","fileCount":79,"unpackedSize":3005596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEs1+CRA9TVsSAnZWagAAydYP/2CYHXB1U9vvUIycrcwn\nriey/22s/SeRM4wM/YZrDXtPMmVbKAx4YlOYIzEHq/ryf3p2pUbJYzWBIai7\nZ25JTwDCabO6ylGi3R4CqbXxuFLVZlvZi7QB4g+CSiNhwE6YLqSvAyynE+dV\n/dRpku+3RRbmtCEsAo0RKo6qzwj7q8f6je32EuaV/3PMyn5XHozro59ze4H1\nn8dhQNIrhv9VKV7e90vrupWXU8/ylm/OO90kecKvno7imw8d3oNuwKa7/40S\n3Sp9f1JTOJKhNBu3PRP90p5jgg1LsMs37uOtj7p0bZgzuoUCRij8RNEDS12x\nw5nOmP28yKMS0GND0QRwNHVFIDKiAsrfTWu4p7NtIuYjIGCu2WL6nqR4zDvq\neFs540Cfg7GDEQl40blugrYPhNLI2OBqkYOm2Jl40JjTaslk37qn7CGzwFXn\nPRQcDOeq8gAwfz3hUbJncD5cAJGnfvAw1VlRG4PoJyjc3XlpuuesGHE03/Zr\ngPXhLwbuc+toPkcYpm2Vf4T/p2O2COhYitqoZdhE2i3JyopjsDHvuFRh6yqx\nt3JM/0QN8KPTitGDIM1odhPVSL6DeexiZfcNNsM7V/8OaKXGNC6Gm5Yv4lo/\nhn6pa3Ps2q0R7Kig4zJVGKcqqCjJ6vRAH5yXLMdckpu5wmo75cSpxAxLLeBA\n9oHE\r\n=IB8Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEe5j6BHOrrE4sqOkPrPg6ckSeJmM8hw3kui+AiCVM8HAiB/9LnQDLGeuFWa7Mh+yP7He3SiKt60DNK+kFBY9kdCXw=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.16-beta.1_1628622205891_0.057263918705777295"},"_hasShrinkwrap":false},"2.0.17-beta.1":{"name":"ecsite-form-builder","version":"2.0.17-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"7c5f306d506a1d18538b8ece5c9a6bdeb48e0ef0","_id":"ecsite-form-builder@2.0.17-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-e3mjEK+TpaLLByq65NzopSm2UuqAr49DK3gFnZ0o/jafqxh2RlLmptX0ZbfQPkbp2mtBww+9rABpPSJdZwImsA==","shasum":"b3c4f17762e9075f4bd2b50c88ea47e15ecffe83","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.17-beta.1.tgz","fileCount":79,"unpackedSize":2864115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhE1VGCRA9TVsSAnZWagAAh7sP/16zsoTMbIGQSx0V06PJ\nAWIVO+inVkAISMhovgLTAxb2g/sePx9mG1/Hsb0+JMco5JiRindNbQQN5qzY\n04ShoNGE9iZoBCVjbFWDTL8943bJzAo6inLIfpd94Tzk++9T26YH6daRXPA1\ngTCtMAPWPlLlbE+wPE/RAJATqXOj2358KdA1u9l2lhE8GWWJBNxEyUT5XqqZ\nmT9sSGuME9x+OvkOvGeMWrByE1uHwD6J8cN3SL6Vx7f3tgKvoiOir5Vk+Pb/\nMVpfXGt+n6Nf08SCDgdBwoXTBpGmejo1M27XzxR/4D38BTWINi6hPpg3vxt4\nmdADJNmuLXTdR2FvMhGSyq8W9c9h252UPrVfCno9kmATaR2Pn5Rzeo1eKy1K\nGJV54CeT0FF8npszNAkgZAGD7exctb0Ul38/2oQP+rhZIEp2mqEh+/KsYjaw\n4KlVqo/hpPSnzWPhDhK4KMuyspDMoiWZePl2SexyQlwi7ZaOBy69sbgOe7d3\nEo/EvNhTrdjhJxYzbo6yfqvhSvIsXBrJcJB2SphRnPydWaNfQiRPIJw1fLsb\nY+GMbKcBIKlmdU6BBvXgYIlGFlEb54ILgCj1/Ud3hEpdNx2tnmam2ripm/tv\nFyHS96kp2GT/4U7K7bo0XRdmJ45/FP7oBu1cZ5PYz29q2TEg9grdcv2+2/aT\n27K6\r\n=A6hU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPqHFnBpDGkaJfGPWeNZsjHg7lyftDeBchOy4Oji6KsAIgFeSegxHTkROoIRYC37D/PSf1DBVmZ+Snwr7mHbtaWqM="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.17-beta.1_1628656966311_0.8386352826735068"},"_hasShrinkwrap":false},"2.0.18-beta.1":{"name":"ecsite-form-builder","version":"2.0.18-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"4b8825d6f4919bcd116e46070e927115abee3fc6","_id":"ecsite-form-builder@2.0.18-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-J/zL5yCJBznzPwm452v8txmHACCgDZQTwt9pq3Raxq0i1Bc/jn6ULH/u0cybXkM95R//NikbTnCAGgy9iSx5dA==","shasum":"b7e8eae5e251194e998ace128170419439d75430","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.18-beta.1.tgz","fileCount":79,"unpackedSize":2864115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhE1Y6CRA9TVsSAnZWagAAOikP/1QhCuQ5YhDn5i36tMzi\nKzqGUlPH6D0b5Ke+P32byMXMji6SICVwTBjchfNpGZS2Pr0ZCitEjWTNw26w\nXu6W7I2hwwChR2ObJPixB/MDO0Rv36EvdUoA2s9il0AurUmigiU5A9q3aXQO\n+sz/cmlhEYaFfmAKS5mUg3O9LXreBXTA4o+ZbQAAowc9BHrmN5ICrAHXWrar\n39xP7+0MeEcvkaz1AtWfRc6IBbYSSgSPulsTjXiK8ODkW3v+n6FW1bBpQyJi\ny1q2br9a9tQ7SlyYb8anbxTRLXetVvOJl+1ORnhGfgjwwYVJpJ4UwNJheSWx\nek3yNjtvYo4szHqnr0jT/6ggVHdSpJoUg+gMxdJWlKoBk+pe/jQuMNPXi1K4\nYRGrRb527aQH/EGVXcelEoNh9UdlBjSv2665a1xhw0vkGdxPgIjH9EV9S8ZC\nah9fz7GZKyUAHirlQ6n4ak7P2WqwezoXpcbWilBvD3Jd1/OEKFEznT9klPbC\nm5CtIsPnt3/hE7Wq0oiTHQUSfBJhovhHpA1IDQ4V9da2LT6eOEnE2BJDmXYA\nEjtff0QUvrTa+bX6UP1DU1G6krIW4J2NDNGnFZ7PuHmq0Rd2SXkHDJ5vDaGm\nZqtq7b393CTnnx8UXcf4l+YRLTd7sPFaohfqPuqrOWlMTY/muI60kh1bRVhF\noa/B\r\n=wiji\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB/2W1fKvSOH2GiAJ39wr39JTodz5ouLqJwiBmaZ49TtAiAxTmFakM07aSe9DLSoWhTSarE3Yar2Me67lSjnyxylQw=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.18-beta.1_1628657210613_0.621692446913302"},"_hasShrinkwrap":false},"2.0.19-beta.1":{"name":"ecsite-form-builder","version":"2.0.19-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"9f46edce12065c2bad8ac8485025d5834569eb25","_id":"ecsite-form-builder@2.0.19-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-ZmGk174lyFhYWpcOI/x3RoetyE/gJePrKmIEGFaK2EAfdx3ZGYJ2pVg2l3zdWcnzMPvqpUOUSJ9dNQZRAY1Elg==","shasum":"9ec446b6fa0963e430a55df73d57a8744aff45fa","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.19-beta.1.tgz","fileCount":79,"unpackedSize":2866743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFetTCRA9TVsSAnZWagAAtdQP/3hurA5i9iW8+i+N4tMx\nrldGqZXi/uIVH7vCeFzVR04OibCAgwCvpZ0azH1XcN63BDCXNjc3Jgb3jzG+\nDItPh10LePzvjbxZQ8nP/Bj4ezZHl8p56me8y/5SOEeMm+tChRQKdkJ+H8XH\nKa6HlYt8co/ClSuWbxRVwiutAEE1lGuoNaLy/oe5gFLVmKgSy2S+hYexzPMh\ndiZLxN2MRaD/nEMGP7Pm/Sw4drUE+ypXVSwQKJA6zwMxK93aFcaDDyAZuybd\nBefm4uxwQAoKHpSHQTTWWpBlca/kUsUGPml7dzo0pA8p6I1Ekotz2pH6ZJPQ\nDBkRLkzonQ4D0IodKMUH2sv2QlFi8MmksClphWa24GUsYazKNicdFChBFsi2\nEramB4jbG+Xx9axO5SdomZtrYBGlPRJ3Pux1wXHVSDn/30pMjMLH8vOo6V54\nXGwsRv5jZpZnOeSnR8wdNtRicSwu6wMup8itKUw2jut+jDI3bU2ktJ0Lii+L\n5/9ocwAciSfTeR83ovZfZShYFa7TKV0RMX9I8t6wWCN+lWGFMQckDpoNAJai\nb2C9K5JsgnA3RMLgX91D/i9AbUgph+Zp8zc+AK5cDbr+gYtoUrbd5njKovGw\nlh0AhFgi+Y8uQsGitP5Mm4ME2ePNc44H3P2mnyP9KJ9CDrwv52C6UUF4p/jD\n6uq9\r\n=spKn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjZj/bK1+zCzlJ3JJ+hctrV8ZL9aaI9TIbEuF07VWimAIgdbMfxmh3GZbKhbZyM41jd2xCc1QU3gAZJEMGktSLl0U="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.19-beta.1_1628826451648_0.9055746216859999"},"_hasShrinkwrap":false},"2.0.20-beta.1":{"name":"ecsite-form-builder","version":"2.0.20-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"3c94c527fe7e4b31d3b40d54c2fc46b79c098a57","_id":"ecsite-form-builder@2.0.20-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-h6fDGaY0NHkzR6LUWHTsVOER6DjdMkDHncfy0E/guycCTypVsIBDGUIwVT02nBUnG2VV55WmKBOtqp9/lRpdkw==","shasum":"264785652cbf1d818722013810b0891c41898580","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.20-beta.1.tgz","fileCount":79,"unpackedSize":2868663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFg4DCRA9TVsSAnZWagAAfQoP/RKbUJpANAZlD1eZd7ox\n0qLAG4yjUdaXPqpuOANW9UFhM8E2XgoK+ONnFMItCB9Y8lhIjbmINhU76yCh\njTV7ATXuB0U+HrxB4LHRzZClOuizWldiwiJFo6w6EeVoEnSI38wpEizxa7oz\nEBGrOsPzaNmMHEsaBK0IyQXPiRVP/Ex6Ijsp8sLdBTqE/KGqAEd2QgPTL6DI\nO/niySYfruYoXIFfSlkZXT06Fqt7KsWWKnHUi4yH0KI6TB8e8Ujx8PRqvYPy\n2F6++DKuvA5R0CM0t62KAhsnXS1Mlup1YFhwwRNNxUqycdPOOeopLxX5ClL/\n/ZvI3w8kh7Odp61hHeRF/jnJopgs/4Y1nfQR/MHmRBWpCdk30psV6yiXtPCD\nektK/1PP9GriOK+uSzNccHNrjMPupSXx6yQy/wJ13/gN1ijO+aCQyCysD0VO\nx1BCWnsIMlG1gIHOZw1GBwd0WjeWyQMqo1YdnNvqUi3sTuMBRs1YBbx+BHRU\nUCRH71SA6BzjjK1dTE9XNDcAvKc4SkatGRIVn0NGAS8hKvXjwUrhJ4FkF6mL\nPsOJqKPiT+dRJ14qzw+Gt8z2AzkVdRBd875YaB20m81iLjlUGod4wClkjNCS\nwR8YZoiw6V0nSQB3al2rwqPfBpxRv6FyxZIGsfiju4DeI0FQmObBRXa8pLTP\nU5IX\r\n=ZyfB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0DhmpEcO7KKKmsmgvDThTPRfx048JxSvxQNLHKBWBHgIgFq7y3LumJ3c0HXjA5fT3h+TzzsNR2r9sLQCrlwR/eBg="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.20-beta.1_1628835331375_0.0017947405841491904"},"_hasShrinkwrap":false},"2.0.21-beta.1":{"name":"ecsite-form-builder","version":"2.0.21-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"3d8885619fad79fa0f43c1533e2bcde1e796a5a1","_id":"ecsite-form-builder@2.0.21-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-qUVDadvfEv5bKqB8sp1tvj/os3WyAyUnTwa7zyaoBB6Hst6NFB8g/zPbC+ij/ddq70UnfGkYsUfWVUwu1XcfHQ==","shasum":"5c171b165e00accc91d5c05eeff57cd8335579a5","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.21-beta.1.tgz","fileCount":79,"unpackedSize":2868595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFhW2CRA9TVsSAnZWagAAAn8P/iMU0XwjDb3VyF5IGXRs\n12Add0ae21eojMkxTLu8TxQ93XIRawP0y//nipPpNYqyeY3o8D5S7h+QL/Lb\nrw+r32BshcgxmaG/m42BUbZu07nQ+gH6xY0kf2VkGmxZWX1N1nNMSjlbF7gx\nIPeeFsfIMLGfYocQGc02z52KssUFzgM1go7jugM3zp6HX4NnAGtrT2DYZV3I\ny2xxPbb1DAFJysz6qi4blYa+1EVKW6nOCLhoj4oCO2oKrx3qfR03LNITqdNy\n8ff17F/gGX3jbhbJTOyK7MORrchNkpO1qnvzlzusejpvf2bE+aNLuEwZ6h1w\n/rORGbL8IXNGASRA4d5oYf3CG0p7jGUx8tR4dCm+MQWNs29fj1+nazy0BYkL\nmW+/V8FGEAjVonLyj+4t2T1wLXaqhYrGBdIghD52sbAaIjAV8pINdpBod28o\nHXJhPsXC20lDoeFhJZZpdRWB2fYvGXL1WSz6/kmYa/1qP1FdVLkgF6cztCVz\nQJK7khJvHbNJyQyiSTSxPmFnDgEHfdV66wnkjnDCh0zAkAPy60DPA09flxWk\nH88GfYiOdF/Ki5oxip+0gn0x9dQW7Zieket6imF1y+B5+EBazI0jTF4Vryx/\nOWMDWZcfY9hvyeZdkZ7dh3NR0Afxabk7d/g8bUgk2dAkECaFRU+SKfNv0HWU\nz6fP\r\n=/fwZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYd3D6oC0nojoqteZXRk98HiH0/EIQQaG1nNFAkgmtiwIhAPZNGade+tUtBBh8MyBZ6B7YM7oS6xQKKTANJiJpvzRf"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.21-beta.1_1628837302706_0.9876024063969755"},"_hasShrinkwrap":false},"2.0.22-beta.1":{"name":"ecsite-form-builder","version":"2.0.22-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"ccfe4466bf1ddbdc3e3354b674c12f4063602710","_id":"ecsite-form-builder@2.0.22-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-M6NaRu3Qr2xloid5kk3EFFr/p2OG94l+JvfTr9HegojCshx1FwbFUL4gVcCvY/BUlFswX1BI9TMw8jcsokq4cQ==","shasum":"46298048cf3a638d255fd461a97b6441e5c7d851","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.22-beta.1.tgz","fileCount":79,"unpackedSize":2880632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGd0FCRA9TVsSAnZWagAAQGwP/1JXtKa7XYQlw0XEN+IJ\na6+9Hz3HPSjqBcmGaHNrvte1cTez99xLKDp77H0Jq6wXjJkaApI6/FT/wl1Z\nx062rc8tUEkfn4XjtOn1hYTFGs14AISQDlrI3Ss0oJ9Az5MHz9XobIqle2h4\nBxnitBAVZDBq1rKNXu+4SEpWOYb1mAjXHJ0mI5ThUi8F+27cM8d/Gl8EtWAx\nG/51cAKNMRnScT2kFDXNhs6iPLbEPjXY6GBvYFJR/Ny+YRrLC/sP0Uj0r0BD\nS3tTgbxkueI8YTBaMqv7SgHksA8Q6m8olMzdzXzNDa/nXPaOGSZawLoN0es7\nUTfc1GF3Sk7K58wna4jrLih8w9n/Cr5UgSdcGBqWtrY8FtA8L8wXMHitGees\nuHT56xbbdZcGzHf3q632xac3lyrsjFE57eeCshEprBvA5eYhBUFqMtkndevP\n2hFRy7Ado0cAthhwTSFqOVp98A3rK5tduUtR3aF1U2bpb/XJnZh/2Y4SlPuG\n8AmlgFV3FiGlnGjtvsLOAgov5K5ETV0xE8fgfbE+j+vd+O+H44jEyfmlOfJe\nkxOuqr4dXDPgsb1oKb2ZHgK66SbIt7aeg5ndUoN7EkDF3bv1ZOz7NMuY1iaw\nf7luwiWGJoUPNfABf8SltNN/gH5phEDJKwtjQI9RAaUvCnEXD/jfQIHIR4mq\nL4Om\r\n=n3Ji\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoP2ReDjGEso9ko9xUSyBcn6cesOCP/eGskbaBCGsCtwIgeCtDJROb6AloIAO/MPDzJLZPWaRzMp3/YSMtabMbdlE="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.22-beta.1_1629084933025_0.011377220644747998"},"_hasShrinkwrap":false},"2.0.23-beta.1":{"name":"ecsite-form-builder","version":"2.0.23-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"173f12885bcb68299cd1a94b2b30f76aecc959ab","_id":"ecsite-form-builder@2.0.23-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-mroMGgagJqTFZiJ+ChU/5fAHK2xzn2AauD+GPMRW5rpJ4z5YURtnb0W5lIyHPBsn/BZpfa5vZvw3o5iLuWcIRA==","shasum":"61f3e01fd67730fa889bfe3b74803b93dbccd0a4","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.23-beta.1.tgz","fileCount":79,"unpackedSize":2880524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGibRCRA9TVsSAnZWagAAt4EP/ifSrzAoRLLGS2o2GpaE\nzj33jY4tILglNlLOJrK785CI3ESAON1zQI48YCjW8rQvUt+nFaxWE0Nx9Xy/\nv+22GfkmFxhs5JIq9osNIAn1zAb+8j7k7Qq4o5Ibtvh6PJla2g54SxEyNdkc\n1DXHSAKGdGe17OuesKhauVk6nfiUB1OM7pn+c3jHVw1SfyioD7LKcyNlJZH5\nrIViIKzOeBKsiuRKpjMm0JGhAElRiBDuDrtzydPbinVYUBRmTn7ky3JSXeTr\nzMxbeLma2tFtkfonPYtxY/SuLwP1mR9XsmTf00jfTS8S6J8m8A9v5QB3bmJX\n2aF4rnmM/xDNXsJ/MDezUi0MVBwgdZh4rAI5JR9lapcyKFgafGITgHEUVo1p\n7AGQw6zv8QGqVAs9oMBwMatlr2xOkDybHdx45Yi4uMQ18yRX77KGRGQrupFX\nQq3f8ysZwrvUaTTrriLzAzRP/nSu7r5Wg/+6T3gKJbBymjWJ8iRK2HjyZ93y\n+7S5uGrz8jHX2/Cdh5SFg2Om6K23oqr7YE6V/R88tW/Q8SPr2RyHFtbl+5yo\nhRfCWDzZWWyNsEaYN1xgW7d0LIdYjvLIfVpgAmB0tcoDF8akqrUjphwowMyd\nxrc80zizQO6VY/WGuik12uT8ixM2oX6/aAQ+yYwDDjOItSz3i79aF2SbIk/f\nwOyP\r\n=qV8U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRRIQ5URQqlYbYbC5EXC8xIl/W/5jJ0/1LK5z7FQ975gIgYdmOQERX6pVcFbzBj0rWfgcW41sKykz6orxlE+A2jdg="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.23-beta.1_1629103824843_0.8123513793186277"},"_hasShrinkwrap":false},"2.0.24-beta.1":{"name":"ecsite-form-builder","version":"2.0.24-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"56d9e3aaf7f8659366876d5a2f9ef299a75c574b","_id":"ecsite-form-builder@2.0.24-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-N3DA7DEifzd6BH5MkAbZkvaaTDSRorfd2EhyO8/zsNxOTXwK/W3rGR69T2b0QtbdZ/EArIxqlmNHVl43j8XJpQ==","shasum":"92404dcf4d0dd7d93db32270809f60e7c4c5de53","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.24-beta.1.tgz","fileCount":79,"unpackedSize":2890498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGyIDCRA9TVsSAnZWagAA/zoQAJdzKUU12xw6c3S91R+S\nr0cMEmr6TsZTKuESxzRf1Y56fvYfYZ4dmm6baxYe910tm9wmbcacWXVl8ced\nSYYbcbBEDRK7eUwXeZ3cgBbWMRd07EX1HzFGC4oRfMz9z1/q+WxxF4xT61B6\nYq/64mnS2YF4SaMcabRPxFHeVXczbXks9sMl7Gs4LlJOMN7NFZkdDa8T7HI7\nDpGpEJkr8FCySXx7ehYfv8h0zf09B2TJZHoEhHKZ3A4ELZwJMbfjMeJPDOAw\nTG9rKv7FDqXPYDcFT0xjCrganzpsd25V/GOKFCy4MuI3RJpILRnkQqbV0L+T\nXjDwttI+C6CkAgQmevtGmn/7CFzo+Ph0QqOST/1pBWyf8tsxg4myqO6Dlk9H\nsl9djtmNSEOjUIvEbTQVcT8O9qblti7VLeXlspMv01lRITRGTiMh+ohMf0Wx\nMg1v5PNBUfxnfV2LdH96AG9xM2OqUpK4kXBtHo5+Qe3rcKPBsnqv6u1dUt/Z\nJ/xWIRF5N9anL20fzmO8zsrx/FStzEscTzU415OVYdwITz/j3Z4C8hZd+56v\nH7rbKduIgWuO9pdz7uiGzH5/mvcLD4+WHLlCtT+D9Z8PfUdyrK65GsGJZSAl\nrflRKDRIKt0a57nFWkqZi7S9bMR3uXlAjrFQVK6syTcsFZIUke92wuVCu3nN\nwFFV\r\n=EosI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGbP9NFdPXT8oaRoHuq4m8X6rcJaNHJQoo0xyPh3wvs4AiAoq2VpK8ZKHQ8zmvQ6616xDi+34kiHK/59zgrCIY+Wtg=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.24-beta.1_1629168131610_0.6851600766823729"},"_hasShrinkwrap":false},"2.0.25-beta.1":{"name":"ecsite-form-builder","version":"2.0.25-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"c08bc12bba91633eb234fb681765363998d76f23","_id":"ecsite-form-builder@2.0.25-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-eAM4HQobteJqpu/MpXjNzwavwPB+aN1pDLYclyi427zxhzoW5r3n/Upy1wQ6vcDOofvoNuc3RR8VGTDGUCNQjA==","shasum":"4e169a6e66f18c246ae0800a79ac0b783d6a8a3d","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.25-beta.1.tgz","fileCount":79,"unpackedSize":2890554,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGyYWCRA9TVsSAnZWagAACp4P/iV1lwLxQfYNe+NncXDs\nAyXpHt7bvB25IvC3W5XzD/vf5G0Cq+PQu6LpTNPkvqRp2w2dTOH1+L2OgS/H\nIshNFnUBN3uhXBe9o0PVphGviG5RGzLx2iG/RzXUxs/BkseDm0r4e5zfAhP6\nj+xs65tRY3QEFLVa1IOufpp+rFdDEdyXVHAPIE+c7y2AMadJiwgPr2Q8S5Al\ntd8Vq0VLexgRodPUki3PYWFJcXVoKzyKK42DbZcEmp2+K4vS/8bvAvaIFqO0\nOeH1cclxEgxil/c9Ln4io+FbT9Rn1zPBjsiKSUTEDz27xMAnvO9W9UcvOkdV\nIz/FMkwLbQhIpAQKyh3XpbKuI2zAk8r1F/W6GzUM8CxoGuD1WzL3XfEUR2IW\noSCKAICpwCHb2UHvOz0UcIvVb/MlE8y1tQQyghOi+IzbIAEI4VisUtrBmgKf\nmysC43cgtiQ4VYuO93hYqzYTtLCNrqfKVrtQsEa+eTkvr3cPaK2+SOznP8WX\nIZTol37jzdk/4u5R663Bb7bdfWOCa7E52ZygFIiKK+MLbfC4nCvv19fvCNWK\nBfydHzhRdfnyILeJzTOVG7pvM2z5yf8ZCG9eTfJPxfkFy9zBkulBgv7P5Re6\neyayCQS7cMDEljgcL2HR9FRJ6h4qH0+v/cVuc9fmA4bN1eEpdSpd1BGorSsu\nZeiG\r\n=sR1F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC2fF1f4DSQZs0lgjYiM78qL5qd2lL9jPALAKA4w5gFYAiEA4LKPeT9eUXCM8DxP0CaLGbZZjIFItHlKAN870HYa+fs="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.25-beta.1_1629169173828_0.49166227277094965"},"_hasShrinkwrap":false},"2.0.26-beta.1":{"name":"ecsite-form-builder","version":"2.0.26-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"d21741268a838a958fb07e3ba7b2f539c9168797","_id":"ecsite-form-builder@2.0.26-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-MhFqScvMub177U34oYXf3bvpFP77EHKGuLbaXry9eC+LDZSoVmYILlNy6Nt22uxomj6+jcK72dQnj1dNDUm8cg==","shasum":"e7a668ff0ce0218deafa20dc4e85201d831ef4e7","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.26-beta.1.tgz","fileCount":79,"unpackedSize":2890738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGyhJCRA9TVsSAnZWagAAdS4P/icJ2DrhqTYIozwms7sj\n5DbAJfMKRn1iduvCItu6SOujJe1gOjHwsiIA0ejRK5CxrPs+a+cWqG/3oD7X\n2U+cjxYZpvn0ukZmxB00NZ5sWB7S2wl8SzF5AfGQeM64mnkRK8e9q06IPOEq\nKlD+UC7AQCGr45MfrGNbeE7PlYqbTTYS/OB42PwkjVD6EASBVpBBTGS+zdl7\nxdNh/8yTuZBKXsTkI6dajpVp2CB1t8RsWRiUY3Nl5TRcCpxHGAwqGY/7CY1Q\nDrse6/Oxk3JMlRrIew4W+xnaqULUPOYjliG1zS1dlgNVcBW7c/Dzkxf3wu0A\nAhiyBQT8rHGpVoQ5eGdme3xQlHQ8j4lOjkpqO1Vli1wr0nMKG/qHGGsJI3Pr\n6i28TPWVtLdMRLZCRXkdzNw994AVd/MKaqreQTPbb1Fe1wFJHeiWuqtViidm\ntQHXl6xj6WJL+JskouGh6meQ8F/dDbj8NlJI45ZOJQMNabcVf6GuBrZ4ZCg1\nxU/Kf/byQvQEaszyYesnvSHFNmYXUctFK3YtttX+6FFIv0ThOmDJOEe5OpsL\nKvRSPMMzWtYsF4zr5SoFNjS32XCaa60B1D0DIetoAk8QT7XL/CGqorO4AchO\nf95DlgSNBWJ2LAbsuIodFOHffL44PQb1UfflJGHqQx8N0On72hQyVTSgE3zH\nbHLH\r\n=W2/O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWEUoKg16MWYB8V8p9DT48qtbUYbD53tYY1BKDLJqcgwIhANScso51NpAcIbp1PeP5AO05uKyxHT3V69BO8NAdRjbX"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.26-beta.1_1629169737067_0.04240336903500941"},"_hasShrinkwrap":false},"2.0.27-beta.1":{"name":"ecsite-form-builder","version":"2.0.27-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"f81c20368f3a8d701f359ed06186cd7e629112ce","_id":"ecsite-form-builder@2.0.27-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-ZErlG+3bO64d/qdMpvkju6HChVv9jmmww16fuPLmbqWMq3CLR6V5ArzENlfikEPx2G0ymmrEfekx56DFum+DNA==","shasum":"b57f854c7d40cd0fe2fe326eecad0bfd1bf6f997","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.27-beta.1.tgz","fileCount":79,"unpackedSize":2889093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHHCGCRA9TVsSAnZWagAAQlgP/R4Wc70BFtBD35SPBW2R\nkwe+cmkuyz52lhae6q3Jku1GCflFsPOFJUnY+9EPqcJaWCPWrqYXuTa4jT2s\n+fH8/tlcUzje1Dj31Mek8qitL6GS85kZcucIr2J1Je19vvBk4IPRFKWhpl20\nhhuVnZyUDXZpdbXMHJJCdxIdeMI52XqN1amR7n9Hi9cCySZYdQcJ3hrS3wq2\nAO8C+OtPaCwXkyvIplhPjly3xH6AGuf1mkUEuqkfKEazn+NVCQ/z8OGq6MfO\nCjT2gVfUK/r8tvNeLfE2wDHmPH6sDd/dXTWcv2Q65TvykYNbvBq98QImGRH5\n5PczMfponJoEsjKEDWQ34spx65BYxCb7qZ4K8g1VPAYQQONzg96FrE2zy3Cq\n4cRVeI7t1icqP/IMAs21I0Obam0jkrYeSuACuz0CWUIGursZF/mgqE52tMrR\nb9yzVUdPvoAhaCBLKiyhV5JRszBUJohkO0tD2cjSIQXFyKgn8I+8bNWTRk5F\npGhyXvoo6M72mVLT51BnUk9RyokFPEHIn6/nmCiTueqsvFItzXw6CQszSv2B\nfiM3PFsAzOlQFqxIJW4ZUENkd3nvJhKyxhI+9rtPMtcLSgY64vneujw7dYWr\nyoUxAJxecfFsNF9fXUke1MoE5ry2J1unIs9kSqMRfwta41WzKMPb5iKoCAPU\nKHjU\r\n=7Xme\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHvEiyx4+zr6TS5Nu/cxt94j8sy8T015tINWwds0VjuUAiEAxdtln4bYDE/i5je/JLp6R+VyBDg9kjRMxMpct2jZV0I="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.27-beta.1_1629253766597_0.08594897111641808"},"_hasShrinkwrap":false},"2.0.28-beta.1":{"name":"ecsite-form-builder","version":"2.0.28-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"0e24a0d66e93536e1bd271623932e312af6ba6ba","_id":"ecsite-form-builder@2.0.28-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-YQ8QI4nQU5WZ5cGMXde5TdapbaROHgbWYk/DKPQXMCxJ1/lH8ZZ/9W8989yfkRck7eKkSWrGz+eymO5GLh9dWg==","shasum":"b505afaccc96dc4fd74d13a5c2a185b9e89944fa","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.28-beta.1.tgz","fileCount":79,"unpackedSize":2890740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHIFbCRA9TVsSAnZWagAAe7UP/1/JZtXCnMMnKKVi/7L9\naPCs4H9K3byVv6s8SNpOVvDVyV/gpI/sZ9PfVdoc3K0PEOWwg9s/zFgcdzrE\nIS5O/xCGv8j0ASB8gdkYiRjMCEpck1CCTVdSQ7Zkf60xJ7kcdT5NwrY1bV6b\nRxdNgozltxuj6Ux8g557nXIn+zhk75WWSkTsd7jPLgtdmo8pSpd7NuxBi3y8\ndvl/HiBawLzKHGmo1XaIxgJ8ACRE8hNkn/25qJpuzSp1ru338JWwSHRYO1k+\nFF87YX/UMhoE6FSqlEio+eeVvI9WO+h/7FASEzSQmtDdetAWsAytObM2yFTT\nqgm/xEBmYK1q/gsLWiNLVYq78S6WnVc0ZpgEsg6G5tjaOjRDlqUwezWMi2Zo\nImE/5i2bL2OMgo56gZy9pjCO0s2Km+kB5/nPV7GlhDYu+Y0G2lLzcnYaH6Di\nfx0A0ZMMS4zEspN7wnonts8wsB227kJwx69GrmnBV93gUJDnlU4gpIvAvSrJ\nYq01ML8tAiTVKZGcOnpedRdgfBpXiqCv4YZOl0WIKmvfCXwrvJXCAGDrq9dU\nJmZgo1zxFfqVQmIbmO+etMSIIGTSrpz6T9wxJFQu92+BRkTu6Xqd5mvxjzqU\nHeo/zqAol6cHBJXtakNyIVd6viqExNcc3NVay95EaHP11Re5EFnWUIFPS4fv\nAR+s\r\n=AU48\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICI/cFsSvGp5UdgjSvbFUwwumxdNueIBNShiLe4F1Y7kAiEA87iGj9Dy4cSNlVRAlqYERU/nX55EHljYncXMTaD8urM="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.28-beta.1_1629258075745_0.15387498767760688"},"_hasShrinkwrap":false},"2.0.29-beta.1":{"name":"ecsite-form-builder","version":"2.0.29-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"49fa86eb89985aa46d09b1fc102897430f62f42d","_id":"ecsite-form-builder@2.0.29-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-NmHb75bELeqo3vOR0SXdWpMsFg1JOrvS2REXoKG/bJM+i2hWbxiTzADm/7fyxiKXVDBGR1mWmpNUYrZw4hP8Tg==","shasum":"724b920744271c51b4033bacd8363b2cc41fbbe0","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.29-beta.1.tgz","fileCount":79,"unpackedSize":2874449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHdVYCRA9TVsSAnZWagAA8dYQAKA86Yn/oIkGS5MYnOme\n3WaLpY9uSyL0N00T6ycIBvcMGMpDr+Qt5Q0JStj9OfyHBNxWCCpfIJRwHSxi\nRFq4RLyuzeZb9p9G2wzJqO5e5kAzNWGg9wxmylXOQGeJAJT/ApUbDmh1DuK4\nMkjGXZJGBk1sW3//pLZHo4rbRrUxWFwf1Sjw8/HgzoxDbK04F5uyTaz8t9/W\nuMsxVfKRgF/k8OYA8cRmfztVwTzRoKveyw2FrVDFMVSlrMdE7P8g7JYt4C2e\n7Go+MV7ULool7vU+8g6xvjfyd1nDlcqB64C7NBrYDqxjV6dfrucTpQ7sKo2M\n1SgVGCGxDR2BfQsRW4bgtifNGuBx9IvYa64WobKGasBl3wj5H/35TyNsrVGB\n4S2kttcCGoFpto3Hz8tiXI5GJEh8UrFZMpXjnMlplJXL6IbQ26fUK96vbVXw\nfyGfgq1MSxRbQ82cH1s+ytxwqigvHWuw0RCGgu8fmJq06Mu8rSJzPxL9Omk0\n1nCfq3O8XYbv8xUETzDyPeZpClU21AyGhXB4Krpa3kYLUm/V8QRgXRconP8h\nXaAx9p3fZ/BYdRQImxWGcZLzsmERxm9SxXVeP1X4xgZVzZm0zOe+CnKG9ypk\n4/qTKZqxYq99hpYkE96p+P9YomPl9rIeNXGH0FW3DGHe/3FuzNlcNCcGj5Eu\nraka\r\n=vDrB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzMGdUzw/9nyFa5o+g2DqkKWzMGcHGPAF9Mn1SoyM3GgIgSxDKrLFrXMUNQeuf5rm/C8sMP8RbFoZcDerXgHX3QhU="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.29-beta.1_1629345111809_0.00720267753333137"},"_hasShrinkwrap":false},"2.0.30-beta.1":{"name":"ecsite-form-builder","version":"2.0.30-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"0c2433df694bb4cc23df67a9ac75a9c353a7de3a","_id":"ecsite-form-builder@2.0.30-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-wwq2aij6Y2BOLDJN7PAPw1/nttOC8D38TVLijS7mQF20AntH5bK1Ub0QaTl0ZgrsUhSGQvBLj7lOf9jgsVEKfQ==","shasum":"9ac1ad60004970eb25fdfea3da9ba7b496692303","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.30-beta.1.tgz","fileCount":79,"unpackedSize":2874453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHfphCRA9TVsSAnZWagAA0C0P/2WzYriJHWesESheglSm\neXBMJYTrh+9uHlf9CJRodRFtgRnmdQaEYhsHjqQxmXKwV5Jh5hjPHOUEeyed\nmw9o+P6+58OEJoF441s/u7baBnzdrz61uhcAhwyTpVT2fFFOY9xTTAfJkia+\n+A3Cr7WB6D4SSr/aqnfOtku1JN9tBbg2r9C1mMjXcW39xY4a1WcWsXAY3HbT\n7ycF7qIk6LFy5I1d/Sa2yLGrUqQ8Q/Hjku0I/gj86UoQb+2Ch4VVqwlqqBmt\n35BKx+Ak5498j/LoFSLiMeorfiXqb6pWQOnQV8u9FX+9v8zrgnbwHJy4L8Oz\ne5792FlYLdghOGt50yHdetUFXHteBMOAj4VX/LFySfb2TDDYJfI1t9I4Ihge\nbqY/doXXvX7gXQcP0z5XesoeUaqPltxQR8Tw+Uf3cSB4VlU779K7fxvecZy/\nzRKCzcM3+Oxm+hGVyZFcgHlQqPRQNdFfGO8fXQb/DCopkKeABdO/X0kLTr9z\nkjxS84JyAFowYU1GZVn4reTdyfmtOVHS6mdkdR2x3hwg0sUAO+rY22bBYpgt\nLHGZ9iJ4wsjnUi0piESMKH+ZNGVL0XfZCiioAypU8ywGOsqSWq0qlsOz5I0b\nN7+u+IakIvqvP4vmdO9QZdrothlMOhcISLwFBtoWhqYPSEOWjzFwrrbG0JCO\nmEl/\r\n=vCZM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCx9wkLwbgJbApNmAkN+k+FIn7sJT3QU2DmmmM23eLJcwIhAP3/KrQzj8w5YTp83lJj+3RTRQZFn4dTtge7/o0BdMsp"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.30-beta.1_1629354592904_0.45263643163370615"},"_hasShrinkwrap":false},"2.0.31-beta.1":{"name":"ecsite-form-builder","version":"2.0.31-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"9e8d2d4a20ba25ec3e768ac51f6cf89db545edee","_id":"ecsite-form-builder@2.0.31-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-dQMoBJ+MpnDIuCTHC1AXf7JSfXVfcE24pA5sgZLh0yyw+V81wEdvXnD6XVPFTCQjxWjHYRURVzaGvhuOj69SbQ==","shasum":"2e9521a448102624324abcaa1603ae2a732a4307","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.31-beta.1.tgz","fileCount":79,"unpackedSize":2874951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHyDyCRA9TVsSAnZWagAAy48P/2qqshS49Ju1reucSu7E\n2PPhGfEsw/bP/CjoxMg2yP4oVl71FF/o0rUKGn07Rr681SLPUg4ATf44Ufe5\nrY3awM0IfXYxUxxQoQvscuLmndGlbo74XX/eMegQjxHgeF6hd1A/8ePYDxbm\noJQbwsm4+Ci8dh37r9iVIfv4vnuiaf8msRM8PavL9Cloz9+fZ4EDglvK4S0E\n8TUhxx6X6m3t7e4upX1pnNWPAZa2KfBQapzki/Bq5WOX179zkre7WFssvQ5h\nkuLkcKXaU8NqO0YS0xodJlhv9UC6eBYBi4wX5J9KhmhbZihGRko1rvcAP2HH\n5NHaExy9t2Dq1zRSZf3qSEPnSWNVDk5Ix6peQixMUon95gbl1NfHiBKO5pQF\nWaU0L/zkbFm4Cp7aHomiIAUhxjjdk6oginQpdpR+mUnpcSg/rS9mcMXqNeb8\nEw5G5T/bfHRZtTAlKuFRG5zc1gLEeQ4LfzNcMN5yo9nnEIJ3WyYTorJ/GIGM\nYpeZ1JWTqDCQkbBLgFKzkeUL8SvekCzvuP9tUvAgNYIbM3F6bJVqIxymWqo1\n5PgbClj4kUDDISLeMnneI6ijJNxyC0SDHUMsdnv1Istpyu/ioevmyfamxXEt\nai2+fVmUOMLkFBn/16M5MaO72cfjglq/qc9bl2w88oUpr+gWrplkOaaJtcw1\nHoTB\r\n=g4Q1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHE2VV0hGTp8aAKCmIWxr7zjwtz0oRz5n30/d7xwz+HQAiBNm/msGLk0VrbkL1hi179T9qvKvJk3GpyLSDncZSEf0A=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.31-beta.1_1629430002721_0.3440968761423895"},"_hasShrinkwrap":false},"2.0.32-beta.1":{"name":"ecsite-form-builder","version":"2.0.32-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"ca81802fea6fc22eaf5b857f54ca03edaa60b7a1","_id":"ecsite-form-builder@2.0.32-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-I+OMGeLtvNhuKQ39JEk64AYHkb+5ZNzIa+oQA8vzAfEcx+BtF3X61WZkXGraNPHexsOdrOheZsz97dNmcHjJUw==","shasum":"e5f42a73af9a011c37a73b786eea1f60aa75e54b","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.32-beta.1.tgz","fileCount":79,"unpackedSize":2876256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHzuQCRA9TVsSAnZWagAAJwEP/iozJsAap0ID2lzLrWBf\nS0dH+HiHhD76lHtvGGh88NhIkKkg5LoERc/ZC589e9JExkjbDpSrnTzHg1Ig\n7OaHsukDqXoKVVmn0n5I1FeBp9aDayx1yTJF1K+OiTnbzIaWlQd3sdHwdbvv\ngJWcaJ4eazgh6JPvdKBR0Glfx5NPVltsPSBS5gsYYd2SIHHxJjynyqb5Swy3\nlPjZA3cjRDAB8Ax4jpQds6RCt4V6KCC9UsEdwnpWzIiQc6GywQ9Usp6nbbIV\nuNuWtWQf35VQR9aV4IboVUkk4G5ukdNPO4HZwDlhEtQbT0jLw8tvBCxJlB3Q\nCIV5gmT61GR9HfKNRbtn5myx3FU8bBAfuJOD+mBv0vVB9EChpT0EZdZAcMz/\n5UtW7QXT/9v5thBKNmgSFoL7XQqIE0ksLSykZ9MHS3NpM7UsuqEmQwPPGOIA\nyxMgyEAPxqFR3P70h1kOn5lUowaJkS6tArmDDDSPWgHVmd6u430WrN1iYTSG\n8Hfjf7/zyKYvAyeCAJQ1cEGP64tvnTXUXyvqqogdta/8fYAUtodKyTwIIQVm\nvOJXiflVDJDAERpxgQD5LZyPwJREN9/2M5K2BFhjTHzIAijZC7Ntds6Hcf0v\n3FQ4vI8kh3uAvVueqIs0Ik1Yt2P6Sl06pT5k7tguVuW/SsrH2WuIRs/qtXQs\nKyLF\r\n=RoLV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbyafzM5FZPGNzqX+WJvbGkQgK+xOR6+JU+EmsrxRXRAIhAPJab0QbAl6tnw91L7ZBrtDiDJA960cfLVz4UHhY3oA9"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.32-beta.1_1629436816252_0.2941674956777731"},"_hasShrinkwrap":false},"2.0.33-beta.1":{"name":"ecsite-form-builder","version":"2.0.33-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"0277632fc1fdd5b6a2f6a912453d689f6d1ec402","_id":"ecsite-form-builder@2.0.33-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-6Ob4gPbPO1vKkFvPE6Vp+0SbnmgguNCHwgsYvPEq9d6cM+1tONfUHJk5qG1DkXT3AFkqAI+hs2nSKay33YC1lA==","shasum":"29a100788636d4bc214ca43d409e86d278c3b923","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.33-beta.1.tgz","fileCount":79,"unpackedSize":2876303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH8piCRA9TVsSAnZWagAAKAkP/3JGrPvoZ57JOCnOOBCD\nnfxU+sPw/bXUbAvQ1kHctoXA4ctjI8de/IGP7ZawY0g2231RhS5D09FU28j5\nkfpi5aPyk7AvtGIbwxnjXUxzPo98KbQA32tzKl56Xl4ON4pfwmKYgoIpgTzn\npy8Oa/GM8eIkfrGgZLdR4sA7dJzu3ZnxKiNKqzE2IRtu8fTi7HuROakHOF1q\nUHk/Jn9bWD6eQXfQz0j86EpVyMedYiVegteQolOYcJsfbQh5z2OS4SRNufHJ\nfksZ5YNLMDJTtws6U+ydW2gTdDGVnEL8PgNou12iBAqdsM30EWN6DX5EGQ7Z\nDq+Dnft0zo2rjuPVVrnL5l60RmdNkULh6jGEOe9RTsi2bz4rZB38AbJJ5Qpj\nRQI6m9gN42vyQOMTlXxJ8BwehaBLwDujQGvJP0f6Y7GAFOg9fBMC0ONIrHM0\n8k4TtZgp2kjo5UEa/Z03V8FZMgwA0Klbl6bvRYWJ/j6gF50w5eKdNzI49eo/\nOa+Bvpm0PQlQVH3K7f7xIH7WkAfyR9M4XUnReBape+hXuLnB9mV10q5iMCjO\npmn6kPJXHSHXWXSjqy6Eb02DYVrv9Hichp/VBigb8ElfDnfyzyF5nnC6GI/q\navSOYf1MpijV2A1IRc76t2WPDW9KaL+zQd3jBHqqTCM30lEXMsPl0cTbNlUG\nEC0J\r\n=Z9Ml\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHEhtkIR3dZ5ntcUMudOlO+o0pk3zeW+2CwTNohiSS2wIhAKQy2gCp7Zb5I0BB0Pway0cJxwV4z7W73ROIEyoSu3bb"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.33-beta.1_1629473377929_0.01792381100543694"},"_hasShrinkwrap":false},"2.0.34-beta.1":{"name":"ecsite-form-builder","version":"2.0.34-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"64256c3dbc8e271d4ad15fc2618bfc05161d2fe2","_id":"ecsite-form-builder@2.0.34-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-8711x2TAcZAt+qucu8tLWl2nJDOFui8iAyKL8Ku5BjWhtQ3pJI3RjQC5hsEwz63+lx6pUOedUeXyR6X3ziMUFg==","shasum":"fd9821b5004ddc315182667141d4e93914684402","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.34-beta.1.tgz","fileCount":79,"unpackedSize":2884917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJJCKCRA9TVsSAnZWagAAmiMP/RAPaOdJ3H87qrFPPUjw\nf2RTw/nJwB/bh9HLULlxBMbd301XauTabv72mbKNDgEXrYq+6Mzsz4qbnQqk\nfB8OdfJTFGsACU6SzC4wagfuspBDtraAvNpicUro+O/4LbZr7Wm37sR7Wmqy\nuyDE3dNEYpTat42sq9DuYAiayMVbYA8uH66sr7+Dgul8CMeSnttlm7A2ulEg\nbDFtGYOwVeJYtWQYYESNoLHcVnkf1J+ltsYZeBnTw0o/ME1PCnTbCPLtdqTF\nMYEfgFdnbMltLaLPBUU39r2bluH/gjLUHT/QyhXPm9Vk6jIVOe3erReCokHi\nRUu2hCOHfOA/m5P7FIisTg0Ii1dkOcGTJH6uONCbFs5OG6kUAtKWzWisIQxT\nNi+QqETK5q6erXmfTFUBu4XZxZkwkbusFLG2NUtNehb7m5sNXU0SeMp+7GBN\nMSPkHVcVab9Xyw3FD1KWvYUQfFmPLNMFRspYQ7OGmzgxH5dZ645L9NL0hOsG\nSmqxV8GxdioqvEZjeo22myoFcas2jbLw6yh1rM3jnzna+OGHF+bXGnhDSorP\nubloVpsLNzjKbfIus6Bo8SnfNvuCFDD13JC1dCwL7/ZM0lJjae3tzSZbkR4x\nKlOupC/rNpdEsetf8zRGTccLBFRyk0iUsrgCPFi6PdpXcaUYdXH5THHn+63z\nvaYX\r\n=s/cd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC748vkjdAHrG26iU3O7eAVz6TDSZH/ZIHIxxXyXxRbYAIgJyYYYnfIuO7hCc1Nbzdy4GP/ISoibbG8EW4rWaQ1Cvw="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.34-beta.1_1629786250022_0.4282363158460505"},"_hasShrinkwrap":false},"2.0.35-beta.1":{"name":"ecsite-form-builder","version":"2.0.35-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"ac47a456816131e601061209c7d7eb8b0063289c","_id":"ecsite-form-builder@2.0.35-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-txfdX2s6uUbB242Wmksat0H2/KlmPcdGQ5tO9YAto0SSTGdcSuGPMoQ3ZMI+K07dwRXFPQSUP82DxyTMzHQLHw==","shasum":"4a3d943b761acab3105c32ee3b571adac31dabe6","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.35-beta.1.tgz","fileCount":79,"unpackedSize":2885522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJccnCRA9TVsSAnZWagAAG3cQAIESEP98kKRPHNTpyTFp\nkSr0H0R7GRN0fssLYN+R3purwL3hwhE8tBSSz5jQdnBA14oVl+Is2k3AF4YD\n8Svn/gjKqWAR+bkQ3InLHmgU3buDVxogCXhmGV1CwdG8ZJIskLIct+6n294r\nnKQao1kjO2/e2Goa2yN/4rP/i3aDfT2vxc4lMx4N7/Fpp/Yk8BGitUZl95TH\ns0g9rSbFhQxBXJu0VuNJatasNlNdQai10ibpjMQPSweMhJj+cIXp/FCPWkfI\nj402sapwObVuMumA13NL1h5R7Vl/0+J3UQEDFcoaHKWLDDEEjgR8Utu+zEzu\ntRFkWTwVDMhud9R4W+hyCdF24ViPfZ/y7+BAYGdh1jc5r7boSDmy5fUsFu7t\nwC+cM2Ee2AcnhJr0hjzCMA7wqA7nmKx8o/dicyJ6zSUugHXBTFOsHesBMA23\nd94yS22mhrrICtJCIuY1qHTBAxJJSN9M55jfMDw9cc5FT/f9f3xjmfPVMK16\nKV2/EbAqvpUASjszhyDJ0YydC+8VqbFwoQE4xWNOpLhFCIPrxUTIrbG/1Baq\n2oqNx63fk5McSf5LuGzp1oHUVsQzgYkfZ4kJSDMf/NJ/JdXfnSIe0tRlVZiM\nazzO1aNipcLtDOAaqWtrzEjE73Fi83soW7wBlXT6TY4CqRv4HmZtBltP9QiK\nqc4w\r\n=L78B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH1t9apImz4rKfBMPsuRmsKczZrCJj4OJxybsye0OWmiAiEA/Tk45Isj2IlLqOAURAZrvV7a9ZG45exvMEdoxGRR83A="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.35-beta.1_1629865767755_0.7860729064816148"},"_hasShrinkwrap":false},"2.0.36-beta.1":{"name":"ecsite-form-builder","version":"2.0.36-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"3ef591ba5da89a1bbc1d36414e62906aa0f4540d","_id":"ecsite-form-builder@2.0.36-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-d5E50pu9dwBbsvQtqq0H9U7KZUmeK08nJdgnmPPxU3VpQ2lI8HRuQS1G9Ff5p/8VHMF81V/Tzxp/kWBVziFbRw==","shasum":"66cd8adda6fbedf41b433573fa3cf125e26529d6","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.36-beta.1.tgz","fileCount":79,"unpackedSize":2885784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJcnHCRA9TVsSAnZWagAArSoP+wUe/8idXOZNOWC4tMNb\ngpD1M7V8L8hxQXlI24ocWHGClxOnjSqEqFRqPstc343ud7zvOLm9GHeLNe5W\nkM74NPHvcPaJe4k9LlQx1Qw98sqjb1m8n/suhscVSWEkKe52lMNyl0r8g4s/\nHYgpF/OaqMf9RfJAfCeKioFI2Ocwaqjktr4frmyh2uHY0nsX65pJL/ksD3f4\ngpIemxucV2EQlKyKR5Ru0oU2NOFpJn04Z5G0yxeHZPS/mIc0gXxJxP1PAzxV\nASC1QpqQyfpaYX08XolGpJdjbTXQ0nCUk93mXqVPGKajnymAwTXYIM6MznrP\nAh+IF7o+dwwJHg7Vfq//dGUBRFw3nxKXqkIoG+LkxsRsWIgGblNA7bPWBQ90\n/fe0VDuhcVOEEN8AeMhEkdhBCV1N9sPr6VD1q9MjS9SC/Sou8HgnfeCsWltE\nVa4qNUEscYjCQl7zHb5VrKG6WqvlOZOWh+GGwU/H4mH7EQxndgX/fPt1EsI3\nZjVChddO4kw7WsuHQ9S8LxzZjQaUM3v+F/Vv9YiUvHRZsuYve6pF51vy382y\nqCgJqUReFuJpCp4WikFbHyqxCvfS8Y/m82zHle1RYIhjT6P5y+1az7vkl7OG\nUF0Q65VO5Z2qIppov8vWccrx0vQcPf30yeXAwM7Eha5QoISPPXsRq7gSmCCm\nA93t\r\n=dd8r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCU85yOIzyrCjn8Pt+L8G9z7BI9VMTQtrrARBOLDNXf/wIhAJdkahZq8UzBeRCRCEy5zn4ClO7GFT/nmCdwCPgBFOWL"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.36-beta.1_1629866438780_0.6470161585497978"},"_hasShrinkwrap":false},"2.0.37-beta.1":{"name":"ecsite-form-builder","version":"2.0.37-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"3ef591ba5da89a1bbc1d36414e62906aa0f4540d","_id":"ecsite-form-builder@2.0.37-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-5ttmuUdkFxKHX/73t71PFlH7cyXL/fQbSHDfrFdi5pbMdhJUgYiqoUbUysHPyQWncYKVeloC4u/w493lUJi89Q==","shasum":"0a2a23e6e8747c24cb7fe2e330129756432f788c","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.0.37-beta.1.tgz","fileCount":79,"unpackedSize":2885825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJc0kCRA9TVsSAnZWagAA99MP/34H/wfcr7jJokFBo0Og\nBAlx10nCMkV27V0WT8d7sWFhROHlcLS5qLp8wVQD8mxPZVTWGHq58GymV9nc\nA3pis5jYyt6m8yWB41WHHolSvEMkwWTrG2dcT6TYtVQ0TtYkM/g9Vi9HKQIT\najqci+CFxFTnLi0JJaxyRzpXReLHHO8CbZTaDFIRKP40o74XhTnOC6X8fQTt\nTABKnyXBra1yqHXUieW+m+ewx8tHBZgqHxM8SHWSVQKc8KgnKQAvAr3bSvYy\nKzgaoRe2iuYXwj5FEjmbJbZsdzlwdQTcWrcpu4nES4dDVogjaSN3Rvfpn3Ec\nHA/SLJk48iE8FtNrJJCqZyXRGSuP70+kUCxGmlV3uXpXafaOwgNM79yrQgL1\n4oEx7XPEQPc67Vs12TKVUwSRGZfUwt6z1TrcOin5ndBTGedlRg/r/eh/ICRS\nSVBG5Qi8Tr8P9eFNYI91pbkZgwhfwYdO24Uoc/2exGHlEAPUZZpkhXOgRP0l\nENT8WY5lafBYY1VO2UYz5QAaGzoFX7MJgYUMSYokueWLM8mMmWwMacqNrfi2\nMbsb05cLYQMhuqFhw8pHuceMxTI4BnXWbFVWSDg9bkSYN6g9ZUZjWb0mxqHS\nn8hgNgg6tpmSysPhP1dxxGPezH9FOK6ILr82/KELisCHtLXKi+AjrByzONEY\nIO2a\r\n=1nOX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFd25HKqy5IfdnyDxKOrsvR01k8Zoa/JtrjQM0t76PlpAiA+ixf3nOuDhKjV7cnLFIHE3Dj11t2ANUXRoRUS/Kkp9A=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.0.37-beta.1_1629867299910_0.25855081302044103"},"_hasShrinkwrap":false},"2.1.0-beta.1":{"name":"ecsite-form-builder","version":"2.1.0-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"55505d5a5e732d8274f0bd7b1e51b12afa47132e","_id":"ecsite-form-builder@2.1.0-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-VcF4OJT8LU8mc9dgC3Ge0JtdRhAybG4ZPVHF1RRgSOQx/QFUZc3CTL1125aLt1qt20eRjk2C5lBE9ef4IQQDFQ==","shasum":"46540584f5aa09b21ef6893891d571d449c7b165","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.0-beta.1.tgz","fileCount":79,"unpackedSize":2891059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKddBCRA9TVsSAnZWagAAd1MQAI4YBxxzQN1PnbHlFcaz\n/mKd+shwIfofPwGtJ/tA8TAS227i5CXKKKQSX5+Pmuys2zrDs/EKpNQyctTq\nJfZC9Kzk42S9P0SiIU0iQyLy3RfBCYXt/6BEKv3A9BeW4ZDl8bS/PfKObSNe\nCTJrb7CjBOYyAEZTSydBdVlBQuCBgfRF5OPEx88L2xxHh8DNwciFX7g4TLh5\n28asM5tB2knrxfCpr9xTlAZrNMvSkaEBW4fTGcqZV/mpMhhoPtjK5vMB+3Xf\nR1yz297m3JZIafrun2VPzTJmPKcR1cXLGXeVPuXCfj/Nwmhssn4wcox6+cgx\n9ph+Y4lHNSw4sqiKmhEAHVEWyOpuQPTCewzQwEToLJQMxfsFWMWsJjHBp41G\npgIkokR6ZR5iG3Y+mEYOAgOxHLr2qChDU9rCVzpj7gxYQVyJvaG7/dVEQH06\nBo4y21TI157MxKb42UkW7L4sMZhUk1qNt6qrsJ5AvQOjpTo2yBPbW85sDw9Z\nnXWKrWeEFVrxj8/4l29UV1galUH57E9pVfgmYsERVh7uAmwZt+Xt9OYR3Aw3\nYB19kpr46cLQyh/qnNbht1hNcPNtu3l/YkkSb8WYmagwKJE4rNoDYERl1PL2\njwrBNrx1bMgBqFisJwGKnOfZhvSNQ44HhfzOfSw9Im7QY0Ycdja7dmUnoPqV\nqUl7\r\n=/4/D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHPBHu6XnIydrw3Vih2PK/jGiI+L57EVtA4/hGk/0RjDAiAiv0ekMeiOFIwJk8t+xGX30JbsTX2WojnYlN755tf7Qg=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.0-beta.1_1630132033476_0.6063661794873396"},"_hasShrinkwrap":false},"2.1.1-beta.1":{"name":"ecsite-form-builder","version":"2.1.1-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"2a1c3d8db4de246fb1d3467c066e31ebc6441f46","_id":"ecsite-form-builder@2.1.1-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-G2pvd9DUZMkEc0iIsJR/giEw/K7LQXw2EKrqWp4wRYEVsRijoMGv6/3jhWzay8TgeJ7NJhdJ0Jzg96POV4sCZw==","shasum":"d9bd16117a49d7629e4bd0ea0fa0fb0cc683a80c","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.1-beta.1.tgz","fileCount":79,"unpackedSize":2890989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKfJDCRA9TVsSAnZWagAA4MQP/AxE7fObRSXlG/dKnKVb\nQD5AXetxS5i94xyZY/Sui5NfXX2kt8gtGxYUyBf39fDrdKZQe4aYasjb2YBW\nc7sXRKqib9QDX20w0mUqAbwR1B3O+D0yG93qNnzCCZcHRou3tNCdDYxdtHxg\nHyY7bWa9JsrVAqkhLcs4b9ps9kr2iiXVVdoJSgMnrhpfP324ac96Q8xkfr3B\nNqdtYIzzBN7NWQzt4Ks1e+wWiqw716S0mXoQ82gs2t+4EcDEqA941WyDxFYp\nk2WwccroiahySV56RfAeLshhrEBg8trHD4NqkWRzKN6fp1Ajl6wbsl3m4MfD\nelVKP/P3kZnRg+Dowazot5A1AgFhWTIdEpi1jTMXFpFYIogmobuxhEDg1qcr\nRlfSUz9oGES/GIZxHaVVooMHY4L6KUCbFDCTqnSYV5HEFsVtoPKK4h8RKSNb\nnKrtgHlv8q8ovL1ORlJrjWTAUFDjp1xGO+vR7Zif660wJLEhLnecf96DODmm\nWKloWNTYyn0XbdV20GzcouZyU7NcEuzK3uCoojS7FaMFSnu1qeIhSLMI379U\nJvInbXbProPeSHjNlXQRuYIpx7aumjE8QEh3uIBRK/ZWaELk30CPtWjq0/1/\nluQ+IUzHuvdGWzXy6cNnhCcyY+mciZoiE5RCIA6/VnEQfdvZomhyHNiebr1e\n4rjW\r\n=TS6/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF9i5P98C1TOf4nkuicrP+ulqFn1VDiRv58mI3VTnBfYAiBt4rNwwveSosTxHTyuV4oDUI4BD2kJnwrD25fhiH6J3g=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.1-beta.1_1630138947255_0.2192211736471068"},"_hasShrinkwrap":false},"2.1.2-beta.1":{"name":"ecsite-form-builder","version":"2.1.2-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"fc48abc9323a44b1bc00bda451bf341e13018c9c","_id":"ecsite-form-builder@2.1.2-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-55vhPrs7g4HyTb6zgbjfU1hYIgKm/JM+OJq9DzeeZ3KpR8xcfw7435uhKUD/FiqxRpCawQyms8GR5mOb9p8Jag==","shasum":"c81ac19d45523b8edd8394186ccfc984fabaa331","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.2-beta.1.tgz","fileCount":79,"unpackedSize":2891443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLF0KCRA9TVsSAnZWagAAoJcP/2qelv8JIghvnS8UP6o7\nsVXXRvq1PWwtflfiTwv5aSBLyT1O0Om4rk35BZoVXH4VwWgoMtNKRZj4hFnk\nDPVKynk/o8F70EKShhKmzMffBa6QwGnZuB1VBGwANja0VwwJq4l9rn/zynG1\nAg/5VKs/tldXmLayJP5l8jbF2Vwox4VxmDmqv6tWW5+ctLuxcTzGZTaLPyU/\nA8NVPLVUugnZITvGvEmc/8uezs7z87/vEIo5oFGNW4KMlhjydyasP/nLjp/t\nsxeYB/pynM88pnNSJZapZis0ZteYkwqLtGnzZXUkBDIwxOJix8cguvHYhC7a\nguZeuvrCpWi9+ACyihUbuC+W50kl8ghpFRegSInMztK3s/HP7P1Bhm+PT2E1\nO25G+Zfgl6XIBmCzkoDQXYge4IU7tNvDoGSP5D6g1qnYmsPoDsoJm8yKrCpZ\nFjouK3iC8foVucNzJbx31jO+VgsreW66tZ54UaXSn6GtbyhRaezspUfr7wJj\nfPEUBs07W2ohAwrGnXR/XaOrOhlLAy8Gw2SQIW3CbOMOJULUkmVfL3l1KWsY\npOcSw/xbPdHu2R1woyWbua9WId46mJ5sVCKSMWJe/fqkwiTXbOvdbOdkv0k+\n/YuiL5ZLDRgW2KC49xHQFMk1gIXSVa4qGHIaIL6OtJcfFA0be4p42aMiCy97\nRQ1Y\r\n=JJ8C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDM30utSWK+fTXRP2Ms9af9j8pGkNW/zEhpRhB1f+TNmQIhALyY3CUl2adZzngdnguX7eDt+vEKOwIBI0ZMAi41gys1"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.2-beta.1_1630297354072_0.763656885610847"},"_hasShrinkwrap":false},"2.1.3-beta.1":{"name":"ecsite-form-builder","version":"2.1.3-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"8c56d16a7482bb53c49af95b64c339960a2e4c19","_id":"ecsite-form-builder@2.1.3-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-zy6vGW7TsplyLTh4obkFfmkxDg+34bFx55hGHdfrtLbDBwEtm+ypxEfemOrq7i0hyiVLe6nNSB+76ZFk/h2dZQ==","shasum":"2aba633d0fcef89c15512276639ade876a0ed344","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.3-beta.1.tgz","fileCount":79,"unpackedSize":2899826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhL3c9CRA9TVsSAnZWagAAxq4P/2jiy94Viw6ueFsyhQng\nEpBPZf3r5cFkjTLxhkG1g0g1ImwKExHxbNQ9UI3LahqKigxL9hxlzKeRPGST\nupd7gBIewgr35kiicM3kGNqSprl/Fu6pqlpI3IanHSEVaBElQF4KTyX+rfHK\nAQQLUo5W957hgB4Rdx93HPX9DeM/F9HY63F6cwxwoTAWyIP9B8gvAgVy9kHE\nJwEw1HFE2sDijJ+HfTWIl2a517/inaov7wUTR/VVoFx7f+w29NgIRN5oTqnr\nPInOJ0Gt9kWYXXp6vuRNdJG3o+fquoz4Oyd2d3TiHT8mlTEpcboTPjOlhXp7\nmswK7VEuKQO5PEqo9oqJvtWQfCyZtSExVtb4XfWPB1tNB/C9lvr7FnCRB+wd\nf2tyIq8alLWS/LBpFn9YkOdqi7BYCSt5rZwZB7HGuaximyfY+4U+O9Jztbn4\nrx+izfsxmfgYtdhINI4ULGQQShK1uPpiO7OydkusYn5uKZH0ZisLFovNXDHF\n7bDvI1LtW9fj58Ea+ZT5f+abxx3VwzOFQd1YM3EpD+eL32sAyzwvqpEI5zev\nDzBW90OxS56UWXTRmxZ6px+wTQAwsueQVYzMksKqtlmo6tL2rggEAcuZBHem\nM/e3zBPNRzp/m+ZJHU5C+nqE9gtMysdVZqKpJbI4uOwQX0bVnihTbfLsft5G\npy4S\r\n=/9in\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfl5riblEEXi/rBGJ2meZSZGfMr/ChJ2TjXjgn/fzcbQIhALi54lnk40UHdyaFVeJ7P/6xTWqYLp0vtbkyAhABXPje"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.3-beta.1_1630500669138_0.6503598899878378"},"_hasShrinkwrap":false},"2.1.4-beta.1":{"name":"ecsite-form-builder","version":"2.1.4-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"71de74b522db3e9a4581bb8610d4497f53e67ff1","_id":"ecsite-form-builder@2.1.4-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-cyw65xVL3n2EKnt5r5oqv5HtaVZ3KfHaxr3I/wMZfzi40AVGtabAznYPILmff5t/SVweNLx88Mhi7WpgN525Pg==","shasum":"4c33524d6061cd2c2a452222b1d1cd5e38ab256a","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.4-beta.1.tgz","fileCount":79,"unpackedSize":2900229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhL4JOCRA9TVsSAnZWagAA0k4P/A2uJaj3K2B5P8KflbC3\n8ykA9FnkRSbH2eTNtT87F0Skx5Arpt+eJsM2CO7qVZxSdmc2AXyUDcrWTK/a\nC85ZpqWlSVTFSsxisT5aWOJf6DUwHU7gIKqjjNLoyCRFiF0krPcLcITemwan\nci6ocMJazHIszqeB+WR0BDiRDDuKElbQKk9eV6UfZf7K82dewb92S7BE0RVA\nUPre10rsZ9gEu6XX9pmkEO55J8isJriy5wgrL1xX9lNP6C/0sLZTvpQwlwg7\nuHT82zoBz0TU502Bw4IfTbjDhWZRrG1GG9LN2lGPOm+x/eirRde1n+fJW5L8\nq1MnrZzI8BOSGUyu1B46L5vz4h1efWeh6BhlQxIZQwzFFE/cvLKkMM5oMr79\nlsOEVA2U2AKw2ZufUUVaUexOBgdrTVvsehKnF60vekE0w851xbpkdsWk6qRx\nbnhQNvI8HtMS0ovsHgxXxpBpk9Cucx5fuiNX+YME4BcSzpdBc/GGU336rYn1\n0gfOOYHIEa46jCNMBkt9YwZbj/4b3rYGTrZstay3oEknQrE6bnHe4jVhaX3r\nET0kzjvnY+s/s/+Shx8upds+zU9iaogNQnRU/2CuV0QFm1opoCFF+7oWxKQA\n2rQ6VBZjTX4UjgWRF8yrWo4OtE4nqEAa9FZhuKOyvt5a2e67GL9UuLubRihg\nNZXh\r\n=I7od\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJ/t1ffMP77f2UsvefbYt6aB4RVhSTTZK5qky+yYIfjgIhAM0h8buN3+blmps6bETKydHhqrk2gaGwCZeVNb2lqaPi"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.4-beta.1_1630503502556_0.1424059131514388"},"_hasShrinkwrap":false},"2.1.5-beta.1":{"name":"ecsite-form-builder","version":"2.1.5-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"6b06e35ba1c4a362f2960d5084dba3cecd1cfbb0","_id":"ecsite-form-builder@2.1.5-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-qnWfiu8A+gVMEsx30dWVtuXhPsCnh5EJMvKujBmUkDfSNy/+vpXxjIQCRdZPcqD8edN95mLJuvSqmg454GVjDg==","shasum":"2aaef84b533f731b0a45fba4713a147f8d804337","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.5-beta.1.tgz","fileCount":79,"unpackedSize":2900313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhL6yuCRA9TVsSAnZWagAAsvcP/Armkb2OLT/CgG6dGa+2\nLy1h1+Ri21N6IGl7jk9CFc23j8XZ0f/SYHBogcHz3iW1uDVCp20v/33Owh+m\n7JM1Rpvm6JuEOZKYwACavlYJ/fkpXqkW1XaFEDhw/GGXrkkBGhxtL/zAa99b\nfnIm+zZ68uDg2LnNPaSMtr9tSHhCYsI1tcPZO1IS0jRWKK2xIDKYR5HAmqca\nuXGrFFoMeoSpLCSlUTyvh+HDzMo1xLCwnj/dfEaTNp7+IhEf/+y+wW0cg2BJ\n7aEL86O6NA2rfzioogHftaG6lIMeqcmFUiHZ2uoThw96ZhfhHmcO1c6IfLOT\nxYgXBI8zbMKWzL9jEF04wcB2cKZOY//d0J4oRb9vNpJFjB30P81bhE/Jf4zC\n4NHFKi81PCfX0yi+9hvPA3uimOj/eTwmjqHIOROEq+y71z2JXF9G5HF9sAwj\nmFlkuuHYPfZ9gQLgb6Fbi7wfSJ/p1cYBNEsbzOppMShp5EeNCK6XErjxMJIG\n2vWlFL6/pyT+wshgYQTBceljxYJZWdfD3BInDwjLXUyhl9hzxGQcWlpVPY/9\n6dUZHA+NH6NbK8cJwIokEhGGXNuVlWTm7QejsMbLIDRejb1V1Z4AqI3z4Mky\nKIIUQPlSBvtg4QSDjMPyntep3z5tH3t9ddlOzYe9Czd6R9iZ9S7anBAFt8Nv\nnHnY\r\n=gDWW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB/mWgfPDDdH9sa0w4g6EMD31rC1i+zK4nD2Bp5k3nopAiEA+mrUpfyRWWjlbRhYHImkBRJwjPimR0DlqJsjbLLh1I4="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.5-beta.1_1630514350585_0.2689341290460807"},"_hasShrinkwrap":false},"2.1.6-beta.1":{"name":"ecsite-form-builder","version":"2.1.6-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","google-maps-react":"^2.0.6","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"1fc7223fb98b2528a2fb0ca9b8d58d9939866486","_id":"ecsite-form-builder@2.1.6-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Gor3Tmw67nIF4yyhPyODl8B2v6f5yfbgFTHqGokUnubTDdR1o6XYcVEaxqaLedAvEEAuWdR0LSgL+jKYZU4Y9w==","shasum":"b9fddd438937e3d9fbd5d7f2a36ac4735c21398d","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.6-beta.1.tgz","fileCount":79,"unpackedSize":2900775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMEDSCRA9TVsSAnZWagAA658P/3gs15cuesG/smSGEUvq\nC81D7q+Rh+rrsYW+ablQU0O/Ns1YQdc6dVzvOOF8IiuN5TDAG3YxMzRtX1ln\nChy/ko4keIUZhcZSXUC0oN3lL5a8S+A6OOr3jUcy3T5vgshOyHF+obdAVRUJ\nM2QcHqKAfb0jkLtFuIXb1sRAexwbT1cTelHkn4R3V2/LNbgsJBaBBa+5XFf/\nW3aXy8GzYpBxi5KXQYpfuRpwmUPjFvXgMOiS8J4/f9Dn/2bqUZqlXvYAoW4S\n9b/zvuklTXIPGjuT0gPAfcRwjtMTI0HCEbeVMRRGCuoIVnmhOpM2wfjypyYc\nzs05JHMfv4NBxUX6DSRWbSQIYGr+I83gFnY24lDjaeWo64T9GZ04lljLOc13\njG+Bj/A879uv/2fLQWDY/ScPFVQIu7xi2DjmAvUdrPT5W011DXLDfsGAJwIB\nEifs9zxyMXKxs5cdMDppbcXFiHrqbTMH7eTpzr9/p8nrRkwQxHejPoB7MUuk\nb/P4JDEyGVs0i407Ut6zbTCkISQSDwxmoQF0IqhDpivuV+Rmw0VHF0XOCxGg\ncS73sdbsw423wtpkk/G9NPywWl+hwf2C+ryLSxWfGgQjol1g8uSCwrwYhfo9\n5qpCAl0cePPlHCjq1ACi+OeggpzbtfwLgGNrUxW0PNZRGjz8ucsWG8M/DLjK\nhk99\r\n=Jn6L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCj1e9VjI/+MugjBGkKkROgJEPt5/EIk0CtCpY8JmW7GAIhAI9/MSWEpWeli4ylyLe9UfirsFVO0nIBtKFM6ptIHxbO"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.6-beta.1_1630552274017_0.9611284256890145"},"_hasShrinkwrap":false},"2.1.6-beta.2":{"name":"ecsite-form-builder","version":"2.1.6-beta.2","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"4897529b2a60d912a15f7c0515252304584e2952","_id":"ecsite-form-builder@2.1.6-beta.2","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-thvfr2gmFbf86cenpejDUy47kOnUR7k1PPBVYbEQMldSjHVN+DMet2iaQf7RU/K+WKWMdBwdUAymQms2m3nAcA==","shasum":"edf1c1be6e0fcf0443f9b827c9fe36d4ba096214","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.6-beta.2.tgz","fileCount":79,"unpackedSize":2906074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMZc7CRA9TVsSAnZWagAATBAP/2encpDqYpWw1NYlIN6Z\nao0XU6BPJLdMDbILeWZcSTK+YKdm0JTMPedjmAfiu8wNc5K1ZYteIhCcgzeg\nh+umGeq2m0wyuk9XutCMsaJqDLW27L9pt9kIm6mb0GjeETq+MNsxTdFx2Fpl\nqET4ZXJ4JRiSghRuicIfYSFVou6fk4ZlRYnSyJ70fnfsUSzD7qH4/WGtlGo+\nIam+ZoWskJX/0lLVa81p7VhAKZtQqQh0tTJ5cMj3n+mK33L254g/uF+TyhPq\nJtuBBYK0K7ogJIKaBaicFrgbIGofwgBj5EGc/vEbxpjbkUQ+GWgoJM+MLq7u\n6Zq/hzuWMhiY8pZG+Y09EJrXr9Cer72UMaRlOuUdNnOOVy4uMCWV/bFUzcJZ\n/tW986pep3/kyfi78yeueL+KVP13CJ2TCyeCIruYTQVp/ffsWb/0GCICa/08\nzlbHUqZw3vWY2lk7T+R4cjaQTiPZvseD8OdnBId14DdeK2TimLth+/Isz52F\n4xVeDipijFhiEsbnhOZ2ej6ykLl7c1D7fxD8ybR+KuhnVBxYP4Rp1rCjypQ2\nMqIr2yMXyzhFJ/mfikV/vKh+xeQ5sH36ROgLuRk1MFO44NBY9rsT5y9Albl6\nLOI62FVwaTh6FmqzGMhGAwU4TmKhWuJFAKNpFOdKy9knIc8DojI8nrkFb10l\n9C5j\r\n=c29r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGNxvgacvXqnD8QDBGhG3hBNolJA1pb9pkd4bRFmqZL4AiAFVlkdLf36c4MtOb1+o2thR/TXKz8xVLZrtDN029H6cw=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.6-beta.2_1630639931094_0.6800748896592423"},"_hasShrinkwrap":false},"2.1.6-beta.3":{"name":"ecsite-form-builder","version":"2.1.6-beta.3","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"4897529b2a60d912a15f7c0515252304584e2952","_id":"ecsite-form-builder@2.1.6-beta.3","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-rFMByJpubZrC9Y1HdgfAkRiqaq5S5JIRL1DtAiS+HAvDSVC28E9qq/t/yaywDF/B1zT/9DO4gLNJmPMcbP+gZw==","shasum":"f7f91dd73b8544412adca124918b7a3d824e2513","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.6-beta.3.tgz","fileCount":79,"unpackedSize":2906066,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMZzKCRA9TVsSAnZWagAADjoQAKPi5CZpfHYmhp+YDkqE\nDDY5i9BhrDN7sPZulfZ3qy1D0/PF5bMTOjiUq7NVosOq3oeXZJ/j/P+3ZeLK\nMGmGiAajjhi/CvIZj6jM6iSbBVqvWEXKUI9argadwm/9AHuKpS9Ez1zait6y\nocfGH4bbiNnlImKlsth1Aj3zTA0cdSQfXPg8XQ4LgSjewmPW7DKfpEZ7A8EK\nTMLHClh1IbI7FmLujZaebUv++MnULlx0FzpeThEGAXZl5nllaxls2TB1Fo5U\nVdDQq6fZ/u4w7zzLReQby6nMjxkqV6oxn0HJPSW8VeUXriQA7xzfjgK1eEp+\np9ka7aekNU7z1P/ycCEqZsPr9MU7OYnOw4tznYenYGC6IQ/ke6mUC2oQlp2d\nVCGRtOzkU5m+4T15ZKKfHMFz+F0bGhOJOq7YeuXcLnqdA9I9g96i0bZ2vY+y\netltS8mpnfZEQcIL4dhxw0OUPeXikSiptcH0iWIhUJLJPy8+p9z83LMmeS6e\nJ8MaPJBDIJHLxHkt8ZspHWgPrLtE7RpOKIuai2diqj6FcDFjmLBU3PUwYEB5\nOC91TnU7fViGCHOKMq1JUCFPk2rVcayOTYnKp18qt1h/uUak36bBWe2/ReoT\nxfUc2niemxS0IDjHGb7dGJLNbX6xr7vWva8jKu0EicwJ57h+h5uDR2nvx3jX\nuERa\r\n=ggin\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDtoCDtwyrH73m72JNnEhqxhl/6cBaM660HpbZUoCVvoAiEAsrGNW/JjsbOtbnCVILxz8kX7w/rmWfglcx9aaR24Gxc="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.6-beta.3_1630641353913_0.18455577348122332"},"_hasShrinkwrap":false},"2.1.6-beta.4":{"name":"ecsite-form-builder","version":"2.1.6-beta.4","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"4897529b2a60d912a15f7c0515252304584e2952","_id":"ecsite-form-builder@2.1.6-beta.4","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-bDxOq+5TqsBDkNS/Mlmh8gu/Q5wsgBrqKzPB048Lo/r1TLtjYfBPKXhUeovfFyY23Y32LrlZDno2jctkAaf0FA==","shasum":"78752b69d05e71045debcc288b8fbd7ce66fc3f8","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.6-beta.4.tgz","fileCount":79,"unpackedSize":2906023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMaStCRA9TVsSAnZWagAAI5oP/RYtwvMSfPmqOFhKsa2D\nc54h3KWBZXp/bBJbi0sdg0IDFuO2cKYmBNS1ZYRLJ6Xc/mYUhlKaIfGOGb7N\nHMpPYgsR+VMpE22L/hGMdqpwzYPGhxKvTqWv+AJ8MW8n2zrH86zxRp2AkoEX\ncMMjbEjJokFlIYdzxpa0HVrK/LHxUKDULwvcEifpKqLa30D3+HqZf96XFGuZ\nzIL7ga/ctFBtmGJoh97ko4yDFbZnfQ7IjdGPxzo83/7F6td2YjvNzE4cI1uz\n2OLZW2PteY3/PgzrfUplyl/gH5ltti9ZNJduHPaTDytgkEPAswA78zo6TsGt\nw9qep3G5P8iySZIQUe7aJGpqnjoCVqz9Gri4sq2tnge9I7rPE0vaehidckHL\nZVGI66MLCIZTTWQuJt7rMyT1SHoREcqs/8THa2uPu6hOhNlL6GbjfxMacIvX\nw9zMv/oGJJ/SLmU0c4NrMQWAQ7+Wit/NWoVOlJYgOFJVdwlBhFkKKJvO28iv\nD8FppMAakx7Wvz4ce2824J3dXMVf5Eh0Ly76Ttu6+Pvnv7g9UsbxqbXQNa2Q\nitFFTWXoDaHn3W/KsVhA419mH9nm6g+P0Wsg1upHPh/6NNVfgxX4nsxQyinS\ncaozEjqzM70fCTduv8Yo2S7hDrYKL5VG7H7vLmTtLycZWYIRF+soIswZ5pGU\nl7T8\r\n=tgTK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICUqRZTPIvuIkzfAr57LJoz/aBaVaJx7AgI/Syqj7/YWAiA71EbUyAVuo+OiyiOb7rv0yjoAXiGObOqO4vNv1IPQbA=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.6-beta.4_1630643373651_0.7205227695882737"},"_hasShrinkwrap":false},"2.1.6-beta.5":{"name":"ecsite-form-builder","version":"2.1.6-beta.5","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"4897529b2a60d912a15f7c0515252304584e2952","_id":"ecsite-form-builder@2.1.6-beta.5","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-hyd493PIzbDwm+FSQU7YVRQ7UYSYhA63C88pe50ESFINovmttzESlm455qn0O/4avQCbcwlh/X9VqC382No0sg==","shasum":"6c32a724a64d98bd2f1f0d447d2c376e251c5a3a","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.6-beta.5.tgz","fileCount":79,"unpackedSize":2906163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMakrCRA9TVsSAnZWagAAOIsP/3tC1KtysnOurH0p4kNQ\n1rY7N/nPP2UrbWCRAZsDP4CSsJigU4pug3Lb1D9gm8ZoLY9ACnLhU/CgdHgE\nevE3hsvv8WH7kgk1ja3RTvtiLRiF18Tk7U3rJLVIFscxkkctn/+d29j3f3Zc\nErtU9APqR8gRDtJry934Noz9nfZGtYE0nAILLq9KwSZHw5Z4KNEbFOnTejQg\nY3FFfgRglZxCMG3phL+/1pTbxCM0NFOW7ynyJlSPmVRkgd36EX12W4mI1vPi\nCPYaFgA8NrN02y6EHULaEKJHJ6MCBscX5hw/ZOEQwYgrdKIznxtAkGA7w1Q8\nGKIZR4Hp/kOxICUXg3Nmzp/+kZQxf1He8PPQ+rWsrOSIFVIpmqBpgkBWVNCl\nwLAiJvFGLw/ebEUP54PSu0uQZNMJ0oZCQmLLusuBdTfpeY9Qlif0KFKCY/QH\nKrAR+a1Q/guAG4T5/wg4D1nSoykMh9nfAGKhd5tayNwb24YT2y8+zZW1INf9\nufMv+Q3tY68ETf0y3mycUuFwsOh43K9wztXoTOlODW9EP50EyK2oOCtkWcV1\nIIzTEWc4k2WOmNZqp7qbsKaX6e7TGLK5Tvi2cSnPHSeWg/KoVsAj/A0g/mKH\nDJHxI4ZdTpiSdgde/Dj6KeQTa1neZ0pBM+NbFAvHNH60pEIRL5j+z2LQyOLu\nMi2U\r\n=bl02\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBLzQwp6A6ziZ9h4xII4oriuOcvhqGlLHfkdC+sLJ9FCAiAwMvAVyoOLV9hYHUZ1747ywlQU8ngD+e57+Z2ypPt3UQ=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.6-beta.5_1630644523063_0.783186688765114"},"_hasShrinkwrap":false},"2.1.7-beta.1":{"name":"ecsite-form-builder","version":"2.1.7-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"4897529b2a60d912a15f7c0515252304584e2952","_id":"ecsite-form-builder@2.1.7-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-CyPD+SiD0fJgJIBxm0PWPLjCyeEWvSKcN0hjBhtYn5T5aQagVKSbXQsXD9DVnTSLHNaE3KoUJvM5taElVTQNCA==","shasum":"fb5aa5c61d1311d73e6bcf5ebbff56d60b71d867","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.7-beta.1.tgz","fileCount":79,"unpackedSize":2906211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMa5XCRA9TVsSAnZWagAAe7IP/2vScipfz44KX7QIPVfH\n/OLaYRUP+IveQBPfnOp4S3rG8Vjo0KGqeaOJ9v1Uhu5pJGRJKu8DW6ryHcUC\nUZYiJ6Y6WedHHR8a2g1O2o3vSLX9rSDPDmrK8rn5wpQAvvWp7GBjZZSpBGOz\n+8SJLAazCTjXvW6ULbCogu8p1gY/cLoHYcyGfGWKbiiK7wY9aYNQzJr+TNWP\nKaVfokT63Xwu08CUGVnOBbjtnE+ITQBNimw+JEd4eB5UG3OPS/N2Rb0zgoDW\nTTM5bEZH9u5C5XTC9c8laBITj7+du733RT+Eg3nzPVR0oTx80fi0IeqEQSFP\n6LkicXLZMDKZODbeFClxFQOGTmzfH/dR3yro+WbSqnEju5CPicpT49hgoGTI\nO+OiI7VtgBhTX0KK2zcGQXiIhey6jvqtXzy7eikEyiu8DGQnfdJqZiBJJ1Gf\npsbchDvbFVapM6Av+3yyz6jdBVW57Dic/VvwomwdYYW9aPCpGlc+jLIiA85+\niTSY2TqzaJogyLvRXycN/0AQxdOTrEoW8snqzSYuYc5xk1+0S5e+pGYRhKkv\nGxo3Ifk9ov58Jax8b4+PYek9iDuU5u7K6RS6A/d7pCQ7AmIfZfa+BMccQwyw\npUxELIxQt9Lcd/XLsiRskJaP6emoDLECvTKkyjFK5TT/by0MDJDkObvCgnNR\nFEMm\r\n=Xisj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDcSU+famDw4HqpJuDLNmO+wFI4Yhult7UYRwVx8LVGjAiEAhzKM89FdQkwdJBCv0mViPH1fZV9UTU5PwOZ0327Gpv8="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.7-beta.1_1630645846904_0.6127295217428852"},"_hasShrinkwrap":false},"2.1.8-beta.1":{"name":"ecsite-form-builder","version":"2.1.8-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"0f64488d42e68993ae73706e7fd3bb0ef0470ef2","_id":"ecsite-form-builder@2.1.8-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-mcme7O1eYv4JJFPq8d5O/Pg7G0eDcLaeqC0/z9i9CyNOPuUBy3g5xDtA8GHVQ2inJz486kaoYq9WIlaVFSNaig==","shasum":"3bb4e7f0eab0aa6ac5b1472dc7bdc29f7f9baf12","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.8-beta.1.tgz","fileCount":79,"unpackedSize":2908847,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMdqjCRA9TVsSAnZWagAAGAgQAInw9COra3AyZz1CLnHh\nQiej7UKhJ4JOpHeTKW2xkV//ae6KocLUY7A+SeldRvTHNzD670D+fGlWTV5H\nSIaZClG/5vARaKXriIvi8Re6rbt2WkBkbfSsP7MVsFnhTc2NHoxInap9tnh7\n5invCgohqPYV3EL+fqA4kvhpEZ1cP8zPQUnxa4fEFr9nGHsvkssNJYch1ba2\nStozGVdRsWkQ2gApuh6lG/23YEIs2uyJPm7QTTlJdxnLwM1+eolSfSGLJTHv\nzFxpz8oeu7LiwqzWwwtNhjLCSXkN8ZhPAhD67nUt3s5AgSfQVLCo9XpVqGKT\n2xGgWEU5mAHkbul7IiTo6iBiIhYwlpzeRMHEL9R5gVI3ClJa8M8+yvBOLfZy\nxQM55N8MpqeKs7+/A6I30V4jFXap6ZtdnMiFaWjoWZyBHVQi6tJ76vTnpmwH\n38JgWSf/zl0V99vOaMD58a2j1KoC+zfhYCr3bJxQEvWvTMl3aaZ5tBIflMVM\nZ2bgSCbbMzD53j66+PwAEc3aGT/gl1y/PNx4zWshbStgTupMAPIcknqyxrnC\n/Lafdj3HazY69KzqQ1dJGgnidqXfxVnuwktqLU3PJVVuPM+vAsMRtlrc7WwO\no/Zft/cwJSEaKh7POPrEj9tX7zzttaVwNFHSFDjTiSnUn4sORAsI1Wmsf+wW\nXq6S\r\n=yuu9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF42HQFh5kzK3g3EYu6ivG1HYyyYXXUxNql3XXN4CRa5AiEAsSoFjqL5GUUxUeSxt52Y69roj7CU4YPynf9ACdI4p3Y="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.8-beta.1_1630657187059_0.8331351312579924"},"_hasShrinkwrap":false},"2.1.9-beta.1":{"name":"ecsite-form-builder","version":"2.1.9-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"f3fbad166105fcbde83fa5b8a98649233fd4a316","_id":"ecsite-form-builder@2.1.9-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Kh+WIXGKI7i1q7hQVCQoE7yH7i+Ab5Nq/3JjltXVb4qy3FOvfa8U+racar3b/wrU9DNKeapGyj5w+IBHdj4oOg==","shasum":"2000f501f0c3f063c82a420d56622124c1a39986","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.9-beta.1.tgz","fileCount":79,"unpackedSize":2907879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMtwnCRA9TVsSAnZWagAAczIQAJfEf2dA8jJyAIVZ9uAe\n0liBhDPkVYaa5heaIrJDlP884QCBc6KguEW7ezLfSXehB07gYQQiEC3sj17E\nQ+L66moJEv86C1mBK/3UWFJMGFLUdaOvZ/a3x6hCyoWQY9njBrhorSAaRwQU\nmwzxKl8qmtrHqO4sAr8LmaXRhp2hXacH7ZLRQDaSowdXdPgC9NlQjV+ZNYe6\nTtMayOUfWgNvYN30WqbBQ8Tip5RyJR9KpPZFFcEvSB83dGAYCt6ko+UGxU1w\nhXNIv/sUyy+67pwy7rwhdF71OF+88fKUu7LbaMsZMAKv9ETZDsfr81qGeu/4\nVMi72C2loWpdvx5wKtl/iNIJGcsez8uAcUeByN8uuT78QcAhbPcLFFZykMUK\nl6gEo/UWes4e4thUBJaDEsQUPcB3KWNmNtdbxmCafHytjE/bQ9BT8DEJOZjC\nspSJJzSd2zCl51VdmnZ7LQsd2NUlLlCMk+K4Jmza1d0BKcu1I/65EgA21kH4\nissgVIMZuMkztPtafDmb5O+Qp5cQKE0mZus5JX2Bi2irXWyajO5duPB84mpZ\nMZd/6D0bAQi739Ep/4bv76Sa6bFwQBN+3mqcofLTbncDxmWFsgNGpZxOQLqQ\nSWgyojni7FdN0ELfPzaaRFr+rj87x6vTuHNm2ytJ6KBQNjdjnvk/V49/R697\nuHpy\r\n=BoaP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzhGkRSEI8aI9li4Czcb8P5U7yvZ5speGqq+a7EygszgIgasIzuWX2fVFezW63qOR974BreaSdy5y4VdE9KYsg69c="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.9-beta.1_1630723111643_0.011143955522362248"},"_hasShrinkwrap":false},"2.1.9-beta.2":{"name":"ecsite-form-builder","version":"2.1.9-beta.2","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"f3fbad166105fcbde83fa5b8a98649233fd4a316","_id":"ecsite-form-builder@2.1.9-beta.2","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-s4XS7+dyGCc5NIJp7Z+jW2W31bClcOZmnaEeaWViscwScDN8kWjxLr5KhPApiY0LO/GCIry0Eis0I5GSxuaaUg==","shasum":"c1aa35d6c8863a9e8d1ca2c53c2eaa011f219718","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.9-beta.2.tgz","fileCount":79,"unpackedSize":2907767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMumeCRA9TVsSAnZWagAAHocQAIVydkovmQ9rr0uzhbjx\nUeQLfHDi93on5x/WLtHqJoorSibXTT93yHs+sGddCxsJcoyg+ptXF4PjGlkT\nHNi2M79rjGU8ybqj7W9QXtsuI57KSiQtcl15otVWtDvWxTlgyOTd3fbaA/rS\no8PtmdVUxPYIdjbadqSmS9xs70NdAzm/uC+u8h2PP1GkpkZoUSU5JgtY+FqY\nISOQs2K34HBelUK9lrSIfQ3ExQ6W6h8lBj1OZjTBaq6QGFpdhHcN4uCNe/9U\nfAqAZjucSbzX17xSv6doIT1R5/71iLgmmabg8E0fQg0mL/U6wsI7QrSgqZxC\nBk4edZ6U7yU1lrufVpne6r7uRXZC/EPi9DccKA5kewPaHI3q721bFGB6OduM\nw97L+k1/X2Krm4IDwzmMoKfSBAdEPHNh14XJsCTvcbQu2vgpO21yIOaryHPU\nnWST0AYr39vRJcNMmZI5WpsTNKobU10Yfi/15Ij44i5NP9oy1lp9kGivwUN+\n6jnAJFiKpBH3W49/y+RzoKlKcAJsNzZI2iQneMx5m+iO1TYaEsGzD/c7UQ5s\nYCJ232DvBhahsdibvNJXDJzEeDMcXQV8ex2IF5N7FaKX6ebXLHwJpdqEHI0M\nAVmZdQKezuMqTdMmhdkqwzeBbx1wyM2ydSKsJnUVD5ZOBJg3RuAgMwUPYNVh\n0yIU\r\n=DNaM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeeMdrdB827TVKhZMqZ1zT5WtIn5xuBB5lbJtIk4ENTQIhANkPdZcuNqWXxqSUv6SJF/hL5dhQL4KtL1jqH3vsr3OP"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.9-beta.2_1630726557978_0.37547372616856944"},"_hasShrinkwrap":false},"2.1.9-beta.3":{"name":"ecsite-form-builder","version":"2.1.9-beta.3","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"f3fbad166105fcbde83fa5b8a98649233fd4a316","_id":"ecsite-form-builder@2.1.9-beta.3","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-YzVlkx1sSxz6yKfhohQv4iVwN278bsY5f7czuwZzC7WjgherkD+VK69b0OaFwgcDzhyaw8lFyeIkRFdwrSr6LA==","shasum":"cc4b6293b0095b6b4f1dc05e64fe2a0ea826385c","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.9-beta.3.tgz","fileCount":79,"unpackedSize":2907788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMvb/CRA9TVsSAnZWagAAUHQP/1toRm04b5Zs3LpQkE4C\nYoIkYziTSBrGnVBm+QMVnrIg5yGUNwai/sdEs5MknUbM1Gd31ZOMVRDeCb+h\nw3xSb+E3Mjs3naO8ZWc+RA6naYJpZVhMX4WiigfSPAk0G/qIddwHxEnCtIEJ\n9ZQn07MkPtt/f47ILirCO96NpwjHLvmIwIkmY2NE/8pFNRdNLkHHZemR+1nN\nSGY6T2FX9j1/om5/jr4dgbWvnhO/K1dTmTtXKFr9tXbzoKlEK/cQ/8iVj95z\nGPIPJ2/VdrpC+AkN+iGZNjmmGv6E9nQlhvhOqkoNjpdnE9zcFsi4lMT4KYYY\n1bJr03hi+/y1NRPKu+2MLKOVisVYG8UMauK3gHepihd09DJyx5hh8fJULW77\nX1Ljyo80iqloYq0KJ0tL8pEmrhN4oeSq26EBciw0TOQHK7lbqKDto8xFJCQ9\nE9FXGwPOT4i8okt262Fv2Xp+7vJ0PTLWjQsBfs7C5tAjZ+z7twhqkxl7noy9\n+yRphsM3lQbaPEAAzyZhNiWk1nh6oe0k7f21R+xv0ULblkkM9lRnWdJiwSu5\nor9j8pgM2DSsOSOPahPrp+V7P/H6juHjFsSmvLhkQo/kxC4N5jkSSyU1LQOl\nQ8+H7hYQ86GZbRyzkQBeG2MSbLcF9WJkp0XbUCd58r7eCnWRdkso0p8Lrjhn\n8i0g\r\n=KoSz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAW5qu7nI2wc6+j/e7BkMDUfP3iW8R3DiySE+P0DMdEWAiEAivxtgfwPXFWnztcmXLWtBLQxwBbJMT5MEWoI5MdQ4/w="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.9-beta.3_1630729982926_0.4821755441809761"},"_hasShrinkwrap":false},"2.1.10-beta.1":{"name":"ecsite-form-builder","version":"2.1.10-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"3c0c68a133601b83bfa0179b90934808d19c4438","_id":"ecsite-form-builder@2.1.10-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-JhidQdVxDKqJRY/BCO3IoZiZGVnwJvsuPmGnm35pDwefIhc8d/nHzqt+alK1dVzoKlQ/5q7TLjKpSFVUJpNv/A==","shasum":"e7129c83eb54fa7efbe31571abae38c82633f136","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.10-beta.1.tgz","fileCount":79,"unpackedSize":2908126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMyygCRA9TVsSAnZWagAAh4oP/2e52NQX3Ey8HenqIQ6s\nKa7Fzs8Dl/irrkDnt7ZLIoSqj/wM1rq7EZcew3y9Nq/G6QtdeQKwTxkaPSaH\nAoh3WSg2DBzfQXW2Cv0RmHl6IGOnC3hbTTRxWNZBmxwZAvyRguOnbZzt0zdZ\nO/ULohp3HCT55jkC9gUGBdge6Eu1wdR2nuEc18Qvk8wmO72GjC1iHldZ4ADG\n4tRGQvdMjUUaPEN0D+B2oj38oYr3hkdGQzbW6sO9kAjIIH/8FsdpwBj318/k\nHe8ddOlW1wvyrX+5tVK1AHsLzRpbtxI98jYxHJHD7x0ZG0VzDc3xDfg9yoGb\nM9WKYQFUNor+vpvL54zJv7AA2MGO8Xz6A5y0dkjQsjAsCrXpuUXm7aeTYpOJ\niwlBIkY5X15Glk3uzG58s6NxPEOdzSd4U3n8FTeZvU6Iz2umednhMcQ14XQJ\nDUWl8iG+/EDuQrpnmK/V4jwWoqCRjmmfcD0I33b6p7/TpGr3I84jG/6L/NhV\n52rDo2/zjCLBZHZWV8oFgzJYHbf2MP1udciXqG7VCWTGQdHvbpnVqkfbCfYD\nBF8uLrt6c8W8XRMGpbjk5D2YhRfGvoHraGcmk7xl9quSM+XC1K4mQZsOjmK1\nQSl32LhoteDchRPIEiRpOswE06y3Bpzwri0cA/lWEUuozSckzdi85vRfl+jy\nGqPT\r\n=NJdy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEpliluEWE7YcQcjFcIDv3vZQd+kQ8WtX0CHH0hPSqHwAiEA1AMu/hXDX2Uil18ZbJSIRdkIQRPNYFdeVpCDD4v4RGU="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.10-beta.1_1630743712083_0.001243753696888339"},"_hasShrinkwrap":false},"2.1.11-beta.1":{"name":"ecsite-form-builder","version":"2.1.11-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"0921fa7ccc34962b10780a60005be588fb11c92c","_id":"ecsite-form-builder@2.1.11-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-yMqTesiVMPIX2SditZaE7mOTujjjjNGegDKXTJsYu7O/o4heRQv+qe1wksvw0FH44yAl9evqzcNXz46j+aCqeA==","shasum":"35dff79d9ce86b027c79738f823207df43c2a963","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.11-beta.1.tgz","fileCount":79,"unpackedSize":2932237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhNZlmCRA9TVsSAnZWagAA9WIQAJRBAQDjs0byPFbq0bGY\n1GoRkqgzVWOTXanpcgNNymOskjEtN0/lvRqSH7moTMmml6/ep0TanlyC5gSB\nvvGvzKkdOsJnlEV/2I+O0KflcCUc6oFiuBI2RX7U+Zue3n/YsRNmS+Y19o/G\nndu+CZbJkc1TSfujBp/MXGkpqzk07dwxtGDHWuRIxTXDYZpGbkGUs1Uh30z3\n1G5BAQdtCXlYi6eza8cqGaYCOMUcvfIwomrm+fAnHoMu6pLBK6y56VvLdAj8\nObvayJizZXfB+6yLXKLemTqow6sC7kX6/SjI7NhOYx8ybFb6qqW3FvApjQWW\nhVR8p88jzkkaO7p6awq0XEZ7rR671po8uypshGiY9OWUlsDtRAfYG3KIJjTJ\n92XQHjTW+1znDxLxMrZAK9C5G1PrbXF3oBmplAfa7TLGalPSTUUgivdaz4ls\nabz/Iin5/1ketdMi9AVW0b51XPzJ5CJ+poDl5dMgP5up71bRC/F8yjmI5d3P\n38Xg7RKJLaLxmzAcWBoWpjlniwx0j/3JEQb/qrZBut8MAG5WmAtB9acur+H+\nQLIS6fJ6cBRNsGNCcN4dF5GDPVCHj3/ZzAbiJjKubZ3eFpAtSFFsTQqj1Es+\nnlOaMPgxgNjXck3DOpQprPQ5qi4/ssiSTRdI+f65k/8SU9PZdfK744KQa0KS\n7knM\r\n=LwpV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHHkv/os/rzIhoCovbJMlTrje0voYLefi1qMjSRs6ZDQAiEAhw1SiDuTGaYxdcociKMVHVRsbkqR0brcVWe2Wdni7U0="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.11-beta.1_1630902630471_0.38395839248089225"},"_hasShrinkwrap":false},"2.1.12-beta.1":{"name":"ecsite-form-builder","version":"2.1.12-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"0921fa7ccc34962b10780a60005be588fb11c92c","_id":"ecsite-form-builder@2.1.12-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-dpxHL895HZvvW5yaudGAk1NaHeRxy2jFwzk23JlGP39wzwanA/jDl1pPVSWVRP6X/3jpLz4CQGesCa1syL/2gQ==","shasum":"41e5af1b392afdd41a7fa849c19aaa1d4be6399c","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.12-beta.1.tgz","fileCount":79,"unpackedSize":2932205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhNbMXCRA9TVsSAnZWagAAJ+0P/jrZb+8Ks4B93ECncdV1\n/Ouo9zuU5jLQ5il3yyhkfDah/L2ijNW5XLGP/b9VGWnzCA8ici+UPAChiwWY\n48nTM3iyHjn9KlVIAQ5OhdY6RLhLE1867wVvGIME4dPqWfKB2UCdw5TOiF0y\nmgRH7OOA0VuPBIrGjhkiCCRwb4+tFPpqzB/byhCkbNxvOT9v2seuMtT/6bE9\nxIzrLyVU2UXlS8e9jYYyH3CEWE8JBi9pAPuouEuTXqdqtC5aazF5Q+4IQBX4\nEs9NrolsRODXOaxx66lcgcZ9lhd0+f8XrMJaFHa7/My7iXBuynT4ECzwdktv\n0iBPqhOH8R/9gFmt/ZGsZaj+XYVaI6VLOLcX1qIbgeeKkcFf+/HIvH4CAfh9\nPBZPYQLmQgVyv3PdGsTkfMsco11I5yXBlEnKkX0k8afYCidXTrF0IN0g/qWc\nBApKfGXaFGhnSUuJ6veVPfrf78qGzSo/KhiCIWMslXnqN7eUSV35nJHYQxoO\nop25d2x8070FjWu2fww8PvDOSmlHMlGLi5yTwF63ezae9QrIlM59C9FwGjxe\nH+5Z0LmkniGiwwnlcTQz08YYCj6La+rERoZUiS3Yll6xCvCTNXjas1BfPXFq\ntSYo0gS7cUH46aOIpbRveV3mWLutg1AsYAjELrtusQCbVQJnNWgaUOEpm6HP\nKy2y\r\n=c39f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXhmP5K24lTWWvAPTRjGLw83F+o8D5C/jRSeSzfHVTSwIhALZVxqgiVCjI5cO8/HOR7q6HYiEpaEqvmSdZbVOoHfP8"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.12-beta.1_1630909207456_0.399876790920759"},"_hasShrinkwrap":false},"2.1.13-beta.1":{"name":"ecsite-form-builder","version":"2.1.13-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"26f3b26e79d415e4a16a92b921cf41edd68c8f18","_id":"ecsite-form-builder@2.1.13-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-NazHezPKez2FvFGbpL1ZMRhkL983zP2lfU+T3YmQOM3cK6pDxi829ts2UboHBPa41YyIejI1WbbI69Yy/NQs4A==","shasum":"9e7bf4558742cf8f425c17a5d71d3e21f2994dd6","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.13-beta.1.tgz","fileCount":79,"unpackedSize":2932284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhNbtcCRA9TVsSAnZWagAAiU8QAJXWPtMpffxhi+EtHceP\ngGtWgn8spQZ+tTmzlTwXtkRHTE55cBDEOM0Wwkc5kFMwKO4fzitiwLAz7572\ngx+vzJwegak4CsjMy4TEOEXfAoE+w4388sDtX7BlTVCAMddvL1Pn+UtawPAM\nYqsxJ4FGDdvktlajdzxnajmsfAYbWhUbqqi/VHssjKLAB/KizqLu8mxA7jrp\nQTvQM794TPcqaJPyZZEKbUReeyD9M6aJISCvN8Fpsi1lTQI+/jarvvFKWGIh\nGQxZzvNv99oCtfz3nlndZIU+pbW23+DZqB+vkn/ShEEQsq24soW5s5Ke2Hx3\nxFCFdEEFzAXGibnApLJdTNPnkK3Tiq7uYZrGOIk5YCKtkKcZDnmQnlQjE7v+\n7ENYV1lXjrDLLj/6bnZk1SqVStyzxCi2XJkpwoBpqY4Nym5fchhv3z+Eecic\npisZ9RRKxnOLYylYuVUs32QLKAamT9bao9CeQiJYmuQacPY9GXQlPEM6RP2x\nRHNkN71QSN78hs/oJI2TekHa2V3g5Uw7tT9PalCCxj7hmZ/gQJs59vj3o/ZM\nQoVCaVTqwOyJ2HPd72/dYrjoBPxPSva6uND07u+n+WfgYLG2Vhc7sDeYo1Gz\nc6EiPlxg2aimn8jfFq5klGc3ffX4uEry/c+meQotTZboYwNvOyE2dJrJzT+H\ndlRP\r\n=r1gT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCo5Ds8agSEo5Yg3MqwTZtP1M3iNW6vBlVLFEOkJTnLmAIgWa+9dzyvV+Zb0TrCtiDy6SfqdvyvAUgaxiCR3elCcSA="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.13-beta.1_1630911324558_0.6467159764937842"},"_hasShrinkwrap":false},"2.1.14-beta.1":{"name":"ecsite-form-builder","version":"2.1.14-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"39fa45c13452632ec2b3747b95cb440bf6bf9a4b","_id":"ecsite-form-builder@2.1.14-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-s/8ll6VscEEG8k8/vv/tEQW9o2YvPwSWK3fIyrI6m7e55KC45j3AlCVqzCT2Cyl69t/i84H2ljrtA2/Q5VRTNw==","shasum":"b75eb85416efe082500e2808c836a7713f97a7a4","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.14-beta.1.tgz","fileCount":79,"unpackedSize":2931998,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhNt6/CRA9TVsSAnZWagAAZTwP/Rd2JU2WZ+n7E9UCBpA8\nLDRLwn75MvbNCL6EdzIVXjRKnlfWgNfTDo10jKvMjDDjmPgE4sOwgM2SQTG3\nRpSR/h4rufKq1SQx7oxgQLmHShB7yicbj6TmJi7QG43Q/Lagv0sfPwW19UfV\nDB0HyFtMndFBSKvblFMb+R+DrMZQQX8XlRwl1t4w5Y5JyqACT3xLFieZ1zPx\noByJOacMonLt7qW1uQ6F6zL5P2PuYJTer3VUum1NiPw2CEWleoLVk4o0TB1o\n/qkkOohlF8IWdfnNU8uUZw/fJTfgbf5jgz/MEH/6ZMB+eEBwR+P61WPatbEc\nNfArUGoknfPFlmp+oXKfie+1gUfqh3n7qPbNCkwYftu/dizVA0xrMEh0Dy36\nK6iudVTJcgee5ln6z/nV2ignFT7xrls311ZuNeVPwGZv3V0ZA/iRRElj63dP\nDSZYMRKbUFs2j0sGaeRmJ7hcqmkM7zkcrv1JpbC/D4DgaYeIBmI6M/X/sY9R\nYnu6ROm1XiNJChMSar+98fudnnmYt35EcZmZJcXDhypkFwPOCouoOhF8ASlE\nD8FFivcK6A0u8jbyZizXsQ7479V3gOQlWDx/x832/2MQQY+LWa/NOt3seln/\nXr/N1O+OH3wvkHgEN38D8FO1khqz1WG3voG2RHjWeaQyKL7Nl9m6Nvl1WlyY\n/8n8\r\n=KMQY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+8h3aIitDzCV0e33w+BXKj1cAIO+TJCTm3nbHqTl2DgIhANB6gfqEL+ihh7W4UhTuVfbPNPoHuYBEmwYGbnOWMkBq"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.14-beta.1_1630985918986_0.7198474970264703"},"_hasShrinkwrap":false},"2.1.15-beta.1":{"name":"ecsite-form-builder","version":"2.1.15-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"b9cfc7a4a8d2a52e2e67071a3a4208a967079a48","_id":"ecsite-form-builder@2.1.15-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Ts0pjvlUJGOR/XMnFQCLVUGpLHzRHswVGhMGHp63oTh6u0ao6MZxIroI52SoHI0JR9EX/UnGzcpXSxbhKjGTww==","shasum":"4b3b0a5b8bbd1e21f087cece2378c87607d83b2e","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.15-beta.1.tgz","fileCount":79,"unpackedSize":2909139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN0gQCRA9TVsSAnZWagAA8J8P/AvjJlrdzhpadNjzTvom\nikhzi+YtjOneHDxKtGf54oJlwBiz50q/Lsl8cz1+jEA40hcMQABMd7tTnUl0\nBj90IizyHmWitbzqv4xBeCsc44NWxbCqii2CnfOjJUxHU1r4qUZswoH0c2cj\nZEKHEbO4j47t/TxfpIv6hYvYXGRvAuoklRbTCAuCwibLi9yUUNNWQ+pRXBJ/\njeE9BGoosKUF458h5txwfDfly3Lgkob1WSNjSmKJVtffb2VkBrWAxmNInAN3\nFortPmB6vLBhKC4eN4+CZf8ARWwRZvw8FeBRwbiPlEA14RHgdCXAeJy+2x9b\nyoD02LeQsxHMWZbt3fxN69UnoroHZPCIrI951F6TimP4Q0DaKfGMHtA1EPVY\njJI46SsFyjtwNDPUCITmHeg+klvu8HUtf0s4E9dcc+W61SqQpaXAH4Lm8fst\np1O/mHvaOkrOzl/yM614Ikj55mLZfLqWAavpHFovTlyYSjzKTG4+kxNq1CtY\nLJTBb0jNNPDMmZ+yfpn0yUR1u/oaA0OvqEdnvAUkX3uqygEad4R2jU+RkqGZ\nj0hcZ2DX9pppi6Is4LOiNyyx4tVAN354M9cmr5CNpoh9W8Ti++4tm7Oz4Mhk\nz9r4Q1S7OdAET7X93963Bhh1mkpQcK0nUx0D5drppIGWY3ZhSv0iSPrd216l\nMzR2\r\n=B1Rh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRWwIwirrlJut9PT8igLWTQ/YvEwjr7+aD/oHzcgORCAIhAMckuLqU4fx45zTGzgrfIwOFTkPoWv7eC47U/6srAIwJ"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.15-beta.1_1631012880576_0.9268962778678065"},"_hasShrinkwrap":false},"2.1.16-beta.1":{"name":"ecsite-form-builder","version":"2.1.16-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"467c49597ebba73bca9c203e0a959eb746423105","_id":"ecsite-form-builder@2.1.16-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Hjo7fUDbF5brKhth1CevwEeLZ6aVgQxSJNXoLie6rkMMEQooTWh4pujUzHXDazaZJzdG1sh9JFOGrrRQeOa6Ug==","shasum":"408284f1d203dafb80b1c0cf6f6231e846f6550f","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.16-beta.1.tgz","fileCount":79,"unpackedSize":2950841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN5MwCRA9TVsSAnZWagAA86IP/jirOLEkeJJnY2IOuuif\nHlxXqe7P33U3ainEJYSMu5cpX83shTLE2LAfClqsnEHZhDv+GZSEPKazNobz\nXktifOrRRditI3N7Pp0LA//E8AUXts5/1hBCo8XQKHfIRcWoEGrdgBCACEz4\nSDOsh8FYjFCZVMhJMsFBIoeUB25uKOFZRC3EZ48o09joc22Os9ixThf+AB5S\nu9wiuMEvvZwfip/tPVKUmS1rkeJgGtz3r+EJPBYkoVzj5D/VgatZtke4paoI\nSMhU7W/obJfInKvVoe4EJf9tYJcogPqnvk3305eu7T/N3oXEDYJV25NuvLCC\nZHRn346r7gtOrhgOiIZidR/cy0nI9/2pti2ELgWDwod8C1PrwUeITGewPNQI\nTsnIRL2A25NLpQCQ9Z6/N4Yz0ANzkWwGvclDE1/b17jCl3qTmubGErtA6ttd\nydfTQ1ySRoJQimGOVhExgLaeoV0YVr5V2d0FJnFEWDbCJxMIBFI2hjw8QGC5\nDtCMMQER04aimygn0zqcXERr/9LJca3A+XZxJppH/ZmSSOcqOqIcbBjPHosZ\nNMAdFKNXjBNCc0FGQzBRJ33FRqdanHV4hbryXhVTLtV23TiIWq+6KUHU8r56\nsPw8sHDwSNHy8MN3Mssc8sbN+L+LetnNvT8TTFmTia0a3yHQ1goMu9qRC94+\nDIYa\r\n=6wph\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAJA2kd+NSYLV83yBl4VkaIwcf5y4jMXV5hc3Uc4oF/ZAiBPda27dFjLKNv5K/Y1/XsJmjThYZHoIHFNAA6xIMgg/Q=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.16-beta.1_1631032111822_0.7055548213701941"},"_hasShrinkwrap":false},"2.1.17-beta.1":{"name":"ecsite-form-builder","version":"2.1.17-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"125099291f112f1a1ea1256974d732eff6b27875","_id":"ecsite-form-builder@2.1.17-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-9koaVNN+FXwzUOyjjy43tBqIuS+bkvY2s74VARzgbLyU+3rj7EN69Fx2FFQucqHcjpkCGkFyTD0CcdxpZpk7Bg==","shasum":"3baf9e7ea7aa6c08ab71c752079e304c72d3928e","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.17-beta.1.tgz","fileCount":79,"unpackedSize":2909115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOF6uCRA9TVsSAnZWagAA+IIP/iMxSjhow4kcivtmXZRm\nEZvJXem2dsY+BeMdEw5ZAzZH5YudSI/yURBZsQfDluj4r1n9QMZxWq8jDHQu\naS4Y7D82Cs9zo50MyPWfcHDYP3EPD0G6UPodrC9qOZbGFu/anTMFxjE7PXlW\npc+Za5o3EFNrit5rUvYKAom2QtB4Z89h40cd/0RBSyuDSGy29QnvEnBIBqQ8\nNSHqhGTSyASD9Esx8WJn4aI/+96cvCti7+G+vu5O3qkfwN2JwuIuLKaN/mUA\nu3+dGBFjKCD2Zl9/ALvKzYd91a19lXTODypdO45gCl8Gio8qOa43yfD/XUUv\nbCyomeiO3ANlQcEn4KFRG0ZAZG98uAw3fAzADYzr3HK0PZ0O2rgUVcxNV9jQ\nrWzpz3BpijtinUqkBx8sF30bvnInIfBZx9CT5w1ikg9os60Luh6Y/NvAzil0\nc/7hSBl6nWjeh/ka3L1epSv1dH3elBJDDZwipMjNXx6tJFWN45qtJYnYy+iL\nlLUbX0GLtqIOWOvj2aGFtyS/W18gobYrfj9g2Waq6vhwotMQPhfK1Hgfl+ok\n30BRod5sRksr86XD9m6gabbMusi+dIYQPAPfsAfDcP07QlJq6ftAavVE3k4w\nkzgmrMvVIGNF2yLZTmmx5Iwz3rIJ3dwLOIsaJ9MVM9zVeZI/w1+wSn3pQl/N\nIkJi\r\n=ED1I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGySjf7LdaiQkrhbACACVCU/4Mwlfw7basjjJdGGkbP0AiEAhtR3rZSbj2z/BgL/vfBHJg0Uxi+izBPUCDzDNth+EwY="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.17-beta.1_1631084206374_0.9986369383630398"},"_hasShrinkwrap":false},"2.1.18-beta.1":{"name":"ecsite-form-builder","version":"2.1.18-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"125099291f112f1a1ea1256974d732eff6b27875","_id":"ecsite-form-builder@2.1.18-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-h7tX/d4z44TanSz+uwtSnr9ct9XzRYBu4iHu59a63rvNcVI9ClrIeqZ34SmhCQgDgl9W42AnQQvj7SxD937Xkw==","shasum":"a1b3ec19d05e3c373e08b0dabcdcd0e4370227e7","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.18-beta.1.tgz","fileCount":79,"unpackedSize":2909339,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOGOgCRA9TVsSAnZWagAADkoP/RGsjjLC5LKEqqnsi+n0\nsmxqNxO6bIuAS2wKF/KVbk0awjv5h+KSDR587bJA0MeznbQRjSECC2KTK5Xt\nWxBILLaF3bdPfgMpMFKfsmQauqKFzjuwLFTwiyweaExRnZr+/A6tVQhY9KOb\n1vPGNingxhr5vrGwVVv0n7bAMPVqgMTdvUG6gCknb70ytQZCEteVUc9WJsWI\neHSF768P7cYhDbhy89Ik1czXzH3QXs4CA3n1v59epJ/eIOo6A9w946f6rKbJ\n4f7sd6oQ7kZLuIKrlfzffVT9yxYL/tU6MyEomH2el+XPQO86WRHQOnr10mAp\nKos7Aj85a9XvRpx84mSLBbyjoKI9yrsKDmhjnInY5pyOJh/qMwS7N8RPz20D\nD3BZVPZ2YigrQ9OhqVVpd8NxLg5Pnt/n1xUdtAOwfi8L6ARu1qkcHXz3hVin\nrAKf0Xga58i2lTjTaa3y36ksadPz6dWxwsl1hIirJRjurLmWMq6B0jHU/znR\nyAUpQfWGvFEr6s272P8YhIuK42xxnRZQaR9Gl6kYk1duIfaWMwF5LT9JcihC\n77Pckcf4p7qW7cB6G+NqfvPBO9yI5O2UMAoTIDJ13LOm2g/cStP1BlQDZVlx\npaI+3FgTe5Q3i4+ytZ/5HZyjsRu38myxNyxST+gk1n4h7q4l5HsvPOWkvr6q\nUW+S\r\n=L0eq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCyKRgaOxW7mF97pcxRCI9aEnA9FfHguNcKmfsThmOKVgIgPYLVPi+jCIU1c1o8Ek8IdD2twhvCwDM6rgY/w9dnXvE="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.18-beta.1_1631085471842_0.45866250440951517"},"_hasShrinkwrap":false},"2.1.19-beta.1":{"name":"ecsite-form-builder","version":"2.1.19-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"35825463b08742e3a7093668fc10b5cadf034746","_id":"ecsite-form-builder@2.1.19-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-BnOaZrTPLFRCi83LN+79fkF9f17G5WGtAsQ0CysdDam19tWR47UmjF8U1AwW1SPUMjkFEnuwdqKLfrlmxX85Kg==","shasum":"85a9db5f88c791d73c1bc9ff07eb59b8ac641671","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.19-beta.1.tgz","fileCount":79,"unpackedSize":2908772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOHoGCRA9TVsSAnZWagAA+dUQAJdBWPAWqx18xVAX1S77\nP31q9y+chmLhHA1HLzboV18o6NRBcB9MEeZ0UrzTrtJgSrtRhhfgqjhU231p\ntBI59XsL2x8l0TEYxjYVpAUPviKXysuLWtHAnxfUXwR//3sVma28ncW19TJj\najJBQA38Oty6T1teGjO0qaRyQoJ8bulQZytgE/R0nt/4boV3gps6QZcGXiO4\nR1dIysPTsUTUIfWzjFFP8Vw8OQhTRI+mvGrzL2MNNNgBBURGk4cDIplJszDI\n8vCFZwz6XnRYdG7JCBfggpX5pVb9225yCGrX5D5Kqebay/eAIeePUOVjBXl1\nWWVrAD1/lOQ+pWzngR1r3kDwbkjUly/gh76srD19mGfG2WkR4SDnPWc7XF1D\nVY3TT++Qxu8z6l9HYBtn92eOYqtO5kDbU9SsIF3rgrfI7NGfN8yXvR9Tzunf\nBoknqwaeNT8RWin6USqj/pZOU4SIf03DjrrQjUA85/WxGq/GAbKYURam0lhJ\nLUSH91p7JkoFac9EdfABJ7U9tgyJGx0pPrhgenDaTmjA3c9betEtJUqFEFFh\nE1r/RmSRQWy0Xp4bBIZcO2L2p6LqUrfFyBnYQyWwpFizauJKYOKNVMsmAsTO\njja8a/YR5mEQQCX4e4CyL1UIq/ze1Cs47X2rWaDat6w3t9sz+w+lvRuh5FXO\n7vVB\r\n=/Y3j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHDSLfcuFFLkUF3QL4XF0xFsid31UK1HbaGOuUzWQZtUAiBiXIKs1zbr4X/3Q1kXbkPF6dUYgPbdRNBsxihsUNz5pA=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.19-beta.1_1631091206143_0.5154725641157134"},"_hasShrinkwrap":false},"2.1.20-beta.1":{"name":"ecsite-form-builder","version":"2.1.20-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"2fda31bb409a23e4382b7667cd5541503595dc69","_id":"ecsite-form-builder@2.1.20-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-cRMgupv66Sv08tKaJfyNU7qpmqSEi1eFNuVa/OcI1k2aHKVBEtGYk0eklIrbTIpGuEvA4TZoG6jzO9MNQoUtlw==","shasum":"4318a7e95af70f1bff71ec31edada7aae1ae0edb","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.20-beta.1.tgz","fileCount":79,"unpackedSize":2909971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOdVFCRA9TVsSAnZWagAAYKcQAKIawgcnGMcKu+OumQoy\nUvTfk1qnkKyxUofnsn9XgHteK3T9iuXZtooYzkdyBLfK2uzqpkjCMQy2fqCB\nHME4vlWjuU0QiiCYGhZ8Ck6x/2itxoN4hkHJsmTZ65JWOwT0WuQkh4G6/YXe\niOjSNsydMuh470WEsTmWWK3PtsCBxHpdPlzhVJuGefewWsMJKzgbvyXJfrxA\nrYUye/1lwl32CtJzu+EN1JLhoF+B/g2F6ahe9U8CFDsJuTmxm9Vn6meKxvVb\npbOz2B0TvfYylYOBR8n4E2VNjcUujbtaIdtKPJzb1nc3axBKl2F4ojBoOr7k\nvVUICSeOYQUTZuGcWZRUKPEmiVMwpALg/1KOwBN+CpfNjjtcKHGmsKp4EjWf\nTCa/YOK2nVc4zYo+vyQX8mKhTXBh668Y+3fNUO+8q924eJyRW1jVfdkQ/NPD\nYaeTUWgYmFFGKo1qup8nOal6u9tbz7b6uyaZBh0TUfUYJZLB+EnUrGCYZpQL\nsAHTRO6rOX4S0ERcdYH8YiQCQSOjM2eGTSyL40ZY1b5qZ/p+l6ngMNIQidF3\nflXwkIXh1cwUaC+4+g/d+Zj4jAF2ddSE4oF8YTK54oeKPXk4hMIlZeivNJ11\nRCfE/B1e5yZqw8Z53CV1GHI8SjLCal4lKYiHFxOKN0S47yfuhIbU+ZdEP+IC\nIKUb\r\n=ZH+u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGnyPfh8PIrxVIDbkceQWqcesxeMWHYdrjuYYtX1+safAiEApipFBzvk5RAhnjt2jfW5SPnosZUtqEg/SxfvGcgyX4M="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.20-beta.1_1631180100947_0.12666925779301308"},"_hasShrinkwrap":false},"2.1.21-beta.1":{"name":"ecsite-form-builder","version":"2.1.21-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"583f59dfd9a17e1d3377aa91c25b9149ffae4b14","_id":"ecsite-form-builder@2.1.21-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Mg8MFBXu2qm5z61iHrmEV0jUx+KdgSpzUAo98Xffp1x1jg8u/+uJg0xRSaI5vDxqrekXVE4eGHlyBaKKFY5CsA==","shasum":"2c1b318d9611b331ed02eec56dc7fdf23eebf45d","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.21-beta.1.tgz","fileCount":79,"unpackedSize":2950901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOdc3CRA9TVsSAnZWagAAmxgP/0U8rMAE3EW6zhVIFjQm\n7yDSfiiQRN+5HL9ogBomMUuTnEmeATYG078Impz8tqwslTpzkz+oUb4oBHdq\nQy6ndn/rNEmwRfrm5wryQ6kCfxX3NKIoVVfVQeDfBFseMYnEsmrLqOw59Q0e\n6gBf0cC56/c2oMZv6kCeK10u99VaT1eYlx9/qmf1QaJo9q7RlLhdxnpMBNpZ\nMd+uxdV30FvDEWa+S3sliBPW8gPnUjUbs5uwW11BwV/b3bpTGW+uOjePGBit\nabv+jlj2ycKzlOcQLq4C1wObh5TdK1ZAHPlVswbwx2sxby5rOftsuixOSap5\narWPutff0p/lbcar3pFYm19ouCUydR1DzJ/PTF8oSIGcPY0DqL5jSG/83aI3\n6AJ2YXpx6lM+G2fQa9UoKTZWtmPK532Poh44NFl9sa2e+UuozRcl/AGMhiFv\nHgyJWjb+unUsNiJiIPHhTuh0Ro71Gl4e7iGEk5To51Sdu4bHlrwtdfEOYHIl\n4rlhqJdle/gl+AzSd/9FGlfLDv+MJQ69tSfhyrjdkyYBRObYiUT7ec1m/n0D\nArwfPoGIg1tnZeLR/qQNQfoCVjrcTDppP5VJqajhmW85FQPHQmti89rsB4xT\nR3CdFm/ceLimlMCrBarsB95Oigd/p28o7Wiz/XP2pKpAZV8v8IP11hcBE+Nb\nehc5\r\n=Sp0T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAmvrQDvzUP9VIzGrvgISvPvWTzztdLwF8pjMQhuZcG0AiAeeyGyEv2ybOp4yVm1VHtV12QeB0GqzCFK/KoHDa+cNg=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.21-beta.1_1631180599644_0.26955390594654416"},"_hasShrinkwrap":false},"2.1.22-beta.1":{"name":"ecsite-form-builder","version":"2.1.22-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"8c9a82071f71764b83f150debfdcff7985b9022b","_id":"ecsite-form-builder@2.1.22-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-aY0Immv6CMs9HU6Cn/NtB6JU/MyWXW82dAGaURPmjyBWx1phdHdJRXa37GSHZxpKA3izOaM4Bjo4PunKDRafXg==","shasum":"85d71f017d2fe5dbb858a0a7f2fb2005f3998d86","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.22-beta.1.tgz","fileCount":79,"unpackedSize":2910434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQAqsCRA9TVsSAnZWagAAI9cP/0UNEpemVVGdgmnlURd+\ndKlbHwiTNfPm1QP5DCbEreoFXyaSRHyG28S6G8FqTzVgVF4oFhmKP1VjMxsW\nTkRcWx8QSI4pEFG0fcJdC88UyDbCS75OTxo3RC1MuUkWsM/GUfJ4bhH5Wd65\ntWzO8ueQFbdJPrZfQ6pmg1WNGns3ExlZ//U6qsxySUtAzhyAXn5VlAKp7HeR\nrSM+KZDP/cCkCULuZ30VDrz9MlyJyMDhGqUr6YpY0v6O3Q1wSFQMiJ99TWdT\ntiJSK+e3nyv6QvTJRUQn/CT2gcwDnOmc9M4EqPrRKBZxAgJYQntWukNcbVeg\n2TKvnJIwL45h3yl7QB5PokCnUGZtQOJdXWSkcUZJNgxtvJ/x+WE9PlPo717J\nUuQFU5mEcZqvMHRzBOCsIlNDS9NR8hgLG3gbKK2flC88036tK/T7cxUS4Seh\nT1zgrP8EiTJyH3hGurL9StuWpVTbncBjs3Gi6s7/BvMzdV4EBXB4aNSeEeGQ\nUjIwq0q9BWVZt42C8wbDgHkwCsDF1S0kwA0UII9wHanaowdmgTJNjUg/coKw\njRVJgkS+YBjEpSzM2A/YVe2WSmHAmIhnnvn8ClEgKxhfE5hmuDmVd1IBcLXO\nTg2g4rCM25R4NsPWd5EuHXiCqRnFbBVpqVpAKamsETY0Z4l9sT0gP8/EpdJu\nqMg/\r\n=NBkm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEE6mDGYZ+2kAlpCGSyoSESHgJgJhtL9o2IV//T8yts1AiEAwx6PnLErr++9qYOAqGXqMocKRmrFgZ1t6gP4+SZ+uzg="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.22-beta.1_1631586988688_0.9781978406128364"},"_hasShrinkwrap":false},"2.1.23-beta.1":{"name":"ecsite-form-builder","version":"2.1.23-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"70ac863ba697c8e7597e47b47264daa04373d9d0","_id":"ecsite-form-builder@2.1.23-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-w74BVFu43hzxYH1EmfYqOqKNzapXZDhMn1DFISjSObYRxDfh1UNols2+58BgPrSSDzcj6kZ8OB7rhNjoCIJinQ==","shasum":"46e2db6615c8f047dfe097b0566233f9610af7ac","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.23-beta.1.tgz","fileCount":80,"unpackedSize":2961943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQBdkCRA9TVsSAnZWagAAfmYP/iEiCqTFGXe7FG0JjVk1\n3jZ3EgQB8Oy4+vEgnRdxOQ0z6FfIPZ5+J8iQ7BPXBSM9s6zRf+DAKDFrsbAH\n29dgShAdjunSTHiGicQPYWbkLdduzegpwf4mGnkwfiMc0qi3qCMsF6hTf+fa\nCZhG7pS5mKD6b/I2FdC8hfiR69RAvePC8K7DynJM8OYaFit/2zwoQgScPuXW\n+YoPptPFjFSH6SUB+a5DeJqKUwkhk5t5+KUkrAmvZuj2VtGbePjLw2PPHYC4\n2zMAaRCX7e+a6hoAB1cgN/cXW5/eFDI9q9wdsaPyxhPWGPnyJlorjZQFVGDN\nbVUVbywy6uq62PeQOmU7o08l8WA1M+FAxFc5kOnn6SnKTipQOvfdJM8qUq6y\npVIWzbJ3pts5bvNnNBPT6OsrqEqq7Sl09szWQ8tDmWP1bs8B6s61zkxza+WC\nF3ywMWrnqd9/u4VunvKQXvcTTnbsmdUJrOCYRxAwODinZpLen+H80sRYwwsI\nutSGZ1pUcHPi8qC5+3HxRqNERLLwzDIGSNJ38fLNRir60BGUBQAzG+sx0CJB\nM7nYKKfljetIn0SMUB8khRX5PR8k3Q+6flYCqPLBonwzx4cMmVJ1aPp5/Mtb\njr9f+huCUF/Avjwon/iuiFTVMIaHd1aIlDS9biuqqBz6ZRvghX2HJh4IDowd\n5/wG\r\n=GV3U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB21MS9eK4PMB8Hej4cbjzGpmJV/NgTigD2bBWAPHUxbAiAFZk4YPmuUMatKfG4+GsK1LTLSSFhdPSqkDOxfeUkzlw=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.23-beta.1_1631590244125_0.2947466101595937"},"_hasShrinkwrap":false},"2.1.24-beta.1":{"name":"ecsite-form-builder","version":"2.1.24-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"b7e9b23aca59a5b2a8f458719b0b509a00208bb5","_id":"ecsite-form-builder@2.1.24-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-GQObsKQiZY8NjNFP70RXcYqXFbPzt7X/EFSxyiNTcBZ5kNRWUXDguVUY77hWPpzlJMtjsvSeIS52hP0Lc1hmGA==","shasum":"3045a49ad7e17f8e048301e1fa125ab99539b433","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.24-beta.1.tgz","fileCount":81,"unpackedSize":3006852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQYbvCRA9TVsSAnZWagAA8ccQAJHguyaZMAoEjO4uDv3g\nMdnXAVa7FRiWsGmlMAdX7n77VXvpaJLThKYyzr15xictfUd/3R9Vs0gsSKR+\nk8IWPrfCS+Rkt3T1i7O9SR0EgL+5vCpgll2W7JgV+oc2YMOlC8aYLaMWIsK/\nFH2MCfrqAfoyGicq4MQIMfela5hFIcdgBOuQmvmHTpiKh05xqmvKk4HB2QHd\nt78TN8WiiwQiz5u22cH6iGY+fLOOJKQz8+jsVPP89SETedZBUbC0u8DIoQBo\nnER5hBpDskrd2ny6dRbch9YIW83fSEIFJfUQDCEuXif4Sd7JtwASgTQaOh+y\n5XMo8dlslpUOfKLIvRtsr1IRChDmn3BGDSCncJzdscAXDUWLe20Q9M4ByiyU\nbwNhzmU21+hE2ZjrZXaHB2k77Q3Vuzej+/zm35NDGUcBz+Gho4J3fBQmmFA/\n5S6/aHD4EvwMxT1jHPuShuijxPO+PNdAL54LDnVvx/da2qcUjTiw4rgdQ3co\nZhVB3bGWuJDc75uB026uY/OGyFnh3g6aRFYE/EduJdimS4Rs08WSisjGmdVj\nzfpLOeQQX7NoZvLLWKEIirHWvuaiWQKccb9DwKyBQXs6Qv8ug5dk0Btep+7F\nPx9DIwcUSntDOkaA+4dpMr4n75/DPsQslTkvBGGS4KxFh010cW+V5o/54wFx\n/fO2\r\n=ueVe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJgNfOLmzn7JovJEFHv5NaD2zpIR/JAoHY1wiLW0gJrQIhAIPscOGnO/8N3bGtpI4/TGGC8ZqZm0Nlhpl4sOoB5lHX"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.24-beta.1_1631684334812_0.3994090380149087"},"_hasShrinkwrap":false},"2.1.25-beta.1":{"name":"ecsite-form-builder","version":"2.1.25-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"b7e9b23aca59a5b2a8f458719b0b509a00208bb5","_id":"ecsite-form-builder@2.1.25-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-z4o5cCJEGNCO7puw6IFcXz6gRlGsh0FVG3A/dEBblHIiq4oJx/Pb/8dIVcgJRA4h9ymyqophtKgo2DvStZLAjA==","shasum":"58aaed9484597929f3c1e8add8fe516509d6fdfb","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.25-beta.1.tgz","fileCount":81,"unpackedSize":3007469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQZm3CRA9TVsSAnZWagAAOQ0P/RXkoqOcZ8QNq28RqHOU\nTa3BTlPp9sV6RIGL7kGMETsVsY5tQaBoLVG9uRK58OIdyayorQ2ysbuiBvWc\nqIofBLM6trnzsmeuhnAT16zMLbMvo+Ti8MLv8xQTKT3QQOPt7hwzNLK2nlwu\no95AqaYxohvb83VJcXZXNfALaOEdLLo+8uQgEWHlwPPL/3vrmbVCBziMAeZR\n5l3pZ2qhkAb8Woji19oE5egAv4uJ3BOASdaxCckX2rSEzkpJlQfl5Yg7OYg3\nGJx12y361leZ9a5duKZXXtlDWIXaFggv2J2ZBofKJ+eyexzN/VCuGVPix2LW\nno4tp9baoM/6XG7leGu+DO6R2vG96xjCbT6J03Lvsio4DrKi+GmSu0WfFBZJ\ncy86eDpIuUgLSPOsudnxBCeH575fFDlw9CY6IA5we0NcP4bu968fo+EZNDQn\nafnfRK5fA2ikJu66OCH4O9VcZzKm91jXCbyig8RMsF9IrI+t8OfKLM54S+pN\n3oEmzcegi5XjsEcyRgoh3ZzP0AK20IuBc7LrvEHq02H/du2tMEBC/E7pBXHK\nfawRrtOO5Tp48/8ES46io6Ap+sXN/mhWlTs8WFmCwlFo0kjAEOUkAzwlc1El\nX2N6U5Ft3q4uE1zjIb5Sq1bmHbXOMwr7lErMjA+9fQ9okV+HomJ0ktWqe7gB\nJzWc\r\n=sjEc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDevR8cHoqp2HjyZkSBrVDHZ/zXh4j/7ASjM2ZBI6hekAIhAMDP+hRFyEzxp3NM2ZAfxnuLwdDnkiG+AfFN5uUHWEfR"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.25-beta.1_1631689143803_0.9442930504449445"},"_hasShrinkwrap":false},"2.1.26-beta.1":{"name":"ecsite-form-builder","version":"2.1.26-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"b7e9b23aca59a5b2a8f458719b0b509a00208bb5","_id":"ecsite-form-builder@2.1.26-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-pGQc4GgKzP2RnBypV4l+IZ2VoArhQ0xTcAlx32CMMlQFaj99wSBM62X/BmKbppBW43IKbqd8utypuzS2E4byqQ==","shasum":"670d582e73bc503a7ab7b5efafca2551bc6dfdb1","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.26-beta.1.tgz","fileCount":81,"unpackedSize":3006954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQaGXCRA9TVsSAnZWagAAiLMP/0SieifUCWm7z2hJgWX1\n8Pv/AXZuaut4zyUsnECiY7BFRW+K16GKdflCeaxL4TCcj6pjcmVTXTe1WgPz\nn4Z0KE4kxHLTCWn1JSNXS/Lmr3HNjokQFYAVCiscJ64dcy2WEchVPwo8CYKw\nlWgwo0dS3aWm6fcMzc6W0AvGWO0recYlJJt0BMAaxeXXZg93ZwBoTdK8KO8Q\nZEWj2wRCdw2VJ/qUyZs88oOGh9N5guv1/30wxFmLvGdaToE5CHSNUCDpZU0c\n60zZbMb1QVdsELNboIl7FMurz6lfzLJ9N4NmimYX07SfL4g2aEi8z9yfdJxw\n9DkRexkKRpQCaE3vFBPDdDQeDr+R1Me7tcPFttVPyxT39ycuvFnWwoLV1DsX\nPMNk8oogpm8M5+8Q3q/DRAzj7yJaWGauD9obuO8CEVypsDsO0+2uSm+Ak1Nr\nKl675DBPYTx/d/0PbUM76PhDDpd0iwvqR8nFuo2R3XS5tDowRNljUCH7igxb\nxyRRDQIW6BI7OyImCUFzeYxkQScxfqt9DukqpjEfUVJQrHo+lH1uVLC9BxFY\nYnlG9ZQWvCca6LqZKzRL4oXCiX9LG6mvudulzIIFE7dlDSxV2tBIaaF9ytS5\nunGwzBrDaX5Fxx3zkt/OENtTV5/4+vmuZs8lneCCwFxpuUDxhn7V0pIVsJKE\nSorj\r\n=Boy7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGhRULGOMNR86M1o2krgSHktIJGT6aPsye5xriCVXSCuAiAoWy87+a9vnZ5t3Jlku7HXL8isawrTNNxJnk6TpIvk2A=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.26-beta.1_1631691159644_0.611079681288178"},"_hasShrinkwrap":false},"2.1.27-beta.1":{"name":"ecsite-form-builder","version":"2.1.27-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"b7e9b23aca59a5b2a8f458719b0b509a00208bb5","_id":"ecsite-form-builder@2.1.27-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-/rSQabAuc0W/EJ0GUs6iYKYTmpAzUk1NGWePrFzGf2HurTxVF0JU1Od0De2hT53uNnfRoD9VKfwBUxdfdw8nHA==","shasum":"09fda151c9ffe3cdd88ea86ff91a6296fae42544","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.27-beta.1.tgz","fileCount":81,"unpackedSize":3007084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQaa4CRA9TVsSAnZWagAATeQP/10UbdYTqGEnfUIIv0dm\nsR1rfTkfaLsvOnIy/1EL6wwEAC9OtiOZq4MI0wOQpMEUTvQ3n9qKN+LeVyAR\nuQcyw3ZT9Gl8tYpi1J4paXXLmtV4m0uoylDEaSrOWd9PLovKalgkNimKH3bE\nO5+EEL6WJkcEB+bAjGjJWmmJl+a23e/nnx09M5p8c8c0pni8GzwovzoGAtQQ\nmUNWNo6iqY2MIaH6Rf/CC+Th0ltVRbJFUliuW4TByYcbgzkGCS4D0B9f3cJY\nRszamqyAmczNbYwOxTEt75lAK4OctNQ186DK/726vVY8de/QK9CSWqGi98YD\nJwWlYRmSumdk6oWlrxE8JFwbmElPiDJElQt/QGgUzZhuO5L2COGwIJRNGvTV\nm2iWYGPshhPq8n79hBtPcsme55tcIsdkP25xy5YV69xXCQbGswAoNfn/TLyt\nga34jtvTx0fRyilWkXXRiquQLwvjChp00ISypevqh60XacsweAqnTDI4+An/\ndecabRxi7LVSeHtp1gykN5U8ICY0W/LzzjaX32lUGfBa9+iaP4l/3Nj1tFHK\nq5XWTZmKy6+PfxImrnHLOWvMfwrPRVLUO8NkVpuqvISowJFoodAFSO8N4WPi\n7pMfS/92gjSP/O46h6U2p3F5w+Ef9mXMkduYw8x3j0jPfEForTOaa6CmfxQv\nE6lU\r\n=/gH7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKY8C0PJuhs0xGVyEh4atFWm5S3ZCK/90+LXFLT7kJ3wIgIrnwrEVu7HyUq17NkZine/edtxZKPkrEuGc6vu+Hktk="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.27-beta.1_1631692472275_0.16121206224815365"},"_hasShrinkwrap":false},"2.1.28-beta.1":{"name":"ecsite-form-builder","version":"2.1.28-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"dee3e1347be74e0498c32a63321e2ead0cbe522e","_id":"ecsite-form-builder@2.1.28-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-NJ/SDLdLGHCZuJq+LC0x+FYehSy3sAdszPjEAb53mvxb095f32PPm2v/SlFi+my0K36wGhuWFk9aRSaDJh76Rw==","shasum":"74c0663a0dc60c4691015b5f0729d53afe1535e9","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.28-beta.1.tgz","fileCount":81,"unpackedSize":3016716,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQr04CRA9TVsSAnZWagAA/q4P/3irP023B992o8KMYrGZ\nJSjmFMWTx3Z/LCSoEg+T6pU3q8CTfavrZ6JcX+Dl0MqMFGsZPLubrIUwTfA6\n1P4GVCW4cNc00vcxObkereRIJn1rgT6GKOvcu8aAlOXnUAUN+z3AV3sHPCjF\nKtyeorfCsotqYoiIJtY/NVWt/zHOdvx7lQDwsXf0EJ8mkj4uleGqeU+123H3\nLNyxfpIIL4nSpHKqEvJn5N2eFD+Y3oGyibn5jqgBApJGVhBm9bynSm07kajH\n/OyTZxlj/+MYf4Qb5BhF/rm6yx+zCvocI3Kq2zMp0A7Dzw2n3slMKCh0ZIJC\nJ6aVUNMhcK4hSCzcd9CTTilTJbtAXXPeGhGm/NJf9psuqc5h1oyuYwj2lSSk\ni5om04aS4RL9iZqaAQGK5JKQ4zsUEPRuBgzd3kgfVdeBbvXM9nBLNTfKfcml\nX1b1P6MouzbJFlzbwjM8fl/oJXOKUvMzAF0160zq50rrXWQvNlGCvVbGIco5\nAm8BFv/5solCjHFS4nLvDkoZgiBNYov+nf4ay1AuRtLF1dqckuUEqWMxr/U3\nxvUG67YFHFOX51uL+MhkALzRqNeOHSzhCSbv1qPN5TiM4Uj779OrcBV3epM9\nesQIOItHMxeeUd2ZUJB/i4ikRpuPYv9aV1my6h0AZTUtcbTtDqzbnNSZg9c2\nzN3p\r\n=Qy6/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD46HGAWl25KXAkRVE6WQQSq1Nh3fkI05P0rgkvCcz3/wIhALPTkdOP+V5q6M8BomcUqrzvQ/46dX0K8gWB6tNTDbz4"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.28-beta.1_1631763767992_0.20682472471490065"},"_hasShrinkwrap":false},"2.1.29-beta.1":{"name":"ecsite-form-builder","version":"2.1.29-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"dee3e1347be74e0498c32a63321e2ead0cbe522e","_id":"ecsite-form-builder@2.1.29-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-a2QGff7/MKbAxM7g3W0ZiRCOSNZ6xaPoTWWfT7l+kcInExo8nKREwUrjfwOASTMQSHPg/gzNHYkQyQKfBWDgLQ==","shasum":"2d7d0485952aa579e9c705a762aed7ea5908aca2","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.29-beta.1.tgz","fileCount":81,"unpackedSize":3016972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQscPCRA9TVsSAnZWagAA0qIP+QCt2ocK1KpsK5PygF2K\nk5KK6stKxa6dvPY6N7HUamf5blCAL5CScXuCs3GDPJeZw9e0k+BKQTx0yqXN\nWes8Ze/m7gmWutn4l/1Frt6lv0NGO9s8nzzmOe9ByYXGyS25TGzTp5289QRi\numuhYXpPqH4LGCdHnTJtvLR3C+vMmfz3NyywHqTmP63wRTkDa6y1cG6IZysm\ndmfvprWqa9zbxunEU98Ico2w4YltgRMDMEh7SMOzwS3LM3v5lySUS5perZ6E\nMTi0lTkaMXX+SfaehyU3C4RDHBDYWIGeS52vYxYjdjzbjfedgqRxMTGK91e0\nfZ/WJlsKvVX9SYlW0K+nqwHC/AlgmFVS6U+jLNY8NCh0D6k0kKSHwGiC0m2k\n5T1Vw3QyqXmFfxeYIaF1qvDFXJ0BIPAeOt6c5n7pHd6b9G3BUjcWpla78gTo\nWs+QNa9ksahi7BfAzQ1G4BE8YWHWUsGGEOGpYAc4L3CJCpycWPnjhYArVJ6P\nd9j3lY/Nobfy6wOs7SkD4n3E4lmGEPvoLwoT/aVvtDTJK0V1KJauyMwODawS\nB4xgmvSO0pmtIDVl11wo7XTysp6Efhhb7A5EuJoRsABNAe0q3ouI2QltJ+jg\ne5/ctJp1sdnMh+BUEHclE6+U0bBTASFoi0CY8vsWpNw53QsGkyzSL5BTt6LW\ng9zn\r\n=RBj6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDsdOIpEvy3cceHPmlq+rhA55UWoffuFnQHesFX4QtKpQIgHrAT/KgpFEzF2b/QtaFf+fxhl9FNGs56BT3uWaB4xJo="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.29-beta.1_1631766287798_0.43279923520963437"},"_hasShrinkwrap":false},"2.1.30-beta.1":{"name":"ecsite-form-builder","version":"2.1.30-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"dee3e1347be74e0498c32a63321e2ead0cbe522e","_id":"ecsite-form-builder@2.1.30-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-OoEoHYKtjeJ+DQ+OseF6HlSaj25uthF1qNworcguIaALsoEGBXxo4ukvZUo5UEGuIk8Zzw3GPXkdjQjZ9L/FAA==","shasum":"0c5a5869c443132149293483d77b066c354f8e34","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.30-beta.1.tgz","fileCount":81,"unpackedSize":3017312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQs12CRA9TVsSAnZWagAAwbEP/R1TwNeOYriiboJ7JHv/\nL2qdTGgZQHeOA45czmebOkZcEcBrO3GbTSvM23j0I7MZwfojn7LQX98pDHE2\ntb1QqC0VizmHeF0VRsQ2SgLvQdNdxCHkyzku5NLm3ZvgN83F3+IAreghToXa\np7ZSFjb+/NfreK0GozfrolN4LWruyxUJuTlYdvKvPuIJomYAj0AzOVCSlGGT\njbL/cd2q/Nhoz1WFlLwK6mntj0vBK65UMP51dLxgsqVXcKukrlMUeqCcsr35\n2sqPNrxfMzeL54LyLdllxUWAif+uEnZ9jU+hKmCSopjJzjpLmL1rggU4XwPK\nEHbHiLGgOfh6y2Tj1GRjwVQ8DoEWSmFjbhHp/LBLEKq/9vbCv5v31Uwx5Xf0\n9SO7cDiOo5rAmh27/65iIX3ie6oLCetHEr4rWAFBO+3WKMfKQ2HvJiGi0Qud\nr2h3jQc0YELQSo94vibD+96X2xdZOCkqpwugTZ/8rdW+CxPkVc6kt9b6FWOn\n6i5asdtMEvHUi1+mEf7e5T5jgg6shhV0O/Nf577+CKk+duobq+WcT5f+esMI\ngJ3UidH417eqkCKkjATZ3mlboZoX9/zvgOLRX0ENuLTllMxKqrcTx3j77jLy\neXk4VUjiKpQ2Pi3tyHZEGRFtoj5dSw8pY4Da65UzjOyTPLlHoOYVerVEaewH\nilE8\r\n=mccG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUMCazjcs/4Rv9OhdqiuxG/z114hLV712w9XE0DTtYdQIhAPPPeUmVflQalCR/co571ZobtNZhQ2qYfzOyiX+kp1EP"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.30-beta.1_1631767926117_0.4275894057233083"},"_hasShrinkwrap":false},"2.1.31-beta.1":{"name":"ecsite-form-builder","version":"2.1.31-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"c3502dd4ff09da7b45c8121afdc119adbd0c434b","_id":"ecsite-form-builder@2.1.31-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-OaWEu9prfWGm1NeokQ7DMTAot2RGP1IavWX6E0kY4mqRA4rI18k4AHptTPH+Zz2VigHmnwSG7dGQf3npj9KkRA==","shasum":"95c0c4926647ee7d7d4d0747c4949e5b6dc892a6","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.1.31-beta.1.tgz","fileCount":81,"unpackedSize":3017565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQthqCRA9TVsSAnZWagAA+5oP/2cmUlo3iQ+8DQb4WU++\nMGcL0YVtPGdDvd2olWlTx+Fw5hyVEIve2boDyBIvy2GOY30PIgCZDx57Hg6/\nGLNozBPL2kz+API2UzmHPv+WgqdmsfRDUvUamgY37P40UV13+UL3zMIC3FQE\nDelUV+Jc1Arx3nD8BgWVkjeYZ0kRF75P8qmyR75TV/2/1h7t4hhJaYCp7isI\nAurHklHMQFWzZhp/5FfYPkyV3tvaACsb2VotJpPC6DoqUkzWkcXzbkNy4SQW\nVFJUsVAFaRnx1cu3SA/CXiR0PRwOau6SBLpfDd1ZKlm/5C+I6ArHnNn7DdNt\nE35sZNRyCfn4xDaRJk2TLi0NKNiVvFra3WwDjK1JI48zJPrwXtCktVCp9T7q\nGcvtY8mywTbIK317XSqqW/EJyvq4nDtwlkzF7FbTaHNmXAueiz9m7bNrfM/S\nY9mrBSeAp3K+ud/St4JU5DE4SEJJ6R/+/6bJIMagTU90+wQFJtmVd2wu92Sf\n9/cD4THNV4UU5P+VQWpj1M2sjm/mh6j5wCVqC7c3qcYTFfnkmBLgKL/wHXW1\np8fUHUmZNEP8H2sZBT0u4Gds57SXl11H0DBsbvb6GfZlzLeN7fHNOsral5p0\n9LSR4OqY5EFPjPFKIXOkhausULNKz8PQpvmBLDbELO2u8P2b1LBaLr+G/d/q\nFwgt\r\n=XyaC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjgu+yTxcrQeyaHSiRlEOmlbZB+QeDfaP6BjLr07urXQIgct7lkQXr0DwH7EF0e7AvJoa2RFkTnB5uYCQZuALpysg="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.1.31-beta.1_1631770730493_0.4811288660621176"},"_hasShrinkwrap":false},"2.2.0-beta.1":{"name":"ecsite-form-builder","version":"2.2.0-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"c3502dd4ff09da7b45c8121afdc119adbd0c434b","_id":"ecsite-form-builder@2.2.0-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-sTaDEf1kGUJGLbVXbaSfVI8SGxcS93UhHYfrUhIcq0VfWy5HZ6wZ3bmsrmCx74lW1wehVE17KgJWpLrWkNAlhQ==","shasum":"932450fd2c371a0bf4348717ed2380f29470f4cb","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.0-beta.1.tgz","fileCount":81,"unpackedSize":3017501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQuCxCRA9TVsSAnZWagAAggYQAI78+8jk4j1qk2RIFqTN\npf+BIuItWBjbHpOOooUMYRQweIyNW+KB7g++SWsARGBRSPrle3vymUsnFBlP\ngFxb5VuP7bVsM9jIVcdrNNTyLy/LvTuOiYb4RtIdkTUucHYm8aWCAN4bomYB\nwJjrn2VYzG8yzDXXlrYDY07vrqsUPX3U+EhlJSgfB3fzeGs9hqDxC92U9Qs7\nl513vQqFWpIA+ZIk0XsTQgNf5LNvfeV/XGCF/YFuaSB9DezQEbRipF9X/k4y\nhNqCNLZkHpA1pV8zo05swQvol0Gzu7C/gUYPOwkPlnacQRbyo2K2G0YBJXk7\nlprB7f/fnRXg3yHRG6A/o8MtkUptR/obMp1mWp7epKKWkkshLoAyG1h70GjP\n29JbUFG5tcm6hOr0w/FnY8fHLUXLjEdB1Nmg6Czdy2jmP3sqgCmnjIAiojjx\nD64waBrdYpEsmfu/tbUI12K2yYSiAcmxr1Roq7/XcqYc5HqfraRx9bq13IKe\niZmWyezW+erUAPvPmT7rZlxJvO4nbIjnAyHroUQmVTfHikZKvW8+S8waWDsH\nHH/CYqDfwFbBmaZIpqoGk/BM7w1yoNF98170/Smb+l1ZOKt9BpVwR096/lI+\nOx13v+f2bHX8GwIdjaB7OAUZn469Hkq7Q9cSe6xFeBS7m2cCDk1gnYg2G/y5\nCdf/\r\n=Z8KH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICMvHD7ViFEhtz95B1vLuB0uslnI6LNIPUI5YSDUrFPtAiBWJYO26Qlr/l1DFaHmdXtxWpO0wJTnTPCGfT85LQ9OAA=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.0-beta.1_1631772849383_0.7528530263119773"},"_hasShrinkwrap":false},"2.2.1-beta.1":{"name":"ecsite-form-builder","version":"2.2.1-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"b4872b66c9cd6eb3c8312f8304902c7eabdbcfca","_id":"ecsite-form-builder@2.2.1-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-sCnMj33Zal0t/h8AyKNGwWzRLYKVR0kp/ultSGTMGfCLeSqg2xkKpf+z03Wf7SaHmP/Asc2SVyNdVbcOcx0XMw==","shasum":"389d15c34911a67085e4aa3cc92039cab6b49a0b","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.1-beta.1.tgz","fileCount":79,"unpackedSize":2917361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQuZ7CRA9TVsSAnZWagAAa7AQAJx64rZ+n0nr05o6waMs\nmkl+lAP5ibeqY9zrAUAMXiX+gh5wJ5pJ4Yx/yZQSXNptDDxkelpOzQ6nZYDJ\n6QzIytHB01OnngOAQN65pdtEvBmPXovrnaLsj4jysU0NVxeBG3a+yomjTC2T\nwmjnY2mpI+Dmn6hifodOCI10KrYHOqkduNGFOGmX4PURPxYGShNCaj97DDZj\noHPQSZtQKnuC4hKWYpmGo4yh7LvOCS4JJQ7pUN8lJn72s5OhkHhEO/0a3d62\nFib8ykU8PwadeboTyMZURK0wO/e5Nw5Meea04sG11vBzfXYi2vziAgS3pdOV\n6lAl4pU/lGD4cii44CVs7eeoKWp1JoFoFSdpGvrMi0/NyNXTS69MMztBBOoM\nHpQu8zVsu3/KZjejjkyZ2tCv+2NLdw2Gva7TV3t5UjMjQxZfpGt6kT29DSzI\nQuUlM0iOYaYvizI5OzdjD2uDd2ushB/mlx30+YvD6p1+dSlC2yLVJ2AaZRpp\ncerJW+7kA5CmRMHx/f6Lar8VbUgC5eet0HUWdYFKxPb867pSUkrEGatUmMZW\n9S7l8X+x4rCiDn/reyZft0vIn5fndcbt9Ppnqjx7JrQopk6HkbTojL/vtMmy\n7W3apPWEBk/os4mt2k9czwkISIrxNVpFlUx0bR0Cc1ou3MdZff7Iut0EuLRP\nNkLE\r\n=4wod\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/rMh3BP0EQXjMSBBf18NBG7d83YJNz5bKyzmgkE3YJgIhAPjw5Uzpq1yDweYVRz/9QvarMU7ML2nYMdYdVjTVZo5l"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.1-beta.1_1631774331374_0.787230719629934"},"_hasShrinkwrap":false},"2.2.2-beta.1":{"name":"ecsite-form-builder","version":"2.2.2-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"gitHead":"f4a55e236801413b8a4fee7bf6f88ac8f5eeb417","readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","_id":"ecsite-form-builder@2.2.2-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-9Ft5LIDbHnZvViuHZyytSOZOCSbkS/xljtRfS9Pvd+U5ZaH9ACDtT8nng72RG8au2CdralrqB8MwT5s4bGPBug==","shasum":"252eaebf2c2a5b03cc1e0c13090db1c8c860301e","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.2-beta.1.tgz","fileCount":81,"unpackedSize":3019918,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQvprCRA9TVsSAnZWagAAITcP/jcgSjs1FlB/T3cC1FMQ\nAe+VcrsJUd8mB1ETBqk7aWqL/sbkshNDOhPzr5qV6TmS2chaTf6I0JT1NDJj\n3KD5VYXWyfQ6rBLES/Twnjeu1wLJsLWRq9YOeF0aR+rLvBQXrLHvL1dqqwAk\nB/E8GPOjhh8uH8XQvwZN/LKBYnweU+Ndjbk4bjO7hLbNCrGO3i5J5Ae7glUG\nZNPgF+HWeRIPCVu0pY5jz8PcseaKCb0KHyQv4xlTgVSDxQ/ITt2d91pl+w5g\nB8G3gnHmj/pRV3Ih5zpp6qgYzZ9MjBnbgZNrFRMRXdghZkh8lzmqfhVUpeqM\nk7gz0g0+r5NkeESO4qjXl8DxxUZnmeJXaavE5cKSESo+zffNWmP2s3dq3NJd\nA1EGFmLTlo5P2AHy9qQ6SYEkSAsbDxGb0ZTYXnqkP7yNCLyiv0cZYe1lK1Aq\nt7ihBL0aV2lVIl6UVGTR4VjdjqiJ++2SqTuDIZ1hH+7VPUcRA1H/+ieozvb2\n5doFtrfSf3conLZ1QXf06okTpBvvlhdRU+So8CfCcOX7Np+BDqe/tHoo5dPv\nD5K0JinCs0fw20WWbdWTshi/kcxof5gd/nIgNCOVB3AXionvFgBepdKdxXP/\nUnRrGlJxDMP0B0xhFkEHfC5Lb8CLFyDvw501+da9voXi7Y+Ta62bWmP62s3E\nrFH0\r\n=6Bcs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJjVc+zQQZCF7dUwtwbD8vjE9ue5XCpzBL6SbxlQXYRgIhAPkPyIeEMQ9ktBTW00J/QWFi+UfMHgbGdp4V/2S0wnZt"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.2-beta.1_1631779435661_0.7550408233001473"},"_hasShrinkwrap":false},"2.2.3-beta.1":{"name":"ecsite-form-builder","version":"2.2.3-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"b3c4c09215cdefd37b2a5a427067877bee9bb7d2","_id":"ecsite-form-builder@2.2.3-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-ZmE+yMG8aUvwrdud1cnuWmTqiX3zNzaB+UQt4R1jloZghaGcjumOJzylWCQWBScAYlxOgHmlPbERLss6W1/Diw==","shasum":"49bc37cc913735e3f1ec49ec96bace13d817712e","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.3-beta.1.tgz","fileCount":81,"unpackedSize":3019958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQwL8CRA9TVsSAnZWagAAzsgP/jrNr1MgQy0Hq7P2OFWl\nkH3+gjiqThBcfDuacpomhW7eMB7OGLjwfYjTmKv0ZWqvUfF+OBP7RitNyFv6\nujxYKaoZpNBKPSewup6qdR9s8QHhCi0fKeGyyKHQqLsv4oUMart+3TKdqzQT\nm3cP7ABS+lRlbJ2YdwcU8/me2Jb9SRYyON5Oh4xvSZFrXbFo28XJwgph7CGZ\nYZhtWNpi/lJF8kSJ9j0dgg8xQ64SgfQNNgxYJp3QDV5GAFaLlt5sYYl/0dmk\nIKYfW5GgBXyb/3gPUabCLEmiOt99pNvllM877Fz2gjnOXSmqNh3XVMn7wUGZ\nRYsc778gBelyxj8Opzyom2L1MnFjzuFvGmQXWGXHfnvNhmwE77zrdWp2FyBx\npazTaS8wBOc+0I5gIw/zeqNeZcxG6VMiTqekxOmuXmQZZETjHnXv768cu3rJ\nPiP5kIgHK8djqIXrBqzMZC33Ei/p78S5tARw30Rf3ObBdGydj793j3tnxwd9\nwSq+2qvA8dXFPlpzwTbYI32PbmZikffOov+UWk4nwxHZcuBJmSK4pKoHwKkJ\ncDV9YP/pdg4CVmzFnYe7aC26Qr4NYEPE3yNtEcEyfrJar01i0zp+QEoVs0Jf\ngQVH0Bi3I5Xamdfu4fILxvCzGwlMia6Gcjr9XyGldT0wyYJqJJsx0P3IV057\nYtFn\r\n=270q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTTkrkEq+8O39P1b+pZE1xNW5IUK5wxzMVOvjUc6jyzgIgXlsiukUZXH2zxkjchD8uBt/IhMp0b0Lnyx9zbipqdO0="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.3-beta.1_1631781628196_0.3235928466351621"},"_hasShrinkwrap":false},"2.2.4-beta.1":{"name":"ecsite-form-builder","version":"2.2.4-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"49a2362392c085b1f904363da6ed8b8ab8ac0c3c","_id":"ecsite-form-builder@2.2.4-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-yKzuUV7tRrs/zf+uBbZsySCfWVZce77f05ZVw0K+Ra0dpqdljtt4zZf9IvIP3G39Km0xaoRElBEAUyLUaesueQ==","shasum":"ccc9712ff293632586741693a2779c898f6f6dfa","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.4-beta.1.tgz","fileCount":81,"unpackedSize":3019918,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQw+gCRA9TVsSAnZWagAA2e8P/REfmm0IFBDZp4nqYARv\nc4EKgeL/Gw6FJZNT0hE+h7nCQ8wCzDvEaj/RNgOr4ggUGOO5ox0PQNqV99HH\nZjf6JjORkIm2JwBn8NlVbon4uozmmkg6rjoSlhe7Xf9RP2uWZ/bryPqaNw8T\ncm4BNOpzgtEu/DxpLlIH/ohuk/ljYpuepEA/TZVFf6SIlrkdYOoA2rVnUe/S\npyOYWlGAvn5IdbZC+4XoFsvY/tWxzZeEwxrV9K0lwuyhwUxXJEZdQOfVmZI6\njT51pX/A2djMoCTer/FxskphEUG0WC9EwHYUG8A/4KDSjCXEbiFaY6as0t3I\nHRCfjVexqUwUGVMulVF+6d6EKS/jtomLMuERp/OW0Hl7UYzK/kopzLKs6A9k\nvRZTqh9ZA/P8Vv8emeoZ7hIV+P4vGFGZkhWOwV1sKSYsylJ3T/xo63LyjgBS\nhTvPRW6hwAoVFybuJpFVfyI35V9PpY0FThT9C4X05BJYU1/eqolC9zPnw2IX\nrHcSDvJSik1X0ZpvpW+unAfS/B1yNcbT+RTbW3Cayp1e4trlRGa7P2/YzBmj\nqjRUOWdGkti+W75ZygP6RIie/0566uR7aUS86MTDMaTgsBKS0gj2dGL6gnPk\nByT4jkJXqxCac1IrMSWhuInGKq18PGPVjZEfKADLJ39CCeF7tSoLnINfYrR9\n3QiM\r\n=FHU2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB2JHa5K0/W1q8a+skuHXrcchf7MAHpXhKOAZP+mz29cAiEAjs2ONVVgZGqxBWQYtJK7HB2z8TvTE0SlaLo2H7n4x2Y="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.4-beta.1_1631784864240_0.9577299951482521"},"_hasShrinkwrap":false},"2.2.5-beta.1":{"name":"ecsite-form-builder","version":"2.2.5-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"2e4fd6339bfd163951eccc801ff81ba33c2fcb6b","_id":"ecsite-form-builder@2.2.5-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-iV0N9jlNzJr37rJS3RQZD1aIlXxYGH8Rwb1aOmEgoG867NT3RmjxJw9KsENSxme36rEx9jEZh0/YDxAIed5XOQ==","shasum":"6b2c7da218a518578a960233dff48d5cd2a98994","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.5-beta.1.tgz","fileCount":81,"unpackedSize":3020322,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQxhaCRA9TVsSAnZWagAAvCsP/0mX5FzONqbiEwyFzSyN\nHIF3h6pFqh7bChL7jnn8HU55AvHWeFMNKjKmJq+jWyjSuN0v4c7Ptf+HXkgR\n4OB6dr7xVDQ+/5czd98d+6mJJiqE4ZZ1m8RIwJUIfr8euXeHxR3nupgYwqsR\nWegnEyccukm3PxASC8mQQUSdVhrCG8NABwwkemK3eICGTd+uqfobxSPjKbOl\nOojluU8VQAn4UeCvy1KXQQ3jhxrfIvWBswSwAE5WB07FHhK26d8SZGLK2LN1\nZB6OSkhAxD6KuZ47MmhZ7MsyLUGqfULO5mCwb9H1Xn6sipVDl/fggMrzxSzv\n1Ib0O6+G01qWkRQxiz+9BOaZ34FVnalYfdhkD2jBrU9T2FjjiEaKdFBXWKy0\nOHVYhA/OqXpArOxJMop0b7hi8DQ5e9i2iajuP1Rlk3n9pskSmVHXvjVcORtP\nQ5rUQSgY7D3qN9tg2opTTCAOMu64zzt24q3v1/eE4oTaovL8iCROr/GJDTcS\nWEEZR7cRmCxa7Jc+xCO/BynNcg3swNBvQ7yiJCXHd0xGkwx9gZQXxAA2BR+Q\ncYdyVWF8Pn+7vugWedUlkJT8SVgmmamURoyK/Als0B93J69/WB2Gmc9cTAK3\nL8q+gZqm2HUPeuvb5aZZ1R3np23Ufl2IqkcKRSlWXgWZ/7d97ovG73SiZI7e\nNvm+\r\n=veBd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEXkZvfSsFm+H7mvHJtZC5ynQNEGXbxmb/89moXbRxQIAiEAj8b9oHpTuH8ryohHkHWJxyQGmhhmYb3bHhiUR+AOm1U="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.5-beta.1_1631787098519_0.33002220557243733"},"_hasShrinkwrap":false},"2.2.6-beta.1":{"name":"ecsite-form-builder","version":"2.2.6-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"d7eda32b9456927f0dac0f80b1ad3b4ad17cd6b2","_id":"ecsite-form-builder@2.2.6-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-1IBrDtSAV5hVuStFgCISl5Y47tZ76w9Vft5Kdyi1h8mq6IDkG7PqjHVqidZMRql/GvUAHPj5Kzsuuq58RorRwg==","shasum":"9165a89ee7564803b4aaac02464ebbae7a0948c3","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.6-beta.1.tgz","fileCount":79,"unpackedSize":2917463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhRAtxCRA9TVsSAnZWagAAP7UP/ixPDPHzKXXxPUwu/+pF\nfCz6Drw/K6+cVEXRj4oEK5BVn2i0/8eYgQ3khZZb/JpffWQU6xaVBRTdthM9\nv0E0JkPL5A8j7u4o0j5IZli1fFjO6RNX/ljsjwzLKO1hBFXnSK/3UAJ6OFiO\nGuTD8ViAiOFFscOZb4LBLOeTViesJqv6hCjUDS012IB5NDduTjFxJfymtxpJ\nT51HVr4S/IdoMpBxNUQKVZgdDTUstLaWJ/sYfE9wuea3uspplHaRXxYNcRjI\nhnaleYO28RfjdX3aUjrOP9Sqatmw98kKGIfXAjyWVt2YuxPa+nzoIFYl9Ru7\noEQybcWtJY3VqyrPxknYG+CKczCATrA8v0VYcTVVm9W5GmPDnFjV399QkwIj\nN5FTH61RnpPBhquJoCEkrFXnHh9cMr8gTyIFwmt5Jr4V3t2T3pRhWM0kZvGP\nfxwQwHbKqc56ZwFiD/05qPFpq9GzNdWWrT/dTg5FFTbn8N5d6yyUAzUFiUTZ\nQAdvNextgXuG2joaxRQ1ApY475UqRgesW9dHQy1/KnApRYOnpgQZmMie0uPz\n1AvVrcz27AvUQ0pgKsWHn8PVcr7SmStStlwPMzSUv9Ji5wK1fJag888X8+cn\nQrq7LtZv1DqztfadIbVpxx6fgJZWhfqNucwkVxqhfiJfnllD9Re8TTzaAGWm\n0SEB\r\n=xU8R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8yjWCN/l9w8BpiZAWg5RoSUMbWrNSsOzr2q8KkJYB9gIhAOUqs70U0XxW671IBOqcCFqiZv/042BT1E+JnWjHDAPO"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.6-beta.1_1631849329659_0.022087237191284137"},"_hasShrinkwrap":false},"2.2.7-beta.1":{"name":"ecsite-form-builder","version":"2.2.7-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"0d67b3647cb6177882419e3ac904f75fefb3c0fb","_id":"ecsite-form-builder@2.2.7-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-r98oNCEeu5i4ZAjdKDV5YEqlLbHVpfSPZH6+TjUa66H0uzJ8hHlzdUZ/xnrnVdRKzmKrjmmaynpmyTOHrmarSg==","shasum":"29ad336405fba4d2df9ce243a1007454738e381c","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.7-beta.1.tgz","fileCount":81,"unpackedSize":3023111,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXibwiVvfCquy1601ggom7DJrgj5+C4vYVPHXhHC7TUAIhAPKRGtgruIZcRa6vZAIx3vtm8a4n5K3wN9Ik6IdbboY0"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.7-beta.1_1632122272014_0.22804256455561167"},"_hasShrinkwrap":false},"2.2.8-beta.1":{"name":"ecsite-form-builder","version":"2.2.8-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"eda455a70473525af8e486e31d03465035ea3cf3","_id":"ecsite-form-builder@2.2.8-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-9pR48hVhdbIqd8U6vpTcltCN8xN+EjIgWQFg1Me+aerskt+o7aVoP+MM7R+ee4s6Q/WJWQtZcvEA700r9u8OYQ==","shasum":"62411b8899b6e3e9f9c4e96b706f80de4e4ffba8","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.8-beta.1.tgz","fileCount":81,"unpackedSize":3024482,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCL4EWQLazo8bb2mGvDZqNJqhTkVA3FyKNfKdJrnJjSaAIgJ6WGh33MqEAEp9CrzstF7C+036uL25p592nGVFP9SDQ="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.8-beta.1_1632126138891_0.34181427316170043"},"_hasShrinkwrap":false},"2.2.9-beta.1":{"name":"ecsite-form-builder","version":"2.2.9-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"8ab80eca984a59bd12b910e4139f349063e2db72","_id":"ecsite-form-builder@2.2.9-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-+Sv132WGOQ3BD01vGRkr0+k64Y2imSA716dXWwh8zxdxRmOZf7ZgPexAokm8yVTEapQNdnveeAbGeJpLMt2tQQ==","shasum":"e5c6e98f46771b50cb666d1ca0a5bf7aae4c1c25","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.9-beta.1.tgz","fileCount":81,"unpackedSize":3025852,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHA9KIEWhw+TPvFgbaqDtKMJ8KJylv3/Nu+ZqdHt8po6AiEA9MrXJ9ixxZ7kbRP6ktiTYqGIrXaLEhlNRJzhcZGEFQw="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.9-beta.1_1632192639346_0.569661184233313"},"_hasShrinkwrap":false},"2.2.10-beta.1":{"name":"ecsite-form-builder","version":"2.2.10-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"8ab80eca984a59bd12b910e4139f349063e2db72","_id":"ecsite-form-builder@2.2.10-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-1mOSsZplbn2UCKAdzWncs3dWBugqV2CU5h1jUaRz27BMjT8QBTjBBZilnyCMpx6L8fcF6qPjWMj0Ox3D6z4AeA==","shasum":"5d23dddaee6ae5eead501d9fc79f23754ce88d0b","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.10-beta.1.tgz","fileCount":81,"unpackedSize":3027214,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0lFfIJwX/03DSO9Z9rY1dJiOdeDZAdSkPLPd8ZKBY2AIhAJKT8qPeVpnSzTamLbNslVMezARiH+Ywh0hv+yoKHd7Y"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.10-beta.1_1632195235911_0.18859031359266076"},"_hasShrinkwrap":false},"2.2.11-beta.1":{"name":"ecsite-form-builder","version":"2.2.11-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"8ab80eca984a59bd12b910e4139f349063e2db72","_id":"ecsite-form-builder@2.2.11-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-FIztMdGyBR46RVtxoAUT0mn1FdLrD/Q1E97Rne0S+F6WAvhtEhVfkNkf1jGvpEpXlKxeEG4ntZ+D4Gc60ia5sw==","shasum":"743a5711d6c457c6ce3f63876d5362d966d87fc8","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.11-beta.1.tgz","fileCount":81,"unpackedSize":3028356,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyoxJBeMWN3wC1RCfXFdiLisvNVLxz0KGi7RPwmuZ9QwIhAKI0UoIAqlvynHEJKA3e+XJBpfr7O6YniytGvz5B09Sm"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.11-beta.1_1632196096574_0.6398193430227714"},"_hasShrinkwrap":false},"2.2.12-beta.1":{"name":"ecsite-form-builder","version":"2.2.12-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"6afda95d50b90bb18b3163d5bafba7838774bf9f","_id":"ecsite-form-builder@2.2.12-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-R7R5CnXeia5CDneTsdbtW8oBTUfWGEwztlpLfSbXpAX/UNL0MME6zIjqO/GF2mY4QNjah45AIYIY5NPtM2cnzw==","shasum":"afe67e18bcb02b7f5667692dc606034a4ff64ee7","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.12-beta.1.tgz","fileCount":81,"unpackedSize":3028587,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFLy1ygUarbnkgvMg+7npsMUtl9JQAgUsdE9R9lKMHPAIgaO6JWD464YzGu+vOeOVSJZBhfiLPnyaXDVeG26usJkw="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.12-beta.1_1632197808264_0.07659941075670562"},"_hasShrinkwrap":false},"2.2.13-beta.1":{"name":"ecsite-form-builder","version":"2.2.13-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"6afda95d50b90bb18b3163d5bafba7838774bf9f","_id":"ecsite-form-builder@2.2.13-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-l50hOWZAQiFck45J/py1YgzWztO96NQz6FMVzKSBHVxleizVOub+A0wRv/wgzeo3bSlYyNiGcq1jOlQwOZryhw==","shasum":"796f6ee6c72f05e397fc4172820fed0013b42121","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.13-beta.1.tgz","fileCount":81,"unpackedSize":3028696,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+L+Vul+uL+Ah4PyWkV5UydvcdwJgeUB6DZoRUzsSv4AIgKYm89ZbMeFYzEwW58iuA2/HUQaEErNPOysF4i2CaDqM="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.13-beta.1_1632200291972_0.7680800734524296"},"_hasShrinkwrap":false},"2.2.14-beta.1":{"name":"ecsite-form-builder","version":"2.2.14-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"6afda95d50b90bb18b3163d5bafba7838774bf9f","_id":"ecsite-form-builder@2.2.14-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-0AEWoJeabr38dd17tdqkbltaAHM9FmorRqhpv+rwcktvVWCY4tQXttBZ7LeA/i7Rt0oz3Nch9a0nukYZ4zsTNA==","shasum":"3e140341d2a2e3c47d3e74904a2f36afac68ddc7","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.14-beta.1.tgz","fileCount":81,"unpackedSize":3051305,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJSVzgl1HgUwgWrVZ3fQXROnhU28jFukmuehdHDs00HAIhAK+yXgS5LsuPVdVGaG3qq+dv5R7EpM+3jM9KwwdGG0C7"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.14-beta.1_1632201001192_0.337761075072351"},"_hasShrinkwrap":false},"2.2.15-beta.1":{"name":"ecsite-form-builder","version":"2.2.15-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"152b2aa9847f9d0c849d75e052acf191d70ab2a3","_id":"ecsite-form-builder@2.2.15-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-kyLFR6b7PMDMOV38o7XdLAQvGUfIMEJGoCBQnTukGc2Ed/kTzPK+t5zp9zXodLB/Ld+OBM8J4qPQWb0cSL67xw==","shasum":"bc4f9f54b04eb11db4ffbedf1a03653895cfbb40","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.15-beta.1.tgz","fileCount":81,"unpackedSize":3027839,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClcgwqzuOhfZWTLoalrKRgWXtqTwwyYth0vduYfbK/MwIgIkyzPjGgTf6kRjnfj6RKBkyqDEyGmGAdnlZp+ZByKPM="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.15-beta.1_1632204565107_0.5508315363492395"},"_hasShrinkwrap":false},"2.2.16-beta.1":{"name":"ecsite-form-builder","version":"2.2.16-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"3373ad67f7f5f89644023db4a9b452524298d1af","_id":"ecsite-form-builder@2.2.16-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-z8kyIMntFjUkldULLqXIbW8VyvIXTXsaGzo68NEmvLBqqVZmubkBSlO6rhMEjkPHlw6OrDGCZX4ttnEMpY8SUw==","shasum":"39c01d510dc9b81a1d123ec1095b57b015b09eb8","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.16-beta.1.tgz","fileCount":81,"unpackedSize":3028800,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDpkvRNK6VEOFRHt7UEwAKZkplgfdXmg3H/dsNs2VPtSAiEAmya4ANaawYv0zobJwxy8lMLN4917Rw6gd94wOxd9yOg="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.16-beta.1_1632213359905_0.22277264258267326"},"_hasShrinkwrap":false},"2.2.17-beta.1":{"name":"ecsite-form-builder","version":"2.2.17-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"3d0c8d2ab2a1df9407e06b22e426c4e89bb6160d","_id":"ecsite-form-builder@2.2.17-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-6ijHuO5x/ZqQoLUOGeINZx1Z15BWVkWL0QkH6DSTEpBwP0NaUvcFmHRP6v2mr/2FXjMm3EutQGvsgiXa3SD8Lg==","shasum":"5c80e4ba0e206208d4353358307943abd0f0927c","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.17-beta.1.tgz","fileCount":81,"unpackedSize":3028975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGz6fY7TMPCKYqPNyqFDTtBGckO9IIRyeztpZKNYG0VrAiBbLt/+JEl6Tt14lOg2fF8D+BvxyLbb8F9VPRTOEf4SUA=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.17-beta.1_1632227084029_0.848295804682544"},"_hasShrinkwrap":false},"2.2.16-beta.2":{"name":"ecsite-form-builder","version":"2.2.16-beta.2","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"3d0c8d2ab2a1df9407e06b22e426c4e89bb6160d","_id":"ecsite-form-builder@2.2.16-beta.2","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-IBY317ochq50Mdt4O+40NSiKDBVFQPyBoqjkDzPvQ5CvwHyDgYHAccAwzX2Cqo89Aaa8KKGaAKKWHY9xBIjRfw==","shasum":"50d6c8e8b7e82c3232e2a04cb25cfdf5b59a4f69","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.16-beta.2.tgz","fileCount":81,"unpackedSize":3029600,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEmR1pIdPIhF07nhO91KLAvEQiXEQJ9EGkXSjJaB86WgIgVWFNwTcg9rxrEVioN5Bn/wbfc5UpMQX8DkioT+2xi9k="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.16-beta.2_1632247933535_0.15111116835754812"},"_hasShrinkwrap":false},"2.2.18-beta.1":{"name":"ecsite-form-builder","version":"2.2.18-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"ff3e209a2c4645b5b64aec92cbd681189238b004","_id":"ecsite-form-builder@2.2.18-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-NcLdE4oM+5zo6BlEucPk+G1fndFWlXyHLeIPytpap9Uesa3BbgH2A/cmzekhpz/3thXLV+cIABNabZIdkaiLGQ==","shasum":"52e621e6a2112def87ba1d34ecd2b2909bd530ca","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.18-beta.1.tgz","fileCount":81,"unpackedSize":3030841,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEtWMGUaxOmFxj4tMGyZ9UeeZ8g+1NRyPizv51p+E3CLAiAkzk/YWjfKUIkqnKRT8rZLIS6M7ifkdFrPdNI5r8qOKA=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.18-beta.1_1632279209572_0.6819194299647038"},"_hasShrinkwrap":false},"2.2.16-beta.3":{"name":"ecsite-form-builder","version":"2.2.16-beta.3","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"3d0c8d2ab2a1df9407e06b22e426c4e89bb6160d","_id":"ecsite-form-builder@2.2.16-beta.3","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-HnjgcNXTHeTTm6b6va+gsAfj/FlxKQOiR+xqYkWrKll90AjyeDSraNRqUfV60Pu34SWp4xbBlw5GvxQoX68SOQ==","shasum":"1c24d2755da1b576f5e5859942a5d02e87c9f94c","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.16-beta.3.tgz","fileCount":81,"unpackedSize":3029613,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQQfn7GLjQ4Btky9SDsrVy4dfkdnMes+HiOi4x14dOqQIhALMBA8wp366eeAoipvSkZk0zwjPMPLdvixVawwtBkzAk"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.16-beta.3_1632293040704_0.6691074438527351"},"_hasShrinkwrap":false},"2.2.16-beta.4":{"name":"ecsite-form-builder","version":"2.2.16-beta.4","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"3d0c8d2ab2a1df9407e06b22e426c4e89bb6160d","_id":"ecsite-form-builder@2.2.16-beta.4","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-gy/Remc5i5K7eVaalWTWw6/JDdgo2Vv34qRIuFkcw+IE6iAQx1ca7aN1wzDTl4k70KPYpT5lY8CkthFqUWra4w==","shasum":"9654932c246a322491c81457689bff7835cfcba9","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.16-beta.4.tgz","fileCount":81,"unpackedSize":3029613,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8ylq5TthbWzQzAxVUcrqnKKzS2eTy9+pH5ZZb/A+hygIhAKYywA4kopCiEsFI6opvQwbcsmf/uMkDWcAl4/ZNktkZ"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.16-beta.4_1632293821376_0.3385973716001711"},"_hasShrinkwrap":false},"2.2.16-beta.5":{"name":"ecsite-form-builder","version":"2.2.16-beta.5","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"3d0c8d2ab2a1df9407e06b22e426c4e89bb6160d","_id":"ecsite-form-builder@2.2.16-beta.5","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-+fydaX4Ybj64mLA4rKuFyNzSKKMcRJMRvWFJTYXM01eArpOWpnH/xTwvnN7qOpC8P6X8PRNs7p/E5hlLUWRqHA==","shasum":"272150835583b934004e55fdef97f8f9d316decf","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.16-beta.5.tgz","fileCount":81,"unpackedSize":3030257,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDWupnI+3dPzH62c1089EVTr4CnCa8X8RsZkeJoN721sAiAk4NdRi2eJisZ0wyX7Z6XBJTQAXZVN6gmbgq55ovAuEw=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.16-beta.5_1632309987177_0.024147088881056655"},"_hasShrinkwrap":false},"2.2.16-beta.6":{"name":"ecsite-form-builder","version":"2.2.16-beta.6","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"3d0c8d2ab2a1df9407e06b22e426c4e89bb6160d","_id":"ecsite-form-builder@2.2.16-beta.6","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-vDD1s0iuZAtSEoDpvbhj1RV+HQsKB93DvT7b4Z6xdfb348GNRwp+N0X78sXJXvCq5YlmtMGXaqimE1JyHT07Tg==","shasum":"7489646b8ffb049de3bc912903ceb1be08aa3f37","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.16-beta.6.tgz","fileCount":81,"unpackedSize":3030326,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdQmrNTMTqUrycK8dcSLf9HqQTtK30p3x/l07U6diq1wIhAPTMqurFPU7JpAfgX+eXbml4GIr1hbZRCTL/rOU4BLcK"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.16-beta.6_1632313587048_0.15811064429207455"},"_hasShrinkwrap":false},"2.2.16-beta.7":{"name":"ecsite-form-builder","version":"2.2.16-beta.7","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"3d0c8d2ab2a1df9407e06b22e426c4e89bb6160d","_id":"ecsite-form-builder@2.2.16-beta.7","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-FnujAUs2IE7o99twfs8IOnjo25Lmc8wO4xniQY0c/fXVt5vnJccqMijtLx1BCvyTVb1EGRIoh3CHNg7VOmA1qg==","shasum":"9c622595e6b56e699a278c278aa79c6ce6f89fc0","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.16-beta.7.tgz","fileCount":81,"unpackedSize":3029339,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCM9BSrxv3O1OqPRq4+xze/4XPnE1dsIrsLKkMxP4FjrAIhANdiFT/93G4xuZ17SOqWmrnUMTPzXheU4LQGz/GbP0Cc"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.16-beta.7_1632318123405_0.512879904217517"},"_hasShrinkwrap":false},"2.2.20-beta.1":{"name":"ecsite-form-builder","version":"2.2.20-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"ff3e209a2c4645b5b64aec92cbd681189238b004","_id":"ecsite-form-builder@2.2.20-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-zZI8uy37z//ehFG3lt3nMFuk5f443cAMDmqDXOTEL/XDBa5mHjvA7m9wPKPLhAKxSd5xxDATWcH18JxXtOhE8w==","shasum":"b0467e4fa1692ec5aeedb2aa0be41ee7d2ce8a11","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.20-beta.1.tgz","fileCount":81,"unpackedSize":3030829,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG3UEH1C8JyH4DJaoA+BGCBG5RQRNTz7IyYDYeeOHyFhAiEA4V/ah0vO20fXzEFzYX2qjT3u+D+5aKMr5S1QBmaC4IA="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.20-beta.1_1632319747344_0.45482034790842496"},"_hasShrinkwrap":false},"2.2.16-beta.8":{"name":"ecsite-form-builder","version":"2.2.16-beta.8","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"3d0c8d2ab2a1df9407e06b22e426c4e89bb6160d","_id":"ecsite-form-builder@2.2.16-beta.8","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-uOB57FIDXjRxLxWtjIzo8UVMp/NShh0B+Hhv8Z01WaJIe+S1+8GLgms+YDCqdZJoMOZNtSRfuFl436fFFJ9/0Q==","shasum":"2dfbfe545283775454a525656fd931ec3fb2c2c3","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.16-beta.8.tgz","fileCount":81,"unpackedSize":3029339,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGSvOEtOXqyhqmjPs2OrShOCPgLdvVgLE2k3wKoXCrHJAiEA96tVRhiMUAFoN0hbC8Ttuo1QHl4S82SaHW+HUY0B0Rc="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.16-beta.8_1632380294073_0.0562828136450253"},"_hasShrinkwrap":false},"2.2.16-beta.9":{"name":"ecsite-form-builder","version":"2.2.16-beta.9","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"3d0c8d2ab2a1df9407e06b22e426c4e89bb6160d","_id":"ecsite-form-builder@2.2.16-beta.9","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-rr/Q/CvtPRG9txzlIjK2Eje+bCWg9oJojUhddwNcoAq8lc9ctszv7LeHm1Ou/D77w/9d1gp6vM0W4DFdZwUoww==","shasum":"8b103dc2197fc70f4836cb6b0c08b344c09808ef","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.16-beta.9.tgz","fileCount":81,"unpackedSize":3029474,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHVUcsMlr+oh7Oi8EBQXHq25Y/cTz3CPUMANWYpIvUTFAiAewNlztVFmR37RBMKsBPTYzL7nWCGxIM0Q9mPI0UiueQ=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.16-beta.9_1632388740300_0.5155081239549109"},"_hasShrinkwrap":false},"2.2.16-beta.10":{"name":"ecsite-form-builder","version":"2.2.16-beta.10","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"3d0c8d2ab2a1df9407e06b22e426c4e89bb6160d","_id":"ecsite-form-builder@2.2.16-beta.10","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-ZEGxWxhHEpgygymzcwCH32omgnjGBSAqo2RIXEFVVJSVbws6mfsgf2GmeW9mLZ8IU8hir2vXuL2p/Mg3sZjczw==","shasum":"98370729150f018b87f7357744f53b3b69933cc2","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.16-beta.10.tgz","fileCount":81,"unpackedSize":3030155,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICp9TwLQNJanfulmrePniyVW2hGHDRHC39zZBi1lyZ/gAiBO93g9N+X4lIYdmpmRwwEv+8scqoj39U9rgIcCfbs1Vw=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.16-beta.10_1632397981416_0.870446317457011"},"_hasShrinkwrap":false},"2.2.20-beta.2":{"name":"ecsite-form-builder","version":"2.2.20-beta.2","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"ff3e209a2c4645b5b64aec92cbd681189238b004","_id":"ecsite-form-builder@2.2.20-beta.2","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-jzLj1FNhZKwBS18ydGI0xXWfGKVcEbgNXrQiK+Qcyj3TalQW6fLfG/H8VlZuxovgYduBDha5bwiEXDu+UoSbHQ==","shasum":"6c12bc3f11785b12ef530859a5ca555c4a964e07","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.20-beta.2.tgz","fileCount":81,"unpackedSize":3032565,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGguTMyd0Ss4N5QBK6OuwIG2OSiBoJbh4lWo1p5I0ZHPAiAO6Per4dEtK/Aepr47eM+Iaozb50BzGdjigYIB/u9GVQ=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.20-beta.2_1632457917760_0.15115543201730186"},"_hasShrinkwrap":false},"2.2.20-beta.3":{"name":"ecsite-form-builder","version":"2.2.20-beta.3","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"ff3e209a2c4645b5b64aec92cbd681189238b004","_id":"ecsite-form-builder@2.2.20-beta.3","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-MdpYwqtq3TD6W3Hu826GGKp4m9mIjPEU+8oJ0a6nV5otBHMXqdVElaSdjiut4Ngx/i2BiQccuJeQACjuo6Zumg==","shasum":"085e2df8457c4ed31dd4db62b3ab33ad4c003e10","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.20-beta.3.tgz","fileCount":81,"unpackedSize":3032565,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqNr2sp/KW/vHDB3MIihrpw/pJVxH1pheKEtnFr46VTQIgDOdH0uHCKZjn4Zz9ZdpAp/cJm88hYml2dsV7o6HNY9k="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.20-beta.3_1632459688756_0.8665907106855979"},"_hasShrinkwrap":false},"2.2.20-beta.4":{"name":"ecsite-form-builder","version":"2.2.20-beta.4","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"ff3e209a2c4645b5b64aec92cbd681189238b004","_id":"ecsite-form-builder@2.2.20-beta.4","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-3JSQ/JDl44X2wSfIyn2xOHaIiOtd8/VEkt5NKjfpXzSstDhej7PiK2cDeBRx66fXSzXHFcWjPUcUMKuzpKwdHg==","shasum":"8a2f2f3e2c67f1caa41fc95e798be837f6049a8d","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.20-beta.4.tgz","fileCount":81,"unpackedSize":3032602,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDv6rDD4JGPnT0uUsZNIZQQDjDMRPRRdko0qh+g9TwZ6wIhAPYZJ3qy2kOQ06WdOGlkGAPtdnBAYfOjp21QzrWsJphD"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.20-beta.4_1632462191053_0.7414588372975615"},"_hasShrinkwrap":false},"2.2.20-beta.5":{"name":"ecsite-form-builder","version":"2.2.20-beta.5","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"ff3e209a2c4645b5b64aec92cbd681189238b004","_id":"ecsite-form-builder@2.2.20-beta.5","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-26paq9FGCSL7VApOuQQ09//EEGd3AvcRpC9Uk4lmGG6izrM5yRmi/jFLu/JujVpLJlPWGlLvw6wrsaDQmeIEVg==","shasum":"de893762d8f3e74c1a2fc62850e78b723c4fd4a7","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.20-beta.5.tgz","fileCount":81,"unpackedSize":3032603,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAflFHvZij8OlRifO0eT341Ll8WwOC66O8c0Hy5wfymZAiEAutrEz9amXIS0YlWk2vfTyvnUAwfd54PJBUeDKFb5jPg="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.20-beta.5_1632463489826_0.3506234654643965"},"_hasShrinkwrap":false},"2.2.20-beta.6":{"name":"ecsite-form-builder","version":"2.2.20-beta.6","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"ff3e209a2c4645b5b64aec92cbd681189238b004","_id":"ecsite-form-builder@2.2.20-beta.6","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-YB9Z3rvhH9eqvJyXxpHNv9T64bbH8EdX5a+9CBtQ1N7Mc33VPoGUXEYL8BqF+2zBfn7uLuBBQ54DZf+GY4ixtw==","shasum":"90e0978a57b2e222fbbea5493a4f585de55fa431","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.20-beta.6.tgz","fileCount":81,"unpackedSize":3032365,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjPZ7Myy43rMID0T7TEcKz6TLyOi+TvmppJkoMI/RB+gIhAIyGlxf+32g9tC5ee4h//F1en67OnF2/jteWo7Lej26A"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.20-beta.6_1632466590686_0.1727609029698205"},"_hasShrinkwrap":false},"2.2.16-beta.11":{"name":"ecsite-form-builder","version":"2.2.16-beta.11","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"3d0c8d2ab2a1df9407e06b22e426c4e89bb6160d","_id":"ecsite-form-builder@2.2.16-beta.11","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-ozAUEtj3SmsR7ISGbqehgON1cZXaOcRsYxjyrPwVVHrOHHJwuvgSyhmE34DlIbHtwClZ1jQHtDsjlPtfMQzKMg==","shasum":"0e631aa57d25b63594e518331f92775f5bc5f526","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.16-beta.11.tgz","fileCount":81,"unpackedSize":3030255,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICDL4I7HiqIN5Cq/T2ZPs6hDr2S03cEtAeKvvFGBa9wdAiAH9LVCcZ1vWjCQeiKGE75olLREITn3fX/gavqtXMUOiQ=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.16-beta.11_1632471341485_0.1075192497355888"},"_hasShrinkwrap":false},"2.2.16-beta.12":{"name":"ecsite-form-builder","version":"2.2.16-beta.12","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"3d0c8d2ab2a1df9407e06b22e426c4e89bb6160d","_id":"ecsite-form-builder@2.2.16-beta.12","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-K9V0XQlYQdC7r306eyXZLuY2hahcZJIc961LPpvjsDgGw6sntGppkOWA5i37ecWqVqdSQpjpgZymM6/l5Wrpsw==","shasum":"9b548dfbf776e60aafbaf22b9b971a1edd87a8b6","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.16-beta.12.tgz","fileCount":81,"unpackedSize":3030704,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDbx6HViNYW59u9ZtUXft+SAwt/rAo2KQ3jEDL3eM5rzAiBAhb0vtgU/dRsx5/fscPI0tHRHHRbFsvzfhPAmWKSmUw=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.16-beta.12_1632560188912_0.04993103924261266"},"_hasShrinkwrap":false},"2.2.16-beta.13":{"name":"ecsite-form-builder","version":"2.2.16-beta.13","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"3d0c8d2ab2a1df9407e06b22e426c4e89bb6160d","_id":"ecsite-form-builder@2.2.16-beta.13","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-OeuV0NxKfjj+X8mxWOzdZug7/Hnlev9DrZnds0o0TF/Lms2nvyhRvcMd2Sxazad/urs9T6NIAThK+yY95sSYzQ==","shasum":"1b1aa2d6098c24b67ad7124d310d802624435636","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.16-beta.13.tgz","fileCount":81,"unpackedSize":3030840,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+ik6mcxjIwen8G0cuON7+KL1Xbculw7v1ipMEfkqHjAIgYLu4tyzugomso0m77Fo5h8cdpSpPjMtQkScGgjuJz44="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.16-beta.13_1632563241449_0.6110068258190753"},"_hasShrinkwrap":false},"2.2.16-beta.14":{"name":"ecsite-form-builder","version":"2.2.16-beta.14","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"3d0c8d2ab2a1df9407e06b22e426c4e89bb6160d","_id":"ecsite-form-builder@2.2.16-beta.14","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-2Ovaslpy6+iYSwbUKGwNxN95qn5hLhBwA3gieBEtkaL1kxt+XoK2zPwq9w8Z4gcM9hPp/2KRaqM5+TRwla8GVg==","shasum":"429e4bf36e886beffd3e25c3b424d49c9b2d7c44","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.16-beta.14.tgz","fileCount":81,"unpackedSize":3032545,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxbMR4GxtMjqy+gpYq1HRiWGrlKBzEP+4fTgA7OqoFYAIhAIdUb3YaNfDAqnzkiCQN3vB+gnCjS3eCMxt4wBxqXmVI"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.16-beta.14_1632567998059_0.5396564838586544"},"_hasShrinkwrap":false},"2.2.19-beta.1":{"name":"ecsite-form-builder","version":"2.2.19-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"3f0c3f141ed5d4134dac2d22b45cb75e522245fe","_id":"ecsite-form-builder@2.2.19-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-TtIcPzomivIW5QbxgP2cZ+F0Ajk66AbI0qIYPycOQNX3WhjEaUI4QAGD32Ydqpb+Zo6PfAiQwdqfKfqgHr0h4w==","shasum":"78e55d3c8a687277bc765e8495b15a74d173518c","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.19-beta.1.tgz","fileCount":81,"unpackedSize":3034410,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEOJtKk5DKrNM+PnCO6/7QAS4zoulz/gb3fA2DKrkK1jAiEA6Ckudf8bFRwXPfyQILuY+YQhvLHAS9+LeaLizEayju4="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.19-beta.1_1632661757691_0.7628835928516624"},"_hasShrinkwrap":false},"2.2.21-beta.1":{"name":"ecsite-form-builder","version":"2.2.21-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"3f0c3f141ed5d4134dac2d22b45cb75e522245fe","_id":"ecsite-form-builder@2.2.21-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-sAeq06VHAfy3W4CSYgMmI6SzdrIY/QaVJdU88K6yxZfT7WnRPuTaVObkpgAl1PFNYwUnMn38vPPSXNH0u0MYoA==","shasum":"da45d52212a3ef6ccb59336164d35bb9bba2a9e8","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.2.21-beta.1.tgz","fileCount":81,"unpackedSize":3034410,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOFa0iWgdW3XA6zu/su1ZJ33W4R8/B0KiZMMInosvwAAIgPzd1FSseYvby3FZv56C435Tv7VR8tdbtNosRGT93pPU="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.2.21-beta.1_1632713478298_0.7603018495122909"},"_hasShrinkwrap":false},"2.3.0-beta.1":{"name":"ecsite-form-builder","version":"2.3.0-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"3e80020b2659e8bd661e01cfaa15d8ce862f7feb","_id":"ecsite-form-builder@2.3.0-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Ncq9oZs4bOPSnNu5cDmBcI4lUu0jeJmecj98MKXDU0oP/SiG4CV/UqrfYAQYAZ1an/8KdxJQ9q3tvEXjzZxwpA==","shasum":"8a1bf6525e382c15fa53789e35589a663af7df03","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.3.0-beta.1.tgz","fileCount":81,"unpackedSize":3035726,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEcOjIyTpwTdlyQtrzlokk5o24p+hcDyMb0S+hLvi7qJAiEAvEl9AjlNHfsj6/a6Tq5MPMpdQjN17VIOXpnFU75N4Kg="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.3.0-beta.1_1632730059889_0.32776719744214544"},"_hasShrinkwrap":false},"2.3.0-beta.2":{"name":"ecsite-form-builder","version":"2.3.0-beta.2","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"4088b8208e9395e4c7f085f205e348b87f709bef","_id":"ecsite-form-builder@2.3.0-beta.2","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-OKJ1dvaVauk9GqutnusXTGCPY9VSX8PMveIvB9FRVI4DN5MUmblKin6Gn2xCQoL/zybhxhdd07g54moQ2MjBtg==","shasum":"4fd904d1a4bf881b3d9ae5c1fa61a7a623dcc81a","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.3.0-beta.2.tgz","fileCount":81,"unpackedSize":3035987,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8BWhFZScOel0rvrLyI9C63Np2+ihmGdMXx643P9oEkwIhANUezBd8KYpVnlAdS5r5N80ogJBgIlfAS+wmFVU+LvYD"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.3.0-beta.2_1632822619548_0.2308314987607838"},"_hasShrinkwrap":false},"2.3.0-beta.3":{"name":"ecsite-form-builder","version":"2.3.0-beta.3","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"b1a7f760f16e6daa0d269c94aa4e02982d6aa101","_id":"ecsite-form-builder@2.3.0-beta.3","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-QAcqioCV/GnugFTmW9nnSq8p5nIM5Z+8cPysOyyf04I7Eg5oXkQIxDaYQurQoZhzPx4bjPE45Ck7T4Z4j+osHQ==","shasum":"97c499172f87ae157724f6e03b9f01a56adea60b","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.3.0-beta.3.tgz","fileCount":81,"unpackedSize":3036155,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCb2OaZCL1SDSl9mywp6TRwkWOXKUQqFrXBozBX6nUuuQIhAOtWx+DgLo3NNHTN93l3SP/u0rWsFhLqEy5A59ntCkM8"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.3.0-beta.3_1632993635008_0.6905454996306273"},"_hasShrinkwrap":false},"2.3.0-beta.4":{"name":"ecsite-form-builder","version":"2.3.0-beta.4","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"b1a7f760f16e6daa0d269c94aa4e02982d6aa101","_id":"ecsite-form-builder@2.3.0-beta.4","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-KGKEriWYLGU7iPfIv/hPyP8FryjNZOMbXG2UURVp5Wnqel+oBncRs5dyjFEgvdf/HtafrVwr8poNAFY55odN+g==","shasum":"fea70809fa2ff3131496717256bc0cd3f257a510","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.3.0-beta.4.tgz","fileCount":81,"unpackedSize":3035997,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBpV0BI9lIFionw2lfoEOD06ErmcGBwHAeCVpzpIio9wIhAPzFAeht7GA5BjdGwN1tjmWyRxzUXgP6o6HXd/LHW9ky"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.3.0-beta.4_1633363465898_0.21942769498621018"},"_hasShrinkwrap":false},"2.3.0-beta.5":{"name":"ecsite-form-builder","version":"2.3.0-beta.5","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"294090b2e879acecc6da9a9fbcd213c590d86c47","_id":"ecsite-form-builder@2.3.0-beta.5","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-qDQVFadIIPkLPKCOUfPPX6/YbjNpq2j7+Tx0NgpORjZAeyx+7T5lhIuloD4arv1XVW/2hFjsXAhyRCQOQ1qo5w==","shasum":"dd43e5fef1b7e024ca6b8e554a64582e088b19b0","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.3.0-beta.5.tgz","fileCount":84,"unpackedSize":3075835,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNI3rLaQ3Fk9/1fmtJQAYPvpA6aICx5f/G1K1AGT8zRAIhAMjB2VZd6VIqahhkhb6Voy2qv8LUfDdUDa/tCKQCulmn"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.3.0-beta.5_1633405107082_0.2679505649355556"},"_hasShrinkwrap":false},"2.3.0-beta.6":{"name":"ecsite-form-builder","version":"2.3.0-beta.6","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"4167f40a4ade1efb635faa029293500cf5ca322b","_id":"ecsite-form-builder@2.3.0-beta.6","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-PjP+ZAY77ogwyh3Fo3vYI9CWaskwFL5DIGoRFdgZYdWqh1oFfcmZm+XxYde2WBo1NkOgSGG6HXRZXRH8attEMA==","shasum":"f1278c6727d639275dae3e72497f31e1f6cfb7cf","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.3.0-beta.6.tgz","fileCount":84,"unpackedSize":3075719,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEZZbkjAXrtM+D6gUNm6jA//FMoGPPLGm3yVlQyJ5CiOAiA7FaRWRcJwT1Vs2lgo0dqLuKONBpDm2qS47wiPSTsDAA=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.3.0-beta.6_1633763732871_0.9039579285155033"},"_hasShrinkwrap":false},"2.3.0-beta.7":{"name":"ecsite-form-builder","version":"2.3.0-beta.7","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"4167f40a4ade1efb635faa029293500cf5ca322b","_id":"ecsite-form-builder@2.3.0-beta.7","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-42GDhmJ1bmavHioApGJl5MNXRtxMSO/7gj+Zn/RgejeCCMjIM3X1jlSYFN0Lk1fwgSLhKmvvXjP5dncoQ7Rijg==","shasum":"27926ce438bda55b48f65a87f7216cd33e2ba004","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.3.0-beta.7.tgz","fileCount":84,"unpackedSize":3075761,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0txdf0KmIG4J2aLV/jLN/47hyaAi/2yfCIv5P1YEsJQIgSfijos+BwmOnvWUlX6bFWCW2Yz/S58hmAv2NF8TXIDQ="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.3.0-beta.7_1633765009648_0.8384550845370307"},"_hasShrinkwrap":false},"2.3.0-beta.8":{"name":"ecsite-form-builder","version":"2.3.0-beta.8","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"80dc04bf1739cff3021e2da898984540d83361d1","_id":"ecsite-form-builder@2.3.0-beta.8","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-etRtLzYGau5JLm3kBXc/cF4CqdaMayonauIUsDO28wGCoHTt/xGS25tHVoyPu7vZDoo8M7/qbzhO0fjDJoHa4A==","shasum":"61c2e99e1ebf9fd40a459aef434aefb2768ce697","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.3.0-beta.8.tgz","fileCount":84,"unpackedSize":3075757,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFZVOMalCHmaBMEieaW8PJwDR0VdUN4FeAGRPnV1w17GAiEAkKvMnRg3l5S6zUIgm5e8cK4P+uRzbZK9jx0ppvv+aBY="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.3.0-beta.8_1634091051635_0.4007791675222274"},"_hasShrinkwrap":false},"2.3.0-beta.9":{"name":"ecsite-form-builder","version":"2.3.0-beta.9","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"cfe75ab5ff48655741f88fce49a41e67b9cb9efa","_id":"ecsite-form-builder@2.3.0-beta.9","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-O4+Zi7wUr3akyQR5S+YTQcanIyHQqcJM8KMA7I//mUWfuiEXdCs74S9yexA8jnTf7MWxbiqc5SDGlcf/o7Cqlg==","shasum":"f2f5a41ca2f21b796fcffcad75039a6c63e1a420","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.3.0-beta.9.tgz","fileCount":84,"unpackedSize":3074726,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG8b8Ok3ESXEbOM/5ZJv02JAK6wL7KCt0Lc4G0G64zNDAiAKz71djIZQcUuL/wZRHAD6VZN4UOu6AfUxGXeUKGz/Wg=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.3.0-beta.9_1634634772509_0.3852606175914144"},"_hasShrinkwrap":false},"2.3.0-beta.10":{"name":"ecsite-form-builder","version":"2.3.0-beta.10","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"a020b82583ffb033711fc7361c38df05403739a1","_id":"ecsite-form-builder@2.3.0-beta.10","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-c+9s+tLB5pGxsUuyWZh8AFg88M7IQw5mETlkGnrCfmhgvOa+WSyn7eT//DI9F8ZVQr2FzXIxkFFODKM0y6m/4A==","shasum":"717552ffa6ec950b88ee06244b2ee313583bd5f1","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.3.0-beta.10.tgz","fileCount":84,"unpackedSize":3074727,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEM+ZzokpDNAbxFU8BrnsKh+pid3KmHij0rg4Vg0Qen5AiEA5Y+eIfab4u/fXWzQloNxsdksmOqG+zOPtBPJTS+UoDg="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.3.0-beta.10_1634636499858_0.41775355439656936"},"_hasShrinkwrap":false},"2.3.0-beta.11":{"name":"ecsite-form-builder","version":"2.3.0-beta.11","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"a020b82583ffb033711fc7361c38df05403739a1","_id":"ecsite-form-builder@2.3.0-beta.11","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-zgqlqV9k9Q1FU0O4JHVm5DpJ0VIsRc+mX8o8HVefKNqfocjRN3gq0t/JkCjuJG6DAFW8qBP3PrDMoVzSVsRUAw==","shasum":"3b96d9af1b264416c619c71f86f8153ef71fedd0","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.3.0-beta.11.tgz","fileCount":84,"unpackedSize":3074784,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAGCbw3bdlfp4eZ0enneIoAc1dYjnUAicSE4fwadYLTvAiAobcTxbr5YJXnyvNgXkGSxBAgsTN1xSJMc9Usy41bedg=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.3.0-beta.11_1634907522956_0.936440566145281"},"_hasShrinkwrap":false},"2.3.0-beta.12":{"name":"ecsite-form-builder","version":"2.3.0-beta.12","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"710629cb19e871e5a7ae442c9e675215572ed7da","_id":"ecsite-form-builder@2.3.0-beta.12","_nodeVersion":"12.18.2","_npmVersion":"6.14.5","dist":{"integrity":"sha512-d23hIeJ0RMhch0C5azFvFb6NKb+JHnTeyH114sVtBDOYazN8pv9IeiY6MH4vDF6J2GM4U5/W/dOtddK+wyDLgw==","shasum":"799d9e9e1e66d9f4e5466913cf989d2ecdffb2bb","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.3.0-beta.12.tgz","fileCount":85,"unpackedSize":3210818,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJr82ZBKV7wUiV4BNv1oner+l7Dwm3yukLMcoXPxW+8AIgT18b17V+KYi2qvL81I46JOdKIpreU8LvkDEK+dGTzC8="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.3.0-beta.12_1635154063980_0.023686909658294564"},"_hasShrinkwrap":false},"2.3.0-beta.13":{"name":"ecsite-form-builder","version":"2.3.0-beta.13","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"42dca4d438f8fbb5bf5fd31dca21e2dd9e65bb0b","_id":"ecsite-form-builder@2.3.0-beta.13","_nodeVersion":"12.18.2","_npmVersion":"6.14.5","dist":{"integrity":"sha512-wkvuvmUY6lOY8lPNNRZiSMP/c5ADtMD58MPrVhbs/Qf1BjMmrpBzLx3WVpryVBuEPnkm6U3VkVMy0DjbZcFCfQ==","shasum":"46c0e0795c6d5c29870abf34bf17bf687f426427","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.3.0-beta.13.tgz","fileCount":85,"unpackedSize":3210747,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6uSKMfbJ1LgGRqzStGbFepp2QJIy03AsqPs0I1c0dZAIhAPDRyHhoZ3QPAEqCXUQQQOUncR3/65NdPZ+fr0WIX3jK"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.3.0-beta.13_1635159985089_0.6373603345959846"},"_hasShrinkwrap":false},"2.3.1-beta.1":{"name":"ecsite-form-builder","version":"2.3.1-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"c2455b5dbd7ed3e05706710c0af52c0c31ea454c","_id":"ecsite-form-builder@2.3.1-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-y8HAZbMjwGIMZ72eUVin9t/fsgQu6s6LOkxAZ3E89ADDNrocV/o5dgu6Ey6ym/hdsjZwuq4IqzZ5h1YucKVmOg==","shasum":"1eb31a1a379458f38979a827006377a3814db4d1","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.3.1-beta.1.tgz","fileCount":85,"unpackedSize":3211325,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHkBGlMjmBkDC0rNfEVN9PyooFvMY/UL0J7Lbt7HOo7xAiEAjMC4bUD7/eBPB18+C5cYxHfCVFFwu3hlMplFUFX41Xc="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.3.1-beta.1_1635337430388_0.12410940345305721"},"_hasShrinkwrap":false},"2.3.1-beta.2":{"name":"ecsite-form-builder","version":"2.3.1-beta.2","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"54ae40bc40b3614be3617e5ee33003b43d051849","_id":"ecsite-form-builder@2.3.1-beta.2","_nodeVersion":"12.18.2","_npmVersion":"6.14.5","dist":{"integrity":"sha512-+9lhzPnwKRs0Ylh72K/ASf4U2kNBRXJ7AgfCuJ9diMvDvcT8AQek8HQkRFeOKqyOYC8CCzMrrHgFVn3r0esajQ==","shasum":"ba2bd7c9512e822e9185c4c7958402a2a5034c23","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.3.1-beta.2.tgz","fileCount":85,"unpackedSize":3213017,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGCpfGaGyYl53rXbwM6fakVQybH1Vl4BfHM6pJyTy9nXAiAiiILeAtc+38f262F3ljf76EbKX1qCJj7/EKORuI6lTg=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.3.1-beta.2_1635409867668_0.07655028242867856"},"_hasShrinkwrap":false},"2.3.1-beta.3":{"name":"ecsite-form-builder","version":"2.3.1-beta.3","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"ef18ec8a8d60701a9b557fa72a1a601c45a7abd6","_id":"ecsite-form-builder@2.3.1-beta.3","_nodeVersion":"12.18.2","_npmVersion":"6.14.5","dist":{"integrity":"sha512-j7yjLYH16bRBindopS9Kqc5Kse7JtuAUXnD5l5rloKYz6K9nFNhILDxA5D6kVMeEEmtyXvt+gMEtiQ2fwRryOQ==","shasum":"4accbb5804a75120b32e2a35bf4ab0e4e230f1a2","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.3.1-beta.3.tgz","fileCount":85,"unpackedSize":3213017,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCex6NCmxy7hcunVGo3K7rh04M6rV+ZekUXH8JRw9e49AIhAPOsJ49pjLCflGPcrwqH8WZ5HGn95hbZsMCOfK4DGBrf"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.3.1-beta.3_1635411412815_0.9915377695057797"},"_hasShrinkwrap":false},"2.3.1-beta.4":{"name":"ecsite-form-builder","version":"2.3.1-beta.4","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"81dcd3fce1b0fe2cfd99fe6261352341fa0bb63b","_id":"ecsite-form-builder@2.3.1-beta.4","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-LZDPqk8jGjOBvKss+d+8yIyAioDIrMF+fKmueaZjzKtT/+PqBqO/BlkhPjul7zxZm6ayDCqtbgdaA13eAU4Wyg==","shasum":"884bfc016d77079bc5c0e1abc678e7c8f3a93d0e","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.3.1-beta.4.tgz","fileCount":85,"unpackedSize":3213746,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCIdSybl2nHk/oUgnMXZR+isG5JB0ZnAMK7hOpr9YHcFgIhAISNmlsnFHoun6o+SGqEpwiEMUMHTvKhsJYbfGwM8lqn"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.3.1-beta.4_1635438927942_0.9832551544383743"},"_hasShrinkwrap":false},"2.3.1-beta.5":{"name":"ecsite-form-builder","version":"2.3.1-beta.5","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"eebad8e49f47f9fd8cbebe9e21a4e573581b8bda","_id":"ecsite-form-builder@2.3.1-beta.5","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-mRu1Dnwj95ALwra9oG0/++/quHd34RY7nG42cmjINsypQ1zTH9xDGl9auvGFY6uHLmrJuVZxSqEAdVg6QcMAAg==","shasum":"53761f7a73365c9204b6289d822c99edc8efbeb1","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.3.1-beta.5.tgz","fileCount":85,"unpackedSize":3214392,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkPn9wOt0t80cYzJG/rBOgqdOAmb8QBnxfJKgsgzcWrwIhAPywG2gYtFrqSzJj7gcydXzHpPpue23iSu6JUydOhX//"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.3.1-beta.5_1635913865702_0.9294216639535433"},"_hasShrinkwrap":false},"2.3.1-beta.6":{"name":"ecsite-form-builder","version":"2.3.1-beta.6","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"8985581e2c5f141e8b39ed60d1c28ea550fad124","_id":"ecsite-form-builder@2.3.1-beta.6","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-yxHzrx3ArmDesfbEKHchbPy5wl1j7swWwLDf4KXnA/E3fhVlU/J3jI3xEhn4bkSFpOyidhndv1freRubYSTWcA==","shasum":"ee8e27f352c3b85ecaa674229459bfcf932966b8","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.3.1-beta.6.tgz","fileCount":85,"unpackedSize":3215661,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFChKn2tR6xBM9SmbmzCQPzgisk5l2wCf1y5v5skSKlwIhAPK4IxYGl+h8AEl9DiBixYf/IPwgvcCVt7hlrmCBjPF2"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.3.1-beta.6_1635954017887_0.48611316261068205"},"_hasShrinkwrap":false},"2.4.1-beta.1":{"name":"ecsite-form-builder","version":"2.4.1-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"41e903ef4b44a34428a25337c7c5a85b50db6934","_id":"ecsite-form-builder@2.4.1-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-RIB1yhGkHOrxCQ4BBOkMbaIxvDLQ/N7NdFK0K7ogk+RjgcW2os6WadfjZvpdJ0lEocTXvCGGlX1N8WcYCHH0pw==","shasum":"efe25f1a436dcee3e1bcb455dd239337a3df0e53","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.1-beta.1.tgz","fileCount":85,"unpackedSize":3216345,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAwYOvbd/q5cdHQwFXqC3aGvQngEIWdK0YTSpx3m/y+TAiBrh1Z8LZb5U9K+WCCBo1zaeJZSkneG9C/yIlnr73CSCQ=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.1-beta.1_1636576634309_0.9649396586624532"},"_hasShrinkwrap":false},"2.4.1-beta.2":{"name":"ecsite-form-builder","version":"2.4.1-beta.2","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"98d35056735304debcc39ecc469238895ba54d8b","_id":"ecsite-form-builder@2.4.1-beta.2","_nodeVersion":"12.18.2","_npmVersion":"6.14.5","dist":{"integrity":"sha512-cHDb7CzgKEnOvsMsnHC8Yy+NGShnjIg+BUjYqwJhHlS/kL8c9/j6g3MJkWZU+kQYiuInPRoe/rGuJ3TmktOa+g==","shasum":"ba55cb3d85a132340540c1451fc5222a858080ae","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.1-beta.2.tgz","fileCount":85,"unpackedSize":3216483,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID5uyhL/cXLI4yc2OJL5nvskd5Ak4P9v6S7TL0R59ubWAiEAnPzaKR/HbRQ+aW2kaYWj0WlycgKO5zSh0qkHkjJQ+ZM="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.1-beta.2_1636963904286_0.39640107760735854"},"_hasShrinkwrap":false},"2.4.1-beta.3":{"name":"ecsite-form-builder","version":"2.4.1-beta.3","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"26371c1e2d425c924030ccac5b21a768b891cc13","_id":"ecsite-form-builder@2.4.1-beta.3","_nodeVersion":"12.18.2","_npmVersion":"6.14.5","dist":{"integrity":"sha512-Au1GZyVmBubcOoNcNx5H8/XLil1GlQKyDctAbKybRElMp9tIHHKnWe19etOK7j1f1w9J7D+SJVzd7DphcTseuA==","shasum":"39aa36fb77b70ef5282770d14574438960d2d900","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.1-beta.3.tgz","fileCount":85,"unpackedSize":3216489,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCICImLqq29jlnZ3Q9Os3L9knbFs4bV/g9LGgQ9XF+0MwIgLS3NYa1Ep7LknNqYf/uG6P0NvnWtRBGJ4j+LLAnvl3Q="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.1-beta.3_1636986865625_0.9516011652333316"},"_hasShrinkwrap":false},"2.4.1-beta.4":{"name":"ecsite-form-builder","version":"2.4.1-beta.4","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"089e3adf6c8f267965e7ff5f07befd9bdc1c96f6","_id":"ecsite-form-builder@2.4.1-beta.4","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-rw01c+eRZMMTjlw3Dl0y4nsNIbODuqskJb93Mpi8Ndm7zhT9W0Joqsg8aw7mTaE1o0J/Bfn9PdAgCrRSdZURFA==","shasum":"b1c003fa08815cf950bb8ae8b14a1f1989a3b715","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.1-beta.4.tgz","fileCount":85,"unpackedSize":3217918,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk0VYCRA9TVsSAnZWagAAj1oP/jB6npr5mMyu3FSAIwu7\n0jyd0pZqmHTsi+O/vbE0CyLcUVrdbOf2ZqTGuRK5BJ6HmVXDLFpylIXi3/Ra\nOxC5EfiIeStYp47Z45RHvaB6LLofLqzud0HMQDfRJcSetcXtc3wu/5kIUNue\nJc04s82AxWIg6vl9HKm1n3Q/unZsAYTIMRTEUQBqWgLPNOCuI/G25mGLY23M\npYh8yYRRg62I/ZPxSi8Wff9POYrAm5tUpTc85fZPNSZoHjSfKisCeQly48H4\nLPsiwE3iP66L1smmUyzE9F4Z/7kTgmlIVgK95wXokkwV0Ig/yxGW5o7yntQX\nQBANbRHoilBor3FkpGnXWiu55n5ieFlnMIi4Jv9Ht5Lpl569aSnTBR0qHqdq\nks29nYDdZbQT3hEN+iCUpTTHtvMl/i7i8h5burxXSt+V6Antu/Ye7PC5fwi5\nI5TtIqlMKjmrC8wseEsRyUZWOTNUq7i8hRIjq9N1eqTwcmK0NNy3etp1XGYk\np9HKbLACNFWM0mROhnyArb/MDuxXqngRLe04B/Z0I2hLyCbXYRH2ly76iAt+\nS692sfU5eBieEZ5YBCuXctFvCaLW0UQrNxxdMdB4pNBbVSDGdUoEUT3ZB35G\nUt/1rZy2VYkvstgD5EwkrEMooHNdF3vJ3Kt8CGM4WbUUESvfia8EKnvHZW1O\nR5/O\r\n=y5mg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8C69eHe1i98wqVb4eqxZSBodPnFjVwjOgfYvzh4aqZwIgH18jZAXpc2FK20F6WXC7XTikcvAB8Mgih3AeIw2biLk="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.1-beta.4_1637041496474_0.26299492737462926"},"_hasShrinkwrap":false},"2.4.1-beta.5":{"name":"ecsite-form-builder","version":"2.4.1-beta.5","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"a5579f3e56353b5f783fbd92c3aed3238a11a782","_id":"ecsite-form-builder@2.4.1-beta.5","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-FGsnkMj4dB7jyZ0qGRM3+v0Cp1by8HFHFtohj7FVrkhdLhRRAvPcOvn83xc6s1nQuTaQsFFh/xMCuuXfi9wM/w==","shasum":"e8105e2ecc8046c0d71bb1a973d1469c90ce21eb","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.1-beta.5.tgz","fileCount":85,"unpackedSize":3218411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk66HCRA9TVsSAnZWagAAJ4AP/iWFCZ+viVRaXAjkmJUq\ndUIQvemvnANjvWFTFTsfQUU5voyBlfTM/IBe5OLcERJrTCjzffqCJmhj4AWJ\nqhTqy6Dm+mI3CYVhMd1yrUd0c5BaHlHBunBDd5Ytf98TnADkdHo7gf8zTaSS\n7s3++RqteXlkA5mnw/pjjPnYwLHaY+LY8H1G2VCAB8pDW5ctuUenmRrYzwgp\nmuG7wNhFUCFjxPLZcS1rfyONmh67ZBKJwjkIuWmGF9NnJVtNd/L8T0DbR254\nUFeBb3OnMNJ7tagCgUyF+UINX+7U82gqVKkswY9OJqdZVpDnm7LjgHLfxfm4\ncCqonukHqWQPgWhW9jEfpaKaB9RxQhIpWmFfUNNY/VRvwPnN1DyjO7h6J6aD\nx93Rqq6fyfm/tnfk/bOJtxIb8Ww/XVXTst0T2qv85clpWhBwD8qSZWWLNeqx\n3VOY+2KSytQgxZO74XfjNI3TwEXN7vUU8Nh8Yp917JgN+ygJWJn0GcO0f9FL\nYMBZFczkVDbtHpQg9ibmbF4hL1mC+8+i41WWtz/kZHDNY0oF1uy7a4fKqJSu\np1+m0POOa/QyuSwAJPkBVld6WazTm/VXVVpv9Sci+VBJWTuIq/Bf8pueClH2\nWYZ1dawA0BhqaJqT7Rv2ntNeo74UpXgGnxgK696rg1fRJXbP/4nVilSrL7iK\n+puZ\r\n=MEVe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChkPfZ/Nf9Kf2WrK9taPv3uSe+2p92bOBE3yKpfSyzPQIgBtHcYYcaU8MDLmRUb+Q94mR3LZWlBb7s2Noxc05BDbE="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.1-beta.5_1637068422986_0.21672500427932806"},"_hasShrinkwrap":false},"2.4.1-beta.6":{"name":"ecsite-form-builder","version":"2.4.1-beta.6","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"71727bf60f196dab368cb44e78ffb21337223774","_id":"ecsite-form-builder@2.4.1-beta.6","_nodeVersion":"12.18.2","_npmVersion":"6.14.5","dist":{"integrity":"sha512-NpezLXUiPxdq5toHFpcV9y9KTrbHLKRrRcHP40YjlIY3M9hXkmhqF5+lrc5ZKj1TsZamzKRE64MwFsNTEAwVng==","shasum":"cc4484053182559d86f06b89035c0b72cb278c59","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.1-beta.6.tgz","fileCount":85,"unpackedSize":3223447,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlIDOCRA9TVsSAnZWagAAiSUP/3zVqzPnNTsJaI8dgzf2\nOMYMU39Ghw8h5BNmQmijwqb/v1Higj0bc1FCdrzpUXzJXL8XQqQZ6GbIdw79\ngp7lrS6DQzoYC1ehjQxmEBRkUZgCYLiHcHM5G9jSF9yw0uiYIaQe2XcYuAZm\nFx+94ER6I2qQc1DHP8FKNTM6wpctjZyydI/sURpDQtu3Q2+Tl8cOlORV4Sih\nHxBjtSWbrkZMyh50GlPFjgRaY9ZfuAuhJwoOMYt/ZLoc2DIUnblYCLcCdWU0\n11m6H35DMbWR7h76prmMP7dLnXnl1VXTW+lVHcV8XralDJwQYp8JltAo+lSM\n3H96wlWzgcDzJBpgP34a4sE4a3wC4raXpebQ7gyyXRAhh8u4D5sP3yMxUDCG\nV6W1xhd/B96sXyEOI9HZC82ME0gDIu01yReQWl2PCimGNSOnP4z6Npp5k4xF\njoLwCq+yqfqjFANgFA9QEo9zHhXcMMdKb8a6a+1xsR4tcmjuhAFHDDeYaBkj\nj9rywYTG4UaZl1rpjrazc2D+h2CXW/W/uElpuoYBbvJQdzI2H0oiC2TUEH80\nXMCROWBq0bnODjKk7CPxGbHQdEHeWAszRHtZXlF2/AMhJfO3/6njNJMciQAY\n2zrlkQirLNxDfmVo1nPFTHUbaGU3qVDabAsqZwnkkecwUUtze8TJxjRUFTz2\neL/n\r\n=qm3n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFuQxolHLPKV4pytv+WdCQZzK/l+1JGZI3poqKFybHiuAiEA0zdFSWA+V3LByMB2jcKw0kaafhp/X7KvEA/4LIBymE0="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.1-beta.6_1637122253952_0.6379657958317859"},"_hasShrinkwrap":false},"2.4.1-beta.7":{"name":"ecsite-form-builder","version":"2.4.1-beta.7","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"38bdd1268def0bd60f738746791ff478dcd9a120","_id":"ecsite-form-builder@2.4.1-beta.7","_nodeVersion":"12.18.2","_npmVersion":"6.14.5","dist":{"integrity":"sha512-M1ngOsY4BVesL9ZBIz98ncUdjRAbpFm7rLjxSLB6u5Gq+hDywT/G0+xGlZjmMuQ30rGRiQuNTvfO5MIl+dhL+Q==","shasum":"0377ca9f8e7ef25a7d5cc7d350e4c3d5e0d2d9fd","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.1-beta.7.tgz","fileCount":85,"unpackedSize":3224312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlJCSCRA9TVsSAnZWagAANxEP/3/nSnirOn5V/T1P6sNF\nFccky/rxDSKaPnYcWa9gkG197gv6VQHicDjTJ5JaBTJ1/QWMBvVkGrO/cVit\nc3MPB+b/s92DkxA65dmLkCOKw+tBFOjHABy7dX79JcRmtv/0k+62Tu0cjXQY\nZdUAZ1ib1ZTSxj6aegnFI+YvhDpLXyD1yLIDPypcwT3RA+vlx49DY8Q7KKH4\n5X+mzXt8kHnpkMtDQqfAmCB3lvah2mObtc4Q+Ibwt2NW7KkgHOWp4ckDNaZV\n+NVcD6S56MoCvNUWKGe+AWsbB3Ml9+QxVTrqRpwGCDP+t8kFBwmnvuPXp3EK\n60ntG0d0PnbBHLZUn8T4cEt/ytWy6XkZS1arU/Vy+uvcLZV9ReGKvkafdDP/\nD2x4tt5DiChgqLmbcyWLAoTKvD1EjLPJ1dIph9lIRz4gfovExx8xKXjCFKze\nrSgv91LEC/FYMxo74GOHs48WUIeFetPQ2tH1j6zmez4juxX5MIukQ0AAG0ir\neY34ofzb1b1P9tb9dBbo4bpCOCLYBu6f+6pMecRcm1ZE7KD0ye/RoQqbQMvE\n5vhuIkpvg8VjN6Y+iT+hPqkbsLQEBGXS+1UzDRfwA3AURQw5Nij52IrOSMHh\n14t0zAARaH0zkvypVFTX9VOZWyoQM/af1JKEetCd4nYrcVDYNVqlllDulRpm\nxeTi\r\n=cbGz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGHFhBVmkcXXVdJr5y1FgGm3KQLC7MUqamNjPncrzGpAIgHcZc5EELK5rSF4hDL9BhjOX6TdD3OVoG+C3dzuqE8Yg="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.1-beta.7_1637126290429_0.04294549578307594"},"_hasShrinkwrap":false},"2.4.1-beta.8":{"name":"ecsite-form-builder","version":"2.4.1-beta.8","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"deac1fb0fed7ac027a4c497c2c03640fc2ea9447","_id":"ecsite-form-builder@2.4.1-beta.8","_nodeVersion":"12.18.2","_npmVersion":"6.14.5","dist":{"integrity":"sha512-grp1mtP93ARz6vb3ic1HVXrXeAV11G82fLz4hLgTWt0IVLXzMdy8M10ewRVh2BKkPndaGw5h0tcvC9cJPv0lWQ==","shasum":"0080b4625b8464c01353370bd04e6fb033422e69","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.1-beta.8.tgz","fileCount":85,"unpackedSize":3229468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlR+BCRA9TVsSAnZWagAAEBYP/iISzu0pq14qNu44pFQq\nCtI2OvACwbnEN4tQ4PDZD+8wFzgbMPB7Y5a7rnVwxjHuzVdyE+D3TnRQ4SIh\nx64u51ZnUghBpPDMWiEu35frjcpOz4rySTHYtoQXsXxV4luX0lm5xmFEODPK\nkdZ7+DcSIM1Qq9hEdDLsDjLrhRACNoKGAn7x6wgBIeWrCK3j9uV2MkrSPS4z\nbVY1fmcdG6R1ZlyuGF3H/XKuma51cSZ2h3OWlQEYvW/jMCCDyLPsPtw80B62\n1AY49WgFEBR8QDgNkHefPYuEqzvOlOzvdfQsQZs8JRDSPzJ9IqbN082vgoyW\ndU3080mxw+wjvxJsjLO5k0P0mF/kJQKc3+5/7vQg0LzV6NK0ps6qh8/0lGBy\nQdGede50Sfri4k4C2uo7M4oUg9ezomHkP/0jppSB3Ww+bP2dsXcHHSAWYZtU\nUjruavKqr4pBnKGltuFeVUqije/BKiY+MMin1Vir3TJMefJ5w22pcqMetLTc\nYODJT0wuw2OpGqiWb7WCDWZo9qYh2nQuR3Tu02+79B3LFqo0Tq4sehA0qMpg\nMJ2n5SvcOaKT/Pl980hooS3G8bglCq7onDRiIG7adenNwy6b+gTKHnPt9LC0\nEYj5TKMk9NcGDoIYBd9Nm2kAy5M46yA8mvlXEp14mTfLL9zbOOM8PQp4JjVL\nuLJq\r\n=slYf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAT8YjN0ZlfD2m0L7x+c0r3FpU/fW5z0LwEYto8GexFJAiEA2i8cby9iOEn/v3Z3fJ24eZVPEusu9U9DvLa4up3loRg="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.1-beta.8_1637162881062_0.9871357521029451"},"_hasShrinkwrap":false},"2.4.1-beta.9":{"name":"ecsite-form-builder","version":"2.4.1-beta.9","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"8219909960d88a6b537259cad35022ac637047e0","_id":"ecsite-form-builder@2.4.1-beta.9","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Shee1WAqf5mrsYx+MsYp+OjoVKX4ufBw7kuyuxoteXL6BX978R3EScMJTdiJpRWyLiZNipztUVJfBRJ4rn8Xtw==","shasum":"e77096013802f492c24d39a8bd653a6f46059da2","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.1-beta.9.tgz","fileCount":85,"unpackedSize":3238160,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlfcYCRA9TVsSAnZWagAAIpwP/A8vAe3bWNiOOSsX2VIm\npx7tg+vjtceaK++O+qCciOIGks4nHd8zoJJqYJ1er39YcvSEVHC4pJnWlUq1\nD5UHW/dx3YdgoYWl/heAigRccjCoER2nzZqcc4l1ELx151GGrrIsZVCk31w5\nhSmk0S4pcmySNwWRYAyGzZZhPrLnx1201C8QkaViHILQV32NQdVLwWGsOb0Z\nUcCa1Wk6u+i4+oGrpmtHwk8LoTkr0sMnMANnZnecrMbSjG0nJhLRPHfnupVn\n4d8D/Ra8uNOOLpXZZ2MBHxFdtgSWOJwNZGD4GH9M60/4VRdZLNbly4IQ4pOw\nZ/QAeMFiOYZCa77OP1sYZaLJCvfE6OLBaq8G6KCeDZASylP/WEdmfo0HdaJt\nuVjTtV8t8ysaG8fRWcJwZgnzJEVEi6u1S3x3B+dXHsxqBeqMskMsAKG79YxK\n6PLdHKQbXG4+j57WC7kT56d2SbQnQmcXe7bh1oGQ02CAEdx5E6pC/51hOC68\nYn+JbuPrNKh3eA+gfuXU2crIhJuN8tmPm4+snWrBDzgwrJniN3Q4I2mmTMwc\n2wfZ7nZBNt3GjOircCCJ7fZhByeCLlZlUZE8eq9nugLK0loi/vYMmfyxGd42\n+x9C1Cu7hyQs4PwTvvwL9Sl/b5JjT2qSLsoQnoumum8cOQJq5BKEtRdEz5vb\nJCfL\r\n=MJny\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrtfdikpOhM3wCqT283ZXRGAEgLuxO39DGRf7uHh6bvQIhAIlWonlhG24+sJkfateDLQRU0Q+mn9lkE+8S9BGezVrl"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.1-beta.9_1637218072660_0.872971494681738"},"_hasShrinkwrap":false},"2.4.2-beta.1":{"name":"ecsite-form-builder","version":"2.4.2-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"ab13a2e3b2913a338d2bdb7815d13d39bc91f2df","_id":"ecsite-form-builder@2.4.2-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-zZ0zsuDE5dAyBNSMY9RyZDFh7vUlen5+z+uoGfoxHXoYgdbF/EgQX6IwMgTUPImDU43yLqdtnPQ+yV4XscoEYg==","shasum":"70e3d0c49b2f1576c0f7fc6e3fafb0be83abf355","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.1.tgz","fileCount":85,"unpackedSize":3244811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl6K6CRA9TVsSAnZWagAApIwQAKJNoaqdNBpr6gr+6yCz\nmDwiFW86/WODFf/bPD2I9ldsuToYrqFegB2vvfR1rJsQ3mbD21ClaEs9iSom\npLM/yiq92Nbzsw36kn+B6UzY88CT4tKQ+Behz8Ar8JxsqG8BQU3dC9po3Bof\nu99jRbE5wc/vX5dqCJRUkPHwD09jYyML826qWdzwd4xqx228xIBANfUblezr\nOBCEk2ujmlJqZEbo+VsyIl4Tw+Ib1IScEe0pnMsS5mqDDCAM8864AZ5F1tqJ\nRXpoBmuNbrZ6/YTv8V+NgvOqcl+7vaU58NBZaSLoHbxzDg5vUG2k/EiATVoz\nsqxeg6HySUiUNcn9cPJFARe9gadVq2q+UfaXIIWT4R0eB2WKZT3Iwk04V7xW\n7KMaWbdywHcAYe5o9QOEjm+KdPB8a4tKpF/VLiC5NN1T88ZkyRekTLdQM/tT\nBTcLSJ2LA1k++iTE53eibojSv8Ew0IDzvmhSIWTRYEEkchr2dsnHwhaRhasN\n/Yo0PZ3OTRSLgrI6yxqrInpSHqf3lbo/2UY5GpygvHUsl2hHTrzzw9CiMzJM\npZJYkNhedXpovdAuAh4Ld0w6eWoybcmle3HV0SVJnAnr76/YI8CxshtTTCeT\n++F/xoOexNbpwofC/LtvgJylwmq8uf/cHXwewSxbM4cpC60oLJ7+HMCySgdf\nPf1N\r\n=K2XZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6dPHpssuNicA89meG2VkDVmfwgPZmXkh8PcsksOnSRgIgaNiVT01FRmSm+mgWl7rRhzJPzBGLu/9FCjlc55+THMk="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.1_1637327546653_0.00874405410776058"},"_hasShrinkwrap":false},"2.4.2-beta.2":{"name":"ecsite-form-builder","version":"2.4.2-beta.2","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"557e79ed05af2a016ec76ca0658d418302f3c011","_id":"ecsite-form-builder@2.4.2-beta.2","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-vfop5ppVUbQa3PyS89sOeOljMFGNq3AdkSG1rohOPdxLz8VS1WEeXung+LSCtaRxPp02/Xvq6KQ1d9bMFQh2hQ==","shasum":"6f2f65bf70ab36d5d3610233e4af7af71207fb0e","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.2.tgz","fileCount":85,"unpackedSize":3241542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhmxFtCRA9TVsSAnZWagAAsNwP/R7kJhx3iXrJAr1xPzR4\ndgNQbunY1qOiDbEnb/UCRBdI5RP2CBUZHsGpKnYTGL9NK927uATiHADA0Zj3\nh7g2a9/POoZj0MEhvwIl0JdT421XtRn6PzCbWQFDTsPtUhBnq2Rk2rmJTjUC\ncSHLyEQRm+WMHi1WhL5n2QHij9PrcRmQph8XKFOGJLbRIV/DbDTAHmAnnYNx\nhC9y/bnMrly6ZYZGVmukCZ3n5XCxBvRl7KfYqSOFq6dxh14q1cMLQ7/8Hfxh\nfXxO0XtW/jzz8dhLoON281LE26nsqQfz4uG46E/2svJbaHTHIb2NPGDhBSx3\nCSZmExPvUxubXwHujEB8C9PwUml9I5ejaTEYBCp+MSxi4D2buvhTd/HT2Fbh\nLdKxcJbvze4xmJLqef0G/CLjZ9wuFZT6mXnSNV+7KuDIgRbo2rgJ1JR+tp0g\nkAEvoGgp63zbC+tmSWjt55l7xj2fNjd/FPIu2anOcNj56QxFHokisg0x2by4\nhZAs26fk0KfHI7zwoiLDf603jhBKMpNxe/o2Z82+NwwnIYv3Pd91MKv2/77h\nUJJypohK3kuIqngRX5Zvbu33IOshxPOomBDpgiBbKbg4SvvVwyILg/M6L87E\npxbmle3BTX/64J0aCrGYbyyTc87KBaGj3NFKTT/7vx26jKIytvKbunW8BTql\ngc62\r\n=af63\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG+jEWbNfSOQIvDywXPG4026hXf/0XTPEJcIP0ef0vX6AiEA/fFWJJVCWhtTf/uzp9b7X/tdz1IpxpMkP9EMKHcT8w8="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.2_1637552493026_0.626657114915051"},"_hasShrinkwrap":false},"2.4.2-beta.3":{"name":"ecsite-form-builder","version":"2.4.2-beta.3","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"46fd5846c7b8ec1e14de172910c1ebe720df9510","_id":"ecsite-form-builder@2.4.2-beta.3","_nodeVersion":"12.18.2","_npmVersion":"6.14.5","dist":{"integrity":"sha512-TZbgBRviVfUvWQ7aa1EkNiShgJMiFsTki+T52sErly3Lwp/CmU5S4jMRtl/JxKf0EG9Uf7R9Qg1YDOT/PQu4Jg==","shasum":"d435bea5ad209fd6dca435460f2bb360b6a09a9d","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.3.tgz","fileCount":85,"unpackedSize":3271563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhmzC1CRA9TVsSAnZWagAAPnIQAKMRdJEooRddWCFfMacU\nhHQDtGIEHQI1NXyyzaWcnhEaqFwho1D8FFrJOFc4iESUDB/Z+gc4l870O2Z0\nUNcCHNOdzNZVVSark9fUd2MrMywJAJQlAF/tGs6Jc55XYHhhVZqyPigcLrlW\nlzAwovlB1FYJv0Jl5Nwkcc2Xuc+WiiVIeFbp/jh6yWbI/9WWuJQeD3DCS8BE\nXKdXI/7aGldnxtlTLkQFWEEcMZrQGclEFiG/nq7APIOfCDZ7ZY/YUWTa5tqP\nMlEZWW8J5cU1OtP6CxNJAO/sXpMosIoEwpY67J37O6qQBYWqF9hYB3P70X/9\n+z5AoFOJj1w5WbbsyG/bUeNZHLZony6F+BUg0t4bezs2IFC3zo0UjGPF1jI8\ndzrLu7p2TxhK1hQyC9HzM8VeQ1fUe8XH79m6cuC5Uzotthw7CtcN11HziYoP\njt4+DbZwYSYSDaiCzyMZFR20ts0JHHd2Zx+iBZFGm2TYrSXX73l1/YzALr98\nzFCrzf+WgwJjohnK/GADa66D+vn7qpHrmNaYkqxWbrOm8BGs7AVWofriA9Ix\ntxLACnC3dFhCleKOcqs2dk163am7NIhp5CQCklSwFWX5hYSSaFT/Hr1C39Tw\n0MMEwNrq6+5WAl9zkqKAgJ8VBh+3Dgp8CjZmIsLWbQc04pfACBjfbYBm8HrM\nwv84\r\n=Dy4M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDG/e/kfLlt45DyCPx++a2Z9UoJ/Cfy3kgFSyYsZH8VPgIhAPm1Puv6GwLFq4CuFSpGVjt1XtuJSux9wjdCQTcd+fum"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.3_1637560501708_0.8703758063669613"},"_hasShrinkwrap":false},"2.4.2-beta.4":{"name":"ecsite-form-builder","version":"2.4.2-beta.4","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"15d9698ba0972a730a53b857fbf0a9e54686a9c7","_id":"ecsite-form-builder@2.4.2-beta.4","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-sAVg1vujbz3HAfbKQj/K3uyZLEdaUU3QXQ1JEPl4mZmwtRcQIMbW2X0Jggg6EeMhWaNylqgX/n46/1oGayuH5A==","shasum":"a80b046ba8bfc8035e2d2c0867969efa24b4b87b","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.4.tgz","fileCount":85,"unpackedSize":3271865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm3JhCRA9TVsSAnZWagAAr7oP/1uHrNhYrHxicHJYeFG1\nq7ly3BdD7RYSZ5fy+ZcCTxbuuouUH17Z5Xp6lQ2grs+Wqgz6cBRy+rnbwOSo\nKXATb8QNrFWmg7l1DaBGXtWrDUhlJuHJXPxaQloiAQXW1u8F1aIFwjqfQe79\npykND//jeP84kgdlaemoBpxDQbeQHDkpww+WOw3Ll/T8rlRk7za26ReT0Xde\n0LSob5wIpTOffXl4BzmS3jBb4ii02vEsMIm3Gh/frq2doxKTuLcwEvAXIyVu\nFr0dcZ4QLvyM7WtJ7iAwb2dCsoDCBY9Vok9rqTuQjzFwlcQ5GsFhbfhRXwMP\nI8ydYN9HiTjOUxP+D1XLsomIHf8XyQ4ofkhIKuDuXWU8j5Y4Y3dxruDxDlB3\nYJHml4mkTNJivEzzx0MZ4IOAG8oU9xDXZ98z04zuQMed8ujwGa/1cDaBBFdx\nW6PEHA8zUFT9amiTRCqt0ygwnLa+6NxK5autWXOSTYgujeZ+0BY2xeoO0gGs\nlMwb8Z42xbzZMLZiYj67ZfD1VkHESho0pnrUB9/cgrCMbcwpxw8aZwUfFiYH\nDZkZ6Bz2hRtqpXLaHJYfzayZansepemxdi5TEyRGpRNrZwA5WJxRzmJP407L\nm22RZt36ttpQWRl7jqJVBwgWehNJDSFIiAqEigFw139sQ1g5P2Y7wzAUzZSr\nfMfz\r\n=p+gl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCff0rLB157xpzVgLKHWXGSH/OLSIwsY5QnfhXPffEdPAIhAPMo4VViQ1QzNefABHKCkrRFOG5pD3u6oA7xdD/6J3Cy"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.4_1637577313637_0.7704981088472009"},"_hasShrinkwrap":false},"2.4.2-beta.5":{"name":"ecsite-form-builder","version":"2.4.2-beta.5","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"4c477ffbc485dd20ef5edaa604207acdc3ed695c","_id":"ecsite-form-builder@2.4.2-beta.5","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-yH7dzUdq4/fFPM4Ip9l++uyKGlZs2OVXdqPUq4o9tmJR4WSuCxNuC517+h67kjij16kvBTBUj+ufQdpQ2OEmSw==","shasum":"8dddb9df956dcd7538258334ab79129867800107","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.5.tgz","fileCount":85,"unpackedSize":3271833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm3pCCRA9TVsSAnZWagAAG0wP/iXUmxd0LGeu+KwaZPg2\nasyvHrnAcdwW4kwdbOeM5+Nb80GeDfKYneoeR5vYdTPrAHOiSvuqsYUJFKzY\n5cx/I3D07TkGCl98ABXZOXSvFloMOvQjQ1QuvGFeztBtSF95mwh3rW+WiqqF\nc5rvPt6JM+Up33CgyeKVnZA9itVSdZRCuMnAMrZ1jrDW2TQ5/ZP6ay5zVdyP\nUmn4eEJHWfh4rGyc4EBfErQKwoUlvgqmIrxza6kfCKemylC/h/XjVbc8aGjx\nIFREyfXSPbZdVg/cSdrLSOC4IPUAqlJHdYP0VEx7OKcXSv5HHGYeZvWZi08w\nozPzHhD8bN8dm9X8WZiBTVpTrnr7KlMB7vjuSF0H9OfkDqx9zRhwr6cfryTn\nkSW6SYKMG40uCtkVgusq5iM0bgsbfRdItQ/IFy9pP5oKDx913/nfmIQbgqgp\nzdhZ8A6QcuBFgCHZAbJQFEG0Xrul4F8q+jTbMSBViU6lyuSOCt3SvHK+qR5L\nY46Abou/SgiQE/0quR8EY8UiOoquumi7l4i1zuAXzmJVkaLWwFBGfGov8nfm\n/0HP467yG9pEAVfBGmyjtgaNBac/zE+TGlsr5kLBlYTERPGqJHOiNHRI4/GQ\naN5bWP/FmxEpPmAD1Q4E8O/M31HRCqTPBxTOUw4/0WpuAOhVIuKUSnBQKcyR\nVfyd\r\n=aaMk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAumuGVmxQPRSiIWLZ6PTk0RQl5uw3MaogEg+iAZNzQvAiEA8zV2sGQEbD5VMdFXL5KjoyJS4Tpr+JKGrIw9QO6NcnU="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.5_1637579330488_0.5704000498121009"},"_hasShrinkwrap":false},"2.4.2-beta.6":{"name":"ecsite-form-builder","version":"2.4.2-beta.6","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"abf42cfc26b26ffc0533dfd667ae21ee150d328f","_id":"ecsite-form-builder@2.4.2-beta.6","_nodeVersion":"12.18.2","_npmVersion":"6.14.5","dist":{"integrity":"sha512-WCaz2Jdg8RYh7dxL15DORR12GGWxJts7i1M00EZGziAsZd7oSUsU7YFtFIheS0U1CFg0h0XjIP02eXa9u8imVw==","shasum":"98200595b993b856d35e4be82f49b12b01f147d0","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.6.tgz","fileCount":85,"unpackedSize":3273030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm4EoCRA9TVsSAnZWagAAg7UP/0TeClp9Er19Rh/rpRTg\nWTpJM9ejaDhnw0R3oCKVUvT0M42EFcpA5S1o8xRFNvTE2ri4GCghSAcncA9h\nHmC9qIdXciFGRrps1S4TqLGAoTU+berLoA2k9RqPhJTovtv96Mnx7VG4XtLY\n8DeMYP1fM5wEWVRExUjmptz1KKZjRraYUY3i3olNvx9+e8QUE1RnuRppRgC7\nW2WOE0Fl6NHiku9mpFBduz24KBeDypBAXrmObgRWX52Mca8QXMVkuODEHFrN\naF/kk3dbnsHc60cY5gIh8a1RMXmlomcLtMTJnjaAfFuF6novanff1urscROn\nnXoQDuUKLWEqHcLD/6+vSfoI2ajlktf6v1vKAS+0DaTbwH52FnohcLlFKqfW\nbE7TI7YfTo8m3ufWxDLSxr0YwYwjtdercAdhRNgHj07Qgj4v0BVyN4jaI0DQ\n7EDUbGaK4rLQeF1jcSPQmp9cQXtJkyEG8MFiz/TonjwcjFSsAvnAK7fQsGnr\nxB1fy2fD6T4yC55vpOkDQVh7L0p3nRs+I9aSQvuA8MGvZbFCJv+5i1mNf3uq\nrcxer4rcYwelqOPgfTnhPqZSENu94VZQbUugV13jnFmMTSp8pcoNl9wyZUm5\njhtKlTCF2+b+zC5v8yDJnd7y3fX48kKVtw91tv1B2bZ1rPAUTTkUHSUVpSrO\n1f7Y\r\n=NT8A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDvZideh5+JVAuqMME0gdg8pgZNu78gGpa3+ZzVXRid/AiEA2e/nKRVfdHAKh9BElcR5icc8XBxEjgAf1J765hrWJm8="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.6_1637581096097_0.09683263623868243"},"_hasShrinkwrap":false},"2.4.2-beta.7":{"name":"ecsite-form-builder","version":"2.4.2-beta.7","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"97fa7b11898cad8a48d148da6422ac532b15f641","_id":"ecsite-form-builder@2.4.2-beta.7","_nodeVersion":"12.18.2","_npmVersion":"6.14.5","dist":{"integrity":"sha512-alHMMibJYKsv6G7R6DlwcHFqM/41rga4qRmnXj+pKwcimEacQOExhZnfEIqfGH09wJaB96nI8s333ngX1uRtKw==","shasum":"6252139ffa82d7c7a4906b7ac0526b1cacea6ec6","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.7.tgz","fileCount":85,"unpackedSize":3273196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm4/5CRA9TVsSAnZWagAA930P/2WqeLy45nCvfvpEaE8R\n7MZUgFOsWzTYEGeTPINl3TGO8ha7egXPmH9Sg1SI58Ldp0TZ1fu5597Az3BG\nZfVru0Xp7DX292soy84HnIBDENarjxtZmzW67JS61jAi6aEbmsNshUJOpfFy\nfJPN9ZUlsKeGCFbg/9RTwu1kZ9wS01SGYDwdYOUmWvkAjXoPeEApSvMRAjT6\noi5gmIdb6Upp2lC1zW9C09ZnFCzXSnsTvVealnVhesQ+WMMhrAhI4MiSU5uL\nfbU5Hrf18I8sukvTE327xl5du75y2Qk3vlB6FSeUPJuGcUfhfT5/O369N7iB\nR7FOGu5ABt85BKGkimHvXzDPyypKr+jAdJxbn4q36C1aJZfpfui0OF4tTL3t\nyrK1KhI1JSkIm1beCV5Q2d0/FYBvWmE7hH3iOnj+nEXBdLzWvDcd5LCgn+66\n4yQGWi84HwWbU8QN1kwd/plS60gFLtpVIbNPl38DguTk79MiPkPt4kx1hKIx\nxOOY/5hHgoGFeFMx8eM2aXpJYZJQ6jJpJGaoHqtmHZM/P9YbzQ8YPFpObatd\nS+QAu87VwvxVZuo1ZPzMIOt1RS5/6jY6Xcg54mmgX06I14JBmizbIZSO1lDT\nRg7zXC0A+RRluAVZrJNAFevysUODZ8QXYA0qmJCht7ryJFucxmL6UGiJ7DWy\n/Toi\r\n=uMzv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGOj8EW+vEeigZpkbCIDHuCD2yiYnRZp/HjY8jISqRfmAiEA6l0Y0JDx0Q5jC/4puonus8xS56Eg+LWOcrD+lVruiH8="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.7_1637584889289_0.13330659399248046"},"_hasShrinkwrap":false},"2.4.2-beta.8":{"name":"ecsite-form-builder","version":"2.4.2-beta.8","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"fdeeb2233cb932349e5bec0e3c1dd99dad3e957e","_id":"ecsite-form-builder@2.4.2-beta.8","_nodeVersion":"12.18.2","_npmVersion":"6.14.5","dist":{"integrity":"sha512-WppewPsZ8XM34f1iWwRjErfc0tLNGxRm0pdtpfAYuCGtjQzj6XUaxlG6XMEVFtMc35eQs2QwPLJZRTp2Yg6DYQ==","shasum":"b0cc1c9b5f4db3771982e33b0e23ee3a289b6f36","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.8.tgz","fileCount":85,"unpackedSize":3273273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm5TlCRA9TVsSAnZWagAAF/oP/A93CVCYfK8pYENRa/Gb\nNvXtCyLz51mLF1MwZyh12VV+R7l81kNCG3pK/jAGOIWht2R34/dUvL99bqZY\nvor6+zeUBSxiKBLuI3dhSGnJ+7ETURiqpP2+EzyCFN+W/jy0g5MJWHD21ZPz\nVO3Vk4IaE4lWJ58SnDy9jx7gdytV5TSdeYMFmTKzDPINMBdM92bzt3/UPul3\nORFjsNHYQ2xRxWE6+nHTAbMfx2/Iz7TfUc+k5073bbzoVVKckWE/wDMln80N\n/9BjmAc1+bMOotv4QmVuSd7QmZz+icb7+P0BYI8nNvHde20XZtlcSKiMQkg7\nxB6BjFw6oOZCXGv6AuUpuOb0mnnLfit4o3wkevj+DIX0TyO3Krpmx8faZrA9\npm1GWovfrsOkBVHG0hKTriqjorXJ+LV7wi1UZSX82K7mMTKS30hQG6EYYc4o\npM5mxhARpIbE3bcH/JUOClYLQYoMqFPqZeVMnjSzwF+WYXH8uGaQacAFAxc0\nqiPh4j503irRKHvFZzb/Wmd+sHPuGSo3dNEQynJl/MvIXTZlLJQqTYrqD63b\n6V3TXpo0I99RWJN7AEERLCl1oRx+L6thigITBrzNo91dF62TUVeZYXhJAB6h\ngYFSRKPxslvKr89vwrLA0MAB9zcYX6yXNTVUgqlvHcM53N8zBWWGy90YBxeQ\nr8Fs\r\n=hbzT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHhRVqOxrNwJ4tt2cBx+2qYARmKqy76+JgFSQunPt+EcAiAzs2w8kqtazVt0vpsSI7CFZCFlHyDs5OKox5nj8ikeZw=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.8_1637586149347_0.5676798052698369"},"_hasShrinkwrap":false},"2.4.2-beta.9":{"name":"ecsite-form-builder","version":"2.4.2-beta.9","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"b36f44f5bc3be4552d607c316572264862bd14f6","_id":"ecsite-form-builder@2.4.2-beta.9","_nodeVersion":"12.18.2","_npmVersion":"6.14.5","dist":{"integrity":"sha512-S8io8T3i8btHB+/ZH9dfAsMrYQoEsGjwrKe6Beht7uuwNeRFIxbMeDiJOGvLItIQB3J7R01DraVFqDPfDKUBgg==","shasum":"ed5b37cfc19396e50c6503a4e95c69f976379992","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.9.tgz","fileCount":85,"unpackedSize":3323574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnKXwCRA9TVsSAnZWagAAn1MP/R83za6QgPp3Wc3Ux/8t\nfC4WS2FOMmTgz7aP29z60WajVnmQDHYMkR8yd+n5lzYIxw3Sd1+uHcpziiVY\n/92vC4ZNVRPm59nKZRmN9tSi+Npm1/6t9u0GpM/lgsHaM/2RfUxruKRWZz1D\nMOw2U2Leu+s/aHG25KjINn2FcgwzhbgJLSOITJtFvAm3YlV7m/fLT1bjXh/4\n/309Cj9OePv/iv+kTdoAhfW2UD0zdA0wUKykfshA3Bj4xTEmV4hEk5EbF/GM\nwp4LmtsNz1ViBvScy4oPRYlSUN/tb+NkVFYVJwp3/z5U38vZVoQ9mul2ZwkU\n1y2TC8BYEmR3yg5VyHJW62YeZ6NLXconQWZ8IGZmJIsWycXUZ0VWNbv3Ae8p\njOJui00384HfXu38HM68IT4VNyLe9IHts7pfGDZCPzX4BHTrP0M7zEweERfG\n4AFL+2neNr+P4gaaIH774j64vARt2VFcQFc5mNSUC38sLOriB4W2tyYQD8UL\nB/iBfdyKUOnY5t+13yImsMcq9FMUbRN81Up2c9Ol4e+D1d5o34FfyPxTtnFF\nth0Hg0xQM2vQqJfI/yCJhWz+21DZW9r0eB1jDoTC4m90hCEZ4ni7j9wq7RGf\nOWB8y/h4xYqwk/Z1+ljW73oT76LgresaIGlexMLJddi+sxxYL+EF9S3KNkTe\nGf9j\r\n=fd7t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDDp75LLQeW//OvWuc2gF5L7Fk6GqaLpRZK+d7+k2wLRAiBAjHpX/7sXhNc+AF3ucUvGJxIDlOqGZMn4mg2nyLS9Jw=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.9_1637656048644_0.07363177385721031"},"_hasShrinkwrap":false},"2.4.2-beta.10":{"name":"ecsite-form-builder","version":"2.4.2-beta.10","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"05c172b34dbce9d772b961ca8a2a648f6c3de8b6","_id":"ecsite-form-builder@2.4.2-beta.10","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-oX47DMsirXTSdG0/Fd1etfcQ44F1qHcX7/+1gmtpUZu4XDNjEZSkcnqCw9XWvL7C27ORZ1xoC2snNZxXqLvB4A==","shasum":"06ec7f0702d32a55ae08db4f6a5baaeca8e5c1d7","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.10.tgz","fileCount":85,"unpackedSize":3323821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnLRjCRA9TVsSAnZWagAAnqEP/RPb9oGgQ6wUb3kdAFav\ndSfRE8UI6dBtQnWshjRk0vcjuyrwzBIqPkHf+I5YM0HaW0K6dqYVeJQdCNWV\nHjZIdFvnUu2+SocDnrk4K8+Nn/onYp1r0VH9P6NUN0wnHIrqi/gB/8KZfHft\nZH63D+fXNqGX87jhWQlsb2ML8iyAXuvNSRyK+R4S2n0mM/aPep8LzQNQlC2z\ngsp7KPoQnNq0/Vj+QXfNOPdH+CMk8xmI2EDacnbh9geSbuPn8XCFT7O9CQ2/\n/tgOrO4rq45xVyHb4tnFdVSjHa5fJgyIql4owAU+W+I7Fx5PeEh5WcI3cwuZ\n61xGXopkLRzkPe2OwWZCBZhunaKWnCCosmErcp7sNXLYEgat1EHFpTvS1eU9\n/eLzRqqo/V4CXrw8aiJxDkKQ8X5jPezm1AWPX9LSV45JUs/aMNDJCQujN61q\nZH7NovBCoRvrYsL46FYTxOIO7LGsB39ofcnYYZ7VuwP8JMULKRcg5MCt6Q7Z\nU+kTuGb2q6u63XTdj0y/Ru2ypoRIxAXlnWyTuSOBRuqwC+rVlHI4gP/dXVw5\nqlU9pmeXqQ2PQR2VOyy8ynsw51d9g6PfYh/W7pp01NIpDCEJPWzQtH+WCxsG\nDxbY5E+rzTto/yFwCqmfmzD5Hpy0y9SYudp4a0MRGQZAQOQat66ymHUyx4rW\nTl+6\r\n=RHT0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkPWt9/ui4xZRcvm2bO3fNhbgExzqa6/T2nm1iJiA0OwIgUy2momfkJlS8yF/UGiVzT4BeaBvJXCGbaeDs2q4QHc4="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.10_1637659746625_0.9397284947244455"},"_hasShrinkwrap":false},"2.4.2-beta.11":{"name":"ecsite-form-builder","version":"2.4.2-beta.11","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"41c04b7005015f5c5d06bc3b25ba6cc848edbe75","_id":"ecsite-form-builder@2.4.2-beta.11","_nodeVersion":"12.18.2","_npmVersion":"6.14.5","dist":{"integrity":"sha512-8BWVSOLWwg9h1NJdJj+TuIHGCMnC1tWtfHrarAGxxJ+4pY2P51ez50JghrcG2ix1WLkW+qE+A6S7nnlkjd7r4w==","shasum":"eca25ba8b31d8c94af373aab8fa2cd7be18fdaa6","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.11.tgz","fileCount":85,"unpackedSize":3323820,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnOMmCRA9TVsSAnZWagAAvGoP/1ezpjwMok1BZTE0URIg\nhxeC4HteXODJIdzQkf73O4UkIdyENS0vgBQ7v91KfZeQqvPxVOIjjxHSsVEw\neQARIKEjUzAYmknnuCVxST/Jz0s2ydVgF/+QTwOc3JDTv/yhA/D2Nkdg5Cir\na1gfPIIqFqEJXABcwk5Qe0eKB9jvBsmiP0Wv/+nQiUOxLUvp5mk3ZLqIn5KB\n41J8a0kUhxUaVy6VIBdptJZwKVfQK5Z9JmSrfIju/tkOuuaS3WSIncKj9x9e\nzsRM/CL9AquNGlVljQjuUtiUJwpjWX/tPAGnPXUEGf398HXwXoYSuFXxAPjG\nFvPzeVTED4yKH+I09MEFxhwLYwWYjpzzdGaleVZTKPKDoHJpoO5iPmiAhbQ5\nzj+hyf6o543oJq+SJKLFjl+VLyXL5UXzcImjURgj7FhLm/Lq2N06E+dETdmw\nRiqrP5eHaSLmWdU2Ez7qQqsgNO23kVjPvrds2yuz84E7u4j9tVMzqHnAc+ve\nbKFdabWWHIgXaRTE/1q3rUU3wjwCWp2zYA2CoC2V19ml9QyqwOFyQH3FBFWI\nNA4XZtH8W0ARI6idhorgDxdhAyvE+abmuafNZKoy5PMMpVgtFGq/zZVSyGKi\nA8FuusWb3TuS70kkHM80SJbU/XJfZhWFT49buDDXa0B7SyUv8W+NqoBQPOsA\nvabY\r\n=ltij\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7l2HcujGBlQErIka2bMqbYYxN4SjRxge6myLqtuSgRwIhAPnfR32diJuQTyvX9FskAJ/rGVdGilwDu8qq0KJalpT5"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.11_1637671718037_0.04598003616743451"},"_hasShrinkwrap":false},"2.4.2-beta.12":{"name":"ecsite-form-builder","version":"2.4.2-beta.12","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"523945e8c7b3f0a447556b272bc8ab061df7166d","_id":"ecsite-form-builder@2.4.2-beta.12","_nodeVersion":"12.18.2","_npmVersion":"6.14.5","dist":{"integrity":"sha512-H6eHeQacIonVOeFJg1tWNKXxJL/ayqla+khAMQTg2iDu9CwUGjCDyh4lKN67Lj5StgTXoWCsXMykYaMsiFCpjQ==","shasum":"6590090ab21b39fd6be6f68bdf1acdfc025b7d55","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.12.tgz","fileCount":85,"unpackedSize":3323840,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnQHkCRA9TVsSAnZWagAAhEMP/jOj9zTp/NmzS1QKY3bP\n4My3Twsgevn9Vo0A0dx0somban9i/Dx2XXWNbAjXZ74wohwGf5Ya+jnXrVZt\ngIkiARIrW4UaI9icD0+0fn/AjinS0EheHHy9HyAuM4lr8rlDpS1MHaQauTEQ\neXgazOFD/dFUZ0si5yI8Pqt7us1uDSkJIsEKp+mjvVVeYem8l8HIyZapTH5w\n3X9GCRvaTqq6oM/K+JydJAJzV4XbKtWBINkE7OAoKJgsHI2H/zGNpVMdKehU\nn/LAgqwWGLx9diCz/deMy/EiFkI/tnRE8GKOHVfGn+IZPS42SQKXdctNkHgk\nZIqHfbWS3N3SMu0CvzXJVQsO5Vsga4URARf/v57fxUpZY1+3Dk9f3UkX3fVL\n2rYbhqPhXIbokEMRWraOv5TSeZUVE1JMq2nnh5d1FMGRHdJ5r04Hv+Ug0EMj\naN9Ue2nY1Rbiq8wIGSVq9TWCau5I71lGxdWjZsC7COFKeaTN6eh1V5vmDM0g\nufaFxrvohYUlJqL+MS+RAXYlibDrr4IhAyUUL3VOhrJiC4wjROZMJ5zWfP9h\nuhon/g8wsUz0znxjcwH9+a80GpphNMPEj2fGPfMTmOzv9ozhduuUCgDCO59t\nzz/jamde6DlAfyoencb1gKfCMBr4T5cKZa3HY3NjCsKu5nCbm7KIT8ADLiWH\nwVeD\r\n=j+GB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIb1lSFpI7XtixZj+BjFJALfM2OtXdP2kwc7ayi2Yq7gIgVPpZfu2bxjPPpHj8QS962XFjAx0qeG8Wsjn5bzpephI="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.12_1637679588344_0.3460943491536619"},"_hasShrinkwrap":false},"2.4.2-beta.13":{"name":"ecsite-form-builder","version":"2.4.2-beta.13","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"b571429fdcc633f3f00fe8b92432f0609c250fdf","_id":"ecsite-form-builder@2.4.2-beta.13","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-dMU782aKebJDNAahEhzedjbJ9MOZKAX+qIRzn+JKCjbpzjsLihr2r/VtcgV4LSBZ6I9M332HTxMZNNwL19B3Cw==","shasum":"8e124cf252ab30fea4a74340a977644ecdad4e62","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.13.tgz","fileCount":85,"unpackedSize":3325288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnhmxCRA9TVsSAnZWagAAhXcP/0rM7oGDVYfIVFnJKDwy\noAdRdRRSuXLyZTSRLdpo2B7zrXQmklyOmHH6MqYVAMELRgknonpuwwJmK80x\nt9rkgajsVpYAoAAqRLBAelRPb6Btye38wGSEsjIkBEbVzqrYb5esR8PU+m7H\nnRGfibyfVPVLwOvD5qX2vE6ScRP8V7DS/A4x3g7Bek+Ci6s16Gh5NS6JQ8RS\npdgFkSf9beJjZcCFKGZs/81ec+rKJtgJ315nw+OKLoZduqj3Lx29zgS2JnjX\nha83Ovs6pjrOxRO111da7OW5XYi9LaT7zc1gqUjcdGXRHs2virCKyfYaYpJr\ndIANkLetFuJKXp0oe8fvJfv+XB6DntIGZ5Afc48P4eF59IrLf3hEzCa148rP\ndHzNQdGhCkd2DZuhFsLLrNGR9oy/fGgRw8U8sAdYuqGciAaIdAyQtPH6TDD3\nnV4nAHIdrJdJJiRFsTmrH9GfGhMZfhcvgYbYqqDxhYzERTgIm/rjE+U6I28z\n7dLuRA9y5vcbSs+0EmOFPT6fi9E22xHCAr4G/9FQ5GYLWUGt2KkjkkvEhyMI\nmtkV9rkV6RWOcJaIaSvhbXVtdSkNJpxbh68aYznqy5qj/Mx/RyiFCny7b+B6\nZyRr6jbK3pLMViZgFwn9dYSTc0ghcHu4j4vdR9265xaaROvCUth/3VAyLSZc\nHoVD\r\n=vTgq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBlfGZSJxNl8d22cst9Y5+zE2ERi0CF27TrW6ybd2MZJAiAflCOKAGIUDKM+dy9wvi524q8yXsNjEZMncfyeZWeHzQ=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.13_1637751217519_0.6190730278547878"},"_hasShrinkwrap":false},"2.4.2-beta.14":{"name":"ecsite-form-builder","version":"2.4.2-beta.14","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"79ed50de3f1806453fc4815d5b3bf59e14d04c72","_id":"ecsite-form-builder@2.4.2-beta.14","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-37g73W2dRoH3L97VJvyqhG+pLOMG1MF4gkcgOIpJz3TPD4KJ2Uiif6LpyLDmk9Y6OI3hNQj4748imi3C9QZS1g==","shasum":"5b21939492196e3743e989039818ab217cdb6708","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.14.tgz","fileCount":85,"unpackedSize":3325766,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnimNCRA9TVsSAnZWagAAUf4QAIsFgeD98xB153X3Ue5D\niaY8sa5kC2YnDosg4wdrIVKv/TpAtTiu85ORHxDtfAp75TIYvFgdOkXma0Ta\nALpRPc8NwX+1nV1iRSVqDDLiucwG8AeGyYcM7Q2vgGeTHSBP59F6TCfUmGNm\nQwbzqpsZe01blxYIbuRBInzSW0DIaqZIaCyCwc+RkkdQrd8Te6zpWbYp3Yms\ndczDibC23Yj0PftmxD+/XTyBXB1jggxocJAmUryLsYyGORmLUAuHrdz8pF4k\naybsEpvCQhp+inGPfoMbNGNVbjERlowGhAsxNGOFgEKYUBKmdOqxiwg3onwy\nea+a/1nPG+tdbBv0DGygkcLAkldr7ZKRqFanDkshaGsmGxEZciS0o+UAAZYb\ndKSo1JqIOHZZi0yO9DD7ZHSALXoU/QEtui/zVuYAti7xZ56XwFq9Ofn+KhKP\n2ldkPRBkjYLfhbxz55vaU5EroQ0BHMJKfOhAzgAwa9Wm0wWJBhyJiM/Oew7Q\nv1oBDus9urXMbjMnHldcqnlgVrik9cle+c6hXCnIUaTtrietlclBnkh5GKhV\nVMIRjZLIL1DnCQ911Pp33Trewmb9zVoZ+vZILRtUWYJas7FoDop5K8BVEIE5\nJ6sX84fPwwSWrbnVRw9VfNp4Y0xmbUarTgyA/GzsnMAXzgfp8/jUjRsw9Q/6\nMz1w\r\n=vFnu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMAumAJFMBmkzBHTq27OKSSgQQoigaCRXdOeAfwTa9wwIgD7uVqqGw4oz0twmAKb8Beo7iSvHpF+hbIOM7gbBMw3s="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.14_1637755277386_0.05037478353206426"},"_hasShrinkwrap":false},"2.4.2-beta.15":{"name":"ecsite-form-builder","version":"2.4.2-beta.15","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"6cbbaff700e605ac56fc2594a0f4eecd58495316","_id":"ecsite-form-builder@2.4.2-beta.15","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-eBZ/hhir6JSsoVxHsU6bZPA/FkOQu3SSRVK4QHhT7K/Q4EVJVczC3d3yaZPZ/cGRTXIRnErlnbbFNK6/l+SJiA==","shasum":"eb7c14a28d5522f8ef4ac2faf2928e8af558d0e7","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.15.tgz","fileCount":85,"unpackedSize":3325769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnjXkCRA9TVsSAnZWagAAyEYP/j04ThJ/3+yK8IV0Qt+p\n7J+IE9eEUo6bTT92g3mlS+w7IzGGWWmQwUDzGouAU6ITwK1DR+nHAd22PWG9\nqiQo3RQ3S+/VEsGOpQG5tPbBJW/KaeALJL+ZJu8vh3Y8Ef7lx0NRQx26/DKd\n0Rc4nezBjaXk3xABXpiKvqSEvjxq3Z8EBMTG+RyM7glkFGLIQq8o+izckTuN\n0fNk1hPdWzrTHSyEnpDn9ik8ypLw/ynhBA8yWMeDW0NNl418zPFcXv9EsdWf\ni7MF/6vu2VcxUQMyeWxENk5R8aS1YZ7wkLU43J+6OiLSrfo0a/fJlObPTwLQ\naYfwbF0xzM5ewrVx7Uwf6e+encF+99wnM24I2kBt2u4JAmdSQF2wYS7PIm9t\n1ZebmMIo14LqVRibLl8w+ibzOZY0d4QgY+//TZks/fK4yJADftf7klaqK6I0\nrwoRxbVUnHXorr8gpftMAy+z7jr1zj5+UpO2YFD5iR6KWIoJdzfREhSdhXVT\nx4xmoW6KghkCRemiWClkcCi4pjMYMH3REXv5QltXPXObLRcNqM2m1iFXWY9g\n69Xs3amnC8qduXErFRfhWs+II4Cd+FyTtKwzMf5haA3ZtqFlg4eEtnIp0DoS\n/SZnOsi8LN+A54pYqXAEsPt0sqiOqG5gl+ZVIDmjcNG17VsaFL3+SWasA/IS\nGlRU\r\n=zZPc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC81kezhossybfMw9MogHk1Qb0+eNGGeLqsVN8/d/iZLAIhANVS5NMEder6uQtFPQ8uLZ9Ew1AZvF8FEx41U3zMeYMM"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.15_1637758436491_0.9702802101810986"},"_hasShrinkwrap":false},"2.4.2-beta.16":{"name":"ecsite-form-builder","version":"2.4.2-beta.16","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"c12f45cbe3a5be43b9b45228ae72dc66542a1ec0","_id":"ecsite-form-builder@2.4.2-beta.16","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-3teWG5zcM3bjFA2Ss55wU9GR1GIUHeL8gMvtRAYbdiAG2fLustQvF/jJ4Yxk984diQL77FB1C7kZ2QKUvTFVSQ==","shasum":"9d711ce3c9da62d48631ff2d08f904daeb604e33","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.16.tgz","fileCount":85,"unpackedSize":3325719,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnmCYCRA9TVsSAnZWagAAcmkP/A6eO++0od5nqJzqw73O\nJAxAGrGnr7SPyop6cH0+uE3HGrdFFoGJrEnYen6d+fod+tnvFiiXuSJiuhbF\nkQIoLCZlGvm19921pWJl2PR4S+Bp43S+t8XEw/LZ6bbyW8/Rsza7GqqCPg+6\n1a0Og4SLiCaJRYpaP+aEw6+ei9o3v5gvlNnnC+07bstAO9rdxqWMTQVSOWTD\ndbx+xTxugf9atJVF7geS46Ix2JAE7oRaM4/UmUfWzKns4VGHsdLQ+Xtr1l+a\nmYiRJxXwzeJq+YSabkW4H3NemQ6jbSf8s0PIzaCxXfSVySdlVswju71FY2OZ\nCLv0fH35fBId3HPuKFhEszQQs1Ws8+GpQW03N3dqUKvjVlxH2/2qloHQ0/hO\njAuIqB1FLKohsQGHZIZR/iim5DrvPM5RIcJ/3aY3b5FHitTvQk0LnnSsuvCJ\naCoWrQTyPZSVkHru/Hm4po65Z4jjIGmVtf7+Uc0U2zul6LSNklccyZu8D0Zo\n40QyFEEp8cO6lnKro7QbRjCyihV1sYRCvmfw/+07abhCirqkXNEhTL2TWsrL\nwN7NNVdZiYGA1Hs5gtu1FKgOg6k5zmerA9/u4qnkxmnN30IfYmizbsLwiEnd\nyiMQj4SefROC94v0P+nBEEr23BJfQ2GicZZI2GAxep176q7mGOsrv0SGku6e\nDyQ2\r\n=NOjR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5c6SdTP6nQF6KQyuMBH0qKJNb3vwxMzXV3BIHk1oxOAIhAPI1+z3D9abvu/S2p4BqoSHMQ2x04WG2v5SMoEAjK9Qm"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.16_1637769368477_0.8580895094927292"},"_hasShrinkwrap":false},"2.4.2-beta.17":{"name":"ecsite-form-builder","version":"2.4.2-beta.17","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"5057ce83ddc57f8190b6eff9380ec771c4468dc6","_id":"ecsite-form-builder@2.4.2-beta.17","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-qwM0tmKtAC+PxmkKbCV5LEc/Cy35LHFoCBm+njjzgcK4paR06YZ9sN8qgxfBbxWAFX2fWSHCEPNAeZ9XSLi4lA==","shasum":"eace897870607bac137d91018119037c6cb8c018","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.17.tgz","fileCount":85,"unpackedSize":3328296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhno7lCRA9TVsSAnZWagAAtl4QAJzLv1WTapQ8LzVcsd/b\nCH2UsJsyZxkzkE61DuQz4kkNRiFWAXzwDXCHVGUlXyURzvdktH0QifGxeTlU\no408jJ7xdtPlDoekd+lWP3gnbh9b8zeMD4JnMmnX0xJ3gKaJ5AWjTIKa+M3y\nhwjg3J+yMmLy3vP0ZdMafvrvX+slSS779nt0VdTiSblJqOKkz854x7l99pya\n7S3MyuXhHxQ2uTPUNoDqwAucIaB2iAj60+rLk/zURnkfISvV6g4+Sk+U7Uh5\n19YL7972x5daHXh9wPcFPE8v1zfwZeei0oAsQRI34l7ZvgchLrrgY51y12af\nT2sBO/sXU2ok0ozqjfhtKdTSCkYTWDG9eZ2uCwOg5IXhYfaDjT8hzd8KJ+AQ\nGe6Gl0WzgOevP9NnEFMUIRyHi28jyNfVrT4D9tYM/yrF5s2moA79HRJrRQJT\nGeuhnw7bwVWDYp6+bCVR2tM/nIh7nwByuvKaFETSX16Q+x9OH2+Y4IMUiR3y\nqGbkIurnhyIaxqTNh3oRkLZ8YyqLEbM/MrJRKoL2HLinWEI0BjMAHJzAY+2R\nGYpTcc0Wk69KV3K1b1uqHlTO6pURMvyFZ0tvvI04QtR7+F1Q+DbzW1mNeoWo\nMKuQeakRjvL90Rcb0DiRPya5vFO60WXfdZprBp0rT3nYGG/yosygRSBQX3Pt\nDlrQ\r\n=G9zJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBBzFAOhryoAuRyJWTglwfbqurzUKx6g0DdOji1SzJTtAiEA0HA03UzTid6gMG9mwaiec67ixo6ASYuItuZfzMz2Ot8="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.17_1637781221642_0.890210760968694"},"_hasShrinkwrap":false},"2.4.2-beta.18":{"name":"ecsite-form-builder","version":"2.4.2-beta.18","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"307212e14703ee430e24137d5231c24cba98b8a1","_id":"ecsite-form-builder@2.4.2-beta.18","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-9IyMacN1zguxI7i5LcuPvuelgkswBtaKj+66V5FIGFK4giAVqWPqSRLraL9U59aJAWB6PxLHl4Tj6Kj4TIe1bg==","shasum":"395f922ea7e960e8318e0f7d148f7c7c037babb4","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.18.tgz","fileCount":85,"unpackedSize":3328307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnpHxCRA9TVsSAnZWagAAmx0P/2l3A5oJFLqfVZCBuD7c\nP3uxVv9BjGU6sC8iBBhn9PfWmu8QvXckedG7ubJHIDQkCotessEG1JivUhVT\nqW+zFxAUinV6kkVrSDNkv+VN3nSizCc+eL49jNA06LGP15lDCeuhwHH/hTrP\nzJL4AqKhv3MzO2Mj4qZNdYwjNm4Vasz6PbYwkmWhV0K2cHkJlLrY/8kHzUiu\n1BTMVjb/yShPE7E05EUZUy9L2/O9lyY4W26XlzrvP2NOUZkiUC5j6ln0VjcX\nDjNhxnAbttlLeGjhgO/SZAHsYbLoP6fNYqVJRlVepADWPHkysE0UFKc4GmdN\nnjwlyk7X86X0kNlNlN+5vE+hfR5SxLh/uZsKRmtcjWuPVws6w8vBw411M8R5\nbscyfkZqv9NnNj8DTJcq9ak7RlxstlIKptpEjN2BM82/vVWeLhpP4LQrSWdf\nkEQAZmHlfgu3dvvvFKcbWoTH0V08i1RiZJEY8GqUbisk7DuNyMnX5Js030eD\n7zuYH9eo5kRt2eft7fvi12XbMw7a52cJXv0RPdpsE1y8gIJH3mMIOpP16HC2\n6XPYEiPvwKNWkCX/bvNRat5aWf4L6H0CgmIl4Lct4owe8Rrxt7+RAHQsxEtK\nqibK3mqYAmB00lQiNtzcd4CspoS/XcGoPT1x72DgHKI0BcXNeCcza8DDV2U2\n4ga0\r\n=Jx6H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFhCC0N3JkiNQEWyPTgxmeL1/tTrPRnBc96jkY0Aq2ELAiEAz6e7J+OUCkzwG6WJgmLXfO561iNoZWVklrBo161a/Ok="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.18_1637782001757_0.5903640963801986"},"_hasShrinkwrap":false},"2.4.2-beta.19":{"name":"ecsite-form-builder","version":"2.4.2-beta.19","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"2300d77eb13a3f09c143aa158dec8fafeff54b3d","_id":"ecsite-form-builder@2.4.2-beta.19","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-BsYAteJzKoWbBgljzh+S7NyzRHgVnrFkrIO1FqzaBsUDuTKhOyKTPvOKiapuvGOIRWZVEUOvWEN+4RiJl/293g==","shasum":"871c98ead97f17260b3f83c000a05610326d68d8","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.19.tgz","fileCount":85,"unpackedSize":3328440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnpeHCRA9TVsSAnZWagAAChYP/0WsI8WlrfzAAG/iNxvu\nTU0qzHQqDzXz8LXbmBLz++qHvmJPZvbFS9MKl7Mriyfyw/6wSXgAJKbf3J+L\nkFnkYLwtj7qQd9ko7s5A0WmxvJTC4TfxYUA2zbhFt0DjXGxv/vWs5gmLE+qC\n9l/afOdALbMNcNfv3D9dSt5lv29BQHPW2zs/zzV8uxelpzL0s9j3BSVICGH3\neG/IiVmxOqFU04ubNDqvvVVsR+N0NdhvBlXobeG3157G5HB+E8yv4TZIWPNI\n+MtgWo7Y5J3bS3LakIHAzl6GvTnNlTTcA4E6dTMPySQlvHyxhfzvMQWcBOXa\nUn5IOjDkUy3b+5MAcaYiU3WBGj7vrgCNMlI120ltn0jsXIjL2Nq4X9INdEjP\nLZej5rp/NQxc+PxJAdN/e2Imen+g8tSHjXMkFUbHR7hxWHannW0RIEMu8Mrw\n880vIrTIGshxFJF7l0p/nZwZD6Tz01673s3SHiSFq49HhR8gMrwoQDZLicmg\nQkllLL6ShOcJC949n+ER38eGpBNVsnqKbUF4uslC6ebx4yiVrZsmV+pMMZ92\nf/QZlktCpA0a1SQwDePXyOY3eZ26BlzfFS7twR3TvPNpEnX7LsBglLElDALr\noXaqxwdfwJVPI82uyjozb1l3x+O2oDVINA3+LdKurRZ5+OxsfjNWmu9H8qgL\nwxu2\r\n=6rcq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAkNuyeTt+ZijzKeBvtfVpDCBTZDqHf9c33zVhYYJGL8AiA6FACEKgUTPZPQ7Xw/3slW8fz1KOsDVHGaqXeF7Qe3Ag=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.19_1637783431227_0.11631304594357239"},"_hasShrinkwrap":false},"2.4.2-beta.20":{"name":"ecsite-form-builder","version":"2.4.2-beta.20","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"837cb57968b6db554adc06d4c2d2fa226fb96332","_id":"ecsite-form-builder@2.4.2-beta.20","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-enhwssW0nuciqINdwDHYT7bdsEP6ezSbGJMPx1PxllPCGAYnISnKfRVRxcHJmK6r+ABygGG6qoKtEgr1VdbDnw==","shasum":"9699117aa074cac55d730cb3f761d7de2b3b9e67","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.20.tgz","fileCount":85,"unpackedSize":3328440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnpvRCRA9TVsSAnZWagAALbMQAJ4mGijMyb/IbyteGBtM\nqICM8lB5/rfIN6ae1mwv7ldSHkskG6zRoKm5L98K5s3Y2H5wIGnbOKOTarhr\nbRGYwChkKwmVPF4S/2WJwZDC8JvX5B1ZrPo9hyadKfxNqalAqiFfv99+LqoP\nANRVFz4Nj7VouS+u6Rr9WHNJiXwwh5SPwDuMuNqWsnm9WN0CMKRUE/ASzS8n\nXwtiT8HiPNhgaw50OfbFzER4FS3fThfpNzPRAO8fe23M5jv2Vyvvk8Gt90kM\nJYXbHUL59PEFkSKsn8gbyZyj7MS20e0PgpJMwuxnmkImwulGFJIZgqEzVsbL\nX5tHaPZrubW3D6l2UBzJSAf8S77oh3phahmBozAkV3uenRA88dztFi95ynUx\nXU6kUmwpZta6vQwOddbpmNljazNCZbkHQZhS9a5TCtTnsKKwZU/fTJnN/oMX\npnyRgjVgg5Xmy/6XCQtUb/LN4arPQJRmd18S9T0D2E7u658aUCtEr0TWBc9j\nxTD0bV3f4omE1ABf9WPaoLpezaNC6aKtZ1+CeqjZT2jRCvcYYK5uVWKXvn2h\nWISCJhPWDpE6m8t/K4ke9SZhg9fixNzJ0VIlonFqlybupjAN3Fs1RChOnn0f\ng8CGBj8rnK9NwbnyduPYDvVYuLgE9Hy6wKuKVf+U0BrxwSDypMU4tleJyJVy\niFQh\r\n=mem7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgkshRMXeJyHFx7xXY3jfWK/nXwoE/Ducj8hnmut+fIwIhAK7Ne+dpMoCzeFRWBBmfgDqtbvW29I56vg+h4VHyE7LV"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.20_1637784529490_0.0795530679655605"},"_hasShrinkwrap":false},"2.4.2-beta.21":{"name":"ecsite-form-builder","version":"2.4.2-beta.21","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"e6801129a194530705c883caa3682e5a7a5471c2","_id":"ecsite-form-builder@2.4.2-beta.21","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-7dmwCQYeUD+XdSnaGXcVCD8o7gxu0Ca6YXUpRenx4z/zeXEX69aQk0RWkEIMrlQNIFVFgBOHHVfSSox8IczzSg==","shasum":"10d31752878dc1d2e6a164778868d3fbcb11d6ec","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.21.tgz","fileCount":89,"unpackedSize":3365823,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhn8h7CRA9TVsSAnZWagAAEZ8P/0F+dEuoRF47evb865md\n5IypUd0U7KwH+tm7pK+Kz0myPy1OZLJ/jK8rRgGWkhy9vLK0uVakVCcHoCEw\ntzFHDwmdRbpqSsNg3DkaJ1wt6qL7oZpiQdnZC8ESaOECHjH8TnuI75OpttMW\nebo+ITyd308xYXf572vODc1QRqgpJW59WfC+4k+GNVSI6xwINkutNjYjf/Gd\n+9qtPtKh+vZghAsJaNVvQ03EUdRNjPK2QBwBfDKhKbFiOL6ap2JewIRdy7r9\nbqS2NSmlNEtGdSEvmDBfLrGs7xU94ZwQCHy5Hu1ltuzqiNtEWXC6o7xWU+rf\n2dsRYJH/vSFDYd0xBxUtBQ/EgZ2icdFGUEaxsJ/HStDjM0hS/OoXlFCMKW9R\nSefVTISEHrPNsE1qrhA9armGoAJEyd762dLga7vTKkv1oN9dmTUizh4u75tL\nwSIetelFEYh6AahgaEYBcis6xyASC8SsMwPIpayzD4cYe+BfNn15zw2hJ+vn\noJ2LFsiO+qYHaHfBOmZJv7e9K3HmeDjNfwPKt1tQ2cajybn+YWwc7Ncn7vkh\nGdR+2RBZJftSfB5urAlncARiQ+4ob4wNT5jOHiDRWwu6gVW7Naaod37gJtft\ncazPdC6AepVz177TW/xhLPm9ouDkabVaX8w4Gaog20RcitKKvqd0Ibreq009\nroQ8\r\n=Zcuw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGhlv5VbrxI7vFhSJVMKUOQwPCJh39Q0FbSQa4OOEmUsAiBIkHJYKQfT7r/cRwIcaQJts/np15E3+chYAw2o2Iq25g=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.21_1637861499231_0.16629039739029938"},"_hasShrinkwrap":false},"2.4.2-beta.22":{"name":"ecsite-form-builder","version":"2.4.2-beta.22","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"aa7a4693cb50ce1b5bedf182ce685f3004fab1a4","_id":"ecsite-form-builder@2.4.2-beta.22","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-22cgS7LvdOoWMbtbYdW6YKpV/sYoi715kv9p9MnKCsiA9zPlzpIwGhHEBWXfkl5NpiyrrMNptoMAbjhB+J0nag==","shasum":"76d9b547447fb066c1a872341e85bcb2465d12a9","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.22.tgz","fileCount":89,"unpackedSize":4248324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhoL2aCRA9TVsSAnZWagAA6/0P/jLJoJdjz81rbaVd5Gvv\nLor2jQFZsLFrX45d+THUiXsZvtotO2vb0uLBU7ijZvV5PiuiZ2g7vK/MDSnV\nj3mH+TuBKSoDWpALyhdY3laOA1H1LXJS7Lxiafue2yPkPOnoAi51O9UgxXk0\n5DAZ1DGa7+Lm7ExnGa2Q0DNdUplgH/LDq0+e25log4j1/iHW1w5BEs1OJxmK\n7l6M7nd51eUKlAD+KWgVPRAqGfMwVkCwqP1bzOLRblNYGCMxn3QuBobEwvtT\nvWMHRABQThvEgx1K1sNOvKeA6k5KZTuMLFAsLHrVt0KInJyWt3YEG9AHDhPD\nOkdMrz0fhR00ckTDmjUC6OwIhLV2m5Ggrlvm79K3lgkvBQHyTkBqPNLnjkvy\nfjNobbLH9N8opCVAG7Exxrx0nIdto8h2h0Y3r/MNfl282tRReOU4u4SJB3sT\nLWzlN6EGvkWSemYn4HD3Nw5+6M8hbnPo/5ry1aVASr2yzN2qMs/t/P2tfJ5E\nhjYYIywhN8EYkj8zovu6aoxbajE2NmAm8FGKcs6qDGmDB1N1LfX6E6dkOCWf\nTPGKF3zqxUtly6xAeYfAGUq2ImIgEHZyHKfC/FpXcWzYuW2/oj8tyjSmSYh1\nw+wjL4pKUMMhTFiGtL4A9Z10ulLiV8MYfhFFSHMnm0CjyeL7AZXDbu0vZ0dS\nSpBg\r\n=0dte\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdt7+TyC5WmFMpFU9TF0b5YUm3OmQCFlbSfVRdYVHXJgIgR66qa1Q4QnVhkD/rBY4dVvBWMM6vuMoVqCQbG9koLXU="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.22_1637924250555_0.6723340088713419"},"_hasShrinkwrap":false},"2.4.2-beta.23":{"name":"ecsite-form-builder","version":"2.4.2-beta.23","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"870321e14b815e72c2550e16bced148158639024","_id":"ecsite-form-builder@2.4.2-beta.23","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-ZeER2P2b82mMV1zueSLxjhU0//FXWoZMIhe+vUyIns0h+LlHk+28RD1mUUFzemOLSUaLoYU3E7ub7UpYeygktg==","shasum":"2ece20cde68cb6655d27946eecabf6e338574c4d","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.23.tgz","fileCount":89,"unpackedSize":4248324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhoMITCRA9TVsSAnZWagAA9hMQAKD3L3e/gG4VEXmLWhgs\nnaKvyuMprzl6ibVplHY/FoR9pN/F+ks79jILp3TTaOTvu211DHjYgL6GMWoB\nNZDXhqDwOg7otJAhv+eTzJBYDgBxxfEq0ceqIEbT+5f8aGY5XM78lFncA1Lc\nPzx2NpynlfBDYxRBfD5GTOiB6PCFSxDTBIQLK0497RM8S9hwDtXViP8UViOd\nlyN1RsrUWYW5IP4/TO6EavQkBY9Sk+JXs8ShVhHtJ06QHJArj2oxloIA+4Gn\nFWO1ZpItN6JOfZST7iVZTawYTgUK7AoWJicStKfuwnXjuuOLg0Vep66f0pnQ\ngTntVCu32Y9LY2399YuOFD6Jcy/u0a7jSfHEKgjk49GhpX1hQCgTyfDplcgX\nAYvW/senaK0rpIn0VwzvuW+Xi2rMkzywWMt1ttthhqgWzyHaovNClBs+upug\nNbDIERMT8q68naDk2Vs0Yo1FYqJmtHr+28ZV+XPeSq8BiWOAVwiUoE/5CMXv\nFoutcJfy9tZHbkCfTFeHvr2JrUVm2f3XpfOCVVHY2W/gMkpfhvhzmAHSSSKS\nhG5PfnQNm7/P5/4vCQrzxqgY2K5F6T1ALT05GFHiwd0KAr8EvBKj1hswR4AY\nblMHWPmevTMiGTsq2dSz43yRzWq3iHJOw7HKCgG+GaKWfzrmmrqbEAKlARtf\niixm\r\n=awqc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCH3Q1rBxdJSMvfE4lP5+6DgdDSU2QCZi0LjJ1udtj0oYCIQCw6u/usUfsAVcqq/ewFzA8a/+gCsIHh/8xug3qKJV/0Q=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.23_1637925395084_0.31682716020631574"},"_hasShrinkwrap":false},"2.4.2-beta.24":{"name":"ecsite-form-builder","version":"2.4.2-beta.24","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"05fb05148b41a82c1520167077d2cf2cbc10a2f1","_id":"ecsite-form-builder@2.4.2-beta.24","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-RzshpsxNcYzhYU8BE2oXFRBhWBdX5iPTCgL+PzQFkaCE75mfqQnZY5rf6oPooWuS/H62h6DTxW/ngKTAle9hZg==","shasum":"f8eb5228a8cc7b45d761d9500c0115beff1e5417","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.24.tgz","fileCount":89,"unpackedSize":4249495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhoM27CRA9TVsSAnZWagAALQQP/0J3p1TAqoNF0qCtn+0x\nY/JN8ZIj7i0iPulukUyDeogeJDxz9xDQ0ZoJu0lvEazVYe7oPfJDpqIe8agw\neu9LdSc5roeP24dI+P+dvXtCrbl6PS88H0PDJdoEnYAASB3YHs9AvuHoShyr\nZCrUhznH/QAs2nijZ7rdxSmz8lqbQSAKLgMCf6UECH2f4/7212/fnV7sy8jz\nPf/GnA/46vejBYhB7QlbdBpyv+QqLSmsaGjbYVV4U56kv+ujcwPpL5c56pgr\n71Mw/odAPK0fNLqFt1OHajRDh7FAX+vA41tDoBfsM3Nw9Kcc/46HE1vUco6P\nLpvSme+qDZhQGu9Ww/r/n+Uz/NVVLsgn86ULYILVyg1TXFdeb5wTyl9BhVlh\nMkWB16xwByt8hETthcgcgAi/Ve/bExctf+lngbV3BvngfBRzxv6hByxTeEo4\nsw9k+0tWznE1lb+npkxLbrHvBxTPR2JyTsXQdF6ojrDXGhsHs5nExoYutZra\nSnneWZ6+U4mFqHlTKyVX6DKugm66lWiG1UjByAOAXzZrgEJYUDAcR7EB5+E/\nYsq7uGRWt7QRi/Vo+xji/ajyxMNhn2drC2Cd+5WetwT30YejrgEW4STcqopf\nPTKdi93qHL4f1q6hnDGvxQ6vzRB2Vc7APdtgVxWPJF4r1tY8TGdSChGC3uex\nxRp7\r\n=bAYT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGrJ1yaszok8TuHtS9Pc7Q0Sev1DFa4LBYM4nH7UZKXeAiASRvmlbCIqR3R3FqaP8YUNykXUtAD1T6Eb11ogK2e57A=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.24_1637928378885_0.8350980202983824"},"_hasShrinkwrap":false},"2.4.2-beta.25":{"name":"ecsite-form-builder","version":"2.4.2-beta.25","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"c4281b88ea837643de18954be2b2c9e997f7e8ff","_id":"ecsite-form-builder@2.4.2-beta.25","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-yDifaIBKC+gaWiHXlLO9d1BrTm9wTSSv/+wkmzWY37kWfS7ayvpAXZFjX2Qm4m7hoJsmFcHvsrvE7Inbtif0mQ==","shasum":"403aabdb0fa737fd60dd108433a2bdd0531d487a","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.25.tgz","fileCount":89,"unpackedSize":4249467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhoNAfCRA9TVsSAnZWagAAp2IP/iXEU1eAnaY/Lrr177kM\nog0IiyPy6dE8nSANam8XV+lH+ryqRjH2wYiK1S6An0+ghKAMoPtoWS7GH54w\nSzM0267g+3aHtHGS4baGzCA0USi9LXdVznzeaX3K5dMEhuo7gnqqMDcX0kIM\njwQh+n00e30YM2qMlqrnb42Kn8j9OG2wzfZbmeaC1USaPcspWiUxDvf+ydtV\nY386Z0wV+CvizEZzmh1R2sTQmkhq31/CHSRxytVYYcXDGUk1axtJFvLuHV3c\nCTHj0T2DL7ReRTGXZLj3J+wLd1uspHrHcl19UocIIee+2GJ6YaKcWRfzHe8U\nuZ7rxwoL8RQIMNvLNH72FwceNMJ9qL46Ff/QIqN86/dQbs918hy/Dp7rn09O\nLjuLJAajRsKQxy6HkQ7BAvOiwd8AZk5LmBu5255YkQqiWdYBCvjiE8T+Xh6l\nunpfLcA0zGRV5OmrnQ86r2lyj/C7lik4n9Zl/nFxsCUnm6Jm/TL8FWtJ1Mqk\nsxwm7PTtdJRcOnFbGJj4oEJjIQiapQXrPGf30YNxgW4xMXWaohPSAvRnrQg0\nM8GPzhq222/c8C8UMq2awBylGEjgDQ12wiugU8ca0r1x8LEvqqw9F7gdkVN2\nnXatNlY+1ZCuIqkyLHji8CAXwUXeNv+/dSlBktN4IrNTYrE8PyeWheyr4RnL\nUuZo\r\n=WdVR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG4XTiV9RcowfSR5Uy0dMfgsB1bg/OfLN5Yw3Pw7/U1BAiEAj38p+uQXmnqXAgNNWmFdc0H8H8cyhxWf6aRzqDmVxpc="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.25_1637928991133_0.7895036440583745"},"_hasShrinkwrap":false},"2.4.2-beta.26":{"name":"ecsite-form-builder","version":"2.4.2-beta.26","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"f1ca408b9b4abe924ed045b8974231c9e4cdedb3","_id":"ecsite-form-builder@2.4.2-beta.26","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Le11MorukgpG+MgOnJsiB00mSsTiPKNHiG8ZCP/0+pd+hq/hVShmyqPVKS0B9xN6dwEAz5AXPrF7ztuX8DYxFw==","shasum":"5c4c11693cebb60b413f092c5e4db15856b6f275","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.26.tgz","fileCount":89,"unpackedSize":4275792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpn5DCRA9TVsSAnZWagAAwUwP/jj+J7l03/n0QJ41/t4L\n3SssgG+jLGgngq0Jw87/di3gVD5vgKZepbQ1jhRIZQ8RaWoz0KvFUgDm/ony\nezbKXAaD4z2ATNK6qDgvETeKNu5wPyEtw8ImdfaCSQsmiMYg+PnEH6OOogr/\nzg3g1/86Aen8X/MDkogDunuvbtpjEtMF5s893yxPVzA44Gf4ibU2qjKu+NS1\n6+a6refvbCAsPZwDrdo0xHXk/PwcWkJBDEKtNvPE2P+ZC8OxqO+lQXw4b8cZ\nWshBF+WWlLB3L1AVz9mZSBfo7XA7kBFX0Kw84cd0OWU6QQ5WToqNZOQK5bpm\nGMs/CMfhY5zmVniPcQ5oJ1fi41t7HvEUa1v1yA1xr4vf+3eDvEimvTdGtpL6\nVsCbYZ6OtjOZP8vVvwEsN31veWbyaWpg1LJFqq98Xb+3KxpZ18sswxj9ji79\n5iYwZmV9F5Xbb/M1phOdzjzkeEmsRcNPMNOsjCJPGYAhYR53jrQg4juIz0gf\nSswbDijnnVIeMQcYtSglQpepPhtLc+3Jpi7mGRi+9C8Dat9RvF+E7KBbLPvO\nm3bPuQ/rmbFi5Us7UUCkOtijbtGGWnzgLyP4CFMGFkA+77UJqKFedj0b0IPH\nBss0pKMcYscgZytSLrkepsdu6ZYcN9mbWuE/33lJM2DPOkA5f/xujtCyzYax\nyCwW\r\n=ApkU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmzUoSv9+Pp0PesisMFsM9TGcqTvC8SMjMxmqUjoY7YgIhAPLd/6/AO/2DFuUaIIyFMqsMFZ0XVG4X7dlwgifSkfba"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.26_1638301251006_0.5816404864806926"},"_hasShrinkwrap":false},"2.4.2-beta.27":{"name":"ecsite-form-builder","version":"2.4.2-beta.27","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"0e3b6a2a302bb7b347e5532ea0f065393bd2556b","_id":"ecsite-form-builder@2.4.2-beta.27","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-CUtI+pCOv5iV1cYYMhd3SeWjYzZNl6snVMYymdXWGHkXpLQZyr2yp3Ab6RtVRCbG6GQWF7Lzm8i712q2W4MiNQ==","shasum":"22ba06e944f267322505d3aaa4a5b18dce1b008b","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.27.tgz","fileCount":89,"unpackedSize":4277116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqIE2CRA9TVsSAnZWagAAH/8P/iwh7c3RGrym/so9tUkA\nzX2HR+QsCfpnoJ2RHYygkazyFeUCbrdZaJxqyFs7m/0fg3ouK2dlTkMc6fAK\nisf9quS2f3eVfbFho5OtP3mrd9NPU8FOn0CvGVUEJzNygRH8yp03w1vZyGs+\nUFou6qfkaFDeeDT7TrU2sTw4oVZYThqXHUBk0RkUccMc0NXBZWUllAoCf1Z9\n0d7H46pGJVbZ0oGB8unkJhA0zXw0hoWIJ8oldOXQTdyIUry2QETATCpBpJxh\nVud97LvWK3Vi0SV5MgUPJzdhi2TbpkOD9pgrdeyMEMmjGmUvR7T/90aeCZUC\nIjaavdlqq7yeKpdKXmYS4Xv2YJiEWc8YSoS3Ig93taJyZqSE6NZ8QpYWiSk9\nWnXAHwKVBnmR95v276OovmBI2IctVmEvIQ+eKQlrD2hczuQXESogy+hSSFrw\nimXBzYS+Zs87+7DyVH4k7Vs3XZfbYP4ia0WxapYjWs8isb75WXCIXxjOY7nr\nX0nIDHgdZoKNZGSDFFtqJNBIHgmuKlmvCwjXLSgTBiJoCPSIVZnMtujhPBca\ns7lIb/q8woVb6S0IvDQxWkExkyclfjyOFmmYxWSsMuBBQMlZFtO3MdrTHcb/\nXQ9OuH7NG+nQJkucE2GPC0gKFcNpsDN+nlOp+OkR9slTqoP+2Z+Op5GnErKI\ngmpH\r\n=C/Ef\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWL7PKz90Q2XlftcFG+It4ou7gnQS7sznfsrwTd0KklwIhANz9t1J0FHxzW8z5VOh5fcHBQzs2ew2O6AmhVp5YvVU1"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.27_1638433078331_0.32953023990034236"},"_hasShrinkwrap":false},"2.4.2-beta.28":{"name":"ecsite-form-builder","version":"2.4.2-beta.28","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"c26722122a7029cd9ed6d2df57f1c00f8ad416bf","_id":"ecsite-form-builder@2.4.2-beta.28","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-y1ZdW3oNdnNrxrpuXNB0fgIEgAlE2C/3+7DpCjIrLr47MnnRtbsXQ8GKf4FHH84K6VK0smWBQcWEMBUEvvV6IQ==","shasum":"89901a85bfb89624f2b95d2fbc4483590333bdd6","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.28.tgz","fileCount":89,"unpackedSize":4277350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqgZJCRA9TVsSAnZWagAAl5kP+gOel6mxgZ0mqlG1R4q2\nsIYC9ygRPQv0DFaNTiAcLarpXsXm0cluUbTWxXA3w4AD7h2KVBf/hVMU3JDW\n9r1j6SsZrkvKBJU+Cu+14rMqcqWe8xS3u86p8fAgTeLDr1sXr946aopaCGp3\nDh28EZW58dTsYOjkRvhsuv0/ieEpXWnQRbE2oYKwfiqEX61GRfT65o5kR8rb\nFSpstJa+UrfeRXHbR+pQGbGYBo0btaJwXe+sk+XAoiuzsiWBUSKOqXf+vRfv\ntqB3RjJwdLuhm5tsoHC8lCuf23ae0SEQiQEqqCb4ZTvxxkThinQlTVtKR0aO\nySbdSPPy5AbK2vYP1cxMu6GivugZj2pG/ySVJkN7hNzV8f9lPYD+izgGLC2V\nb0Iinx6PBKx2kf8Hdtp7qliyM4UyQvhmyXeVZqDbARFdgBwVS0LpADICkiwM\n1Gd6zP6Ka1unvjoPDTbMXWkMRapq7yc0in/XttJqYsC2UnEITJrl7S1sWgx8\nAxiQmGBpTTcf3t835FHgTSijjhCqRWL6ePPkVqj4p8MlXnbU3tAfzOVRQawd\noRFxXqxmVmbJptX4Zy+5R3h4k6Q4bLxkubcn3TvN0mI3VuqrLoNnJy/ELhC/\n1i5VALvX/Ak9wM+s71oMbEBGFe0OJ2+EP/pX/gLL/OWEFJHqpnslVf8zKuQ/\nkIF3\r\n=oI4r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCzSmMcu82rc+rQD43NsCaBzCrbLx+nwSHFz3QWKXAKAIgY4yL192Xqty96LsCqI7mPwkpm8fKlO13BXFSUOGYo2M="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.28_1638532681324_0.42602150153957474"},"_hasShrinkwrap":false},"2.4.2-beta.29":{"name":"ecsite-form-builder","version":"2.4.2-beta.29","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"bc03f10c6ea1a65e5c097f5db9c5d3aa85f69cb8","_id":"ecsite-form-builder@2.4.2-beta.29","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-dJRcZ6M3tXlcdKbfVNk+zd4wDAUqW5/XnnTXlsMFG7qUh+nHRaYfnJxao6OEn8oqMT8e7ihQrAS9wrZv4TZUVg==","shasum":"e09da4a1d76e6802461381f57fae3c4c0bef1ca2","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.29.tgz","fileCount":89,"unpackedSize":4279233,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhrVGICRA9TVsSAnZWagAAmJwP/inGTry9mU/QunDKwAK1\nkV3m3xzY/6l0O1l8CKWSxUdkPVdyVMPRIA5Ic02uoPA/flLLbd1Se8JpxplA\n3lFVOTZIo72GZwYzQr9lyoD/y0pCKmPlldYY2uuAFYCWp4F1UFbybK8IFCIz\nVvZ29JBJGPfYZBqSsSHGeZKq4RuSYxwOQ0Lj0bNiD4/lf/0wWCVjnOvmgsp6\n+uU8E24W8NWm1XLmYbQJ/iCF2StzUfLN1MYoSvUFX73B421zUg7Ha0aKaKIs\nZtg705ppx/pgB7aiQrjEsEh4cJnCXFwAZdik0P6hQ4d69pwZ0WCGDNDB0uyo\nxaF36PcwL8t9XkgjDdpxb1UURkYuuHMJ1DP5CXBDJXF0t4gacxBVkJm04gYf\nuvk0kuAFeHYgEg9rMcJMmABy0JCAXRHgjuJTVi1I9eSqUAfZOKc8BZsAfu/K\nEj0IB8uClXsKidHrJMuyt+wXau0wO5QMsfakdMX9GBd4UQfDB1sbiuiP3UbA\nKMye6VxUiP03hYOnRy+8eFsZEULkVbgpaIeauB0CRq6ZVl4HwlRyHqv6M+yX\nzqS4kJQwHPoT4em6TbkaebIruwRUkL06Whtg42Y3y8Wuwq7O02Hgrpr9wSGG\nA4zh0A8THRtKWswFt6ZQGbdr5TE1GJGZeXiG269XCw5xRoiJ1xkLvFR1T6Rk\nNuiV\r\n=3S/s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD01KUybTASoIfnT1oe5lfYnA7+HZOmX9VauDwn+Ju63wIgVvv3k6BMngQoYHb/PrtNqnjdV3wbsOBlH7jFoe+CKos="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.29_1638748551901_0.31891569389216023"},"_hasShrinkwrap":false},"2.4.2-beta.30":{"name":"ecsite-form-builder","version":"2.4.2-beta.30","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"e6d17124682c518a97bacd32b704b2dc31bb40bb","_id":"ecsite-form-builder@2.4.2-beta.30","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-8gG22WouJGVLs9uqmTGvu4OvOrH/cgymRIvJbFNOaFCWsWCmdVosMNqrUZMz889gQ5hiZW12vA6FToRreYbjNQ==","shasum":"acdc05965d6526c703fd7c1b5b8ef2ce5aa5830b","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.30.tgz","fileCount":89,"unpackedSize":4279355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhrxv1CRA9TVsSAnZWagAAtL4QAIm1wvFO6yJMChYi2lHc\nfzfIcFutWTqzLnmxUDnXnlQGWsx5b4MkQ+5g2EYLLfrtzprs2lc+T7VYo0zc\nqVHdzNSAmEd6HKILCSYOUKch3KX11ULHfgkMKvvVnrsnUm1HCJYBKZ/iM57b\nWOEdlAGFVb6p4lQJedleOQPQ32BAmBhdZt9NH7YpzYdponzxgC/WQIOamO4T\n3t5uKtKaXAbXL47IKwe785maY6dpJ0D8xCcSJnPNdnIGZZDj3BQK2FNLolHY\nofJbULZyNkbnDPnomuHILpypQqXu3bklq+r9BH3raJzCqURurJ8vS1OzVV/W\nblkeQ20EE6uanZpZbtZ39UQkUzlnZUL2AfZAPSFHEaNnSlv7sGyoMEg3hsS0\nkJ7BBJHEFZvMmiDptf4Ow4E7MWKMZpK51fS5UgsaYCfGSwZDbT0Jh/IasQcR\ncvDz7Spvd4jUexxCqjZKdRZFyBUplCbn/3nrSMlYChTBT9zYpk+QBrkNhIb6\nbYedjiWQdcM9XlQVpOo+ysIBHq+qqSPQpzvLnVDjuTk7LyHiXujW1lq9WuBo\nJLODgQ9+evRfaQGx53PYz11K38/MhQOGjoCrics9GQinMyKZi8kFQLtP4VSw\ncWEmy8NPba/OQnzfTbe2YV6CPfjkvQFZSmyZTOO2ol+pTo7LoiHnUP0V0KS+\nbdCP\r\n=Nv6+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEaf7PazqoJirqzfkQPITYlperElM0uHkV/NU1PL5Cy8AiAwM0ZhBXsTyLHym8+c3OEpii0PxKIH8Oxtbfj70+AqGA=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.30_1638865909148_0.3497923012385036"},"_hasShrinkwrap":false},"2.4.2-beta.31":{"name":"ecsite-form-builder","version":"2.4.2-beta.31","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"a180cdd3f7d97d380fdc78c8eaea690d5c7f1ee7","_id":"ecsite-form-builder@2.4.2-beta.31","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-G64epK+eMNvCd8zQagsBl1f4zqLzzdrxEdxodl/rS4/Osas46pLB5yNAUM5I8pKgWTh0G2OfAr+Zmt8+jsxe2Q==","shasum":"337c08c0d10245ec5aca5896da7677abe053268a","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.31.tgz","fileCount":89,"unpackedSize":4279413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhr0wkCRA9TVsSAnZWagAAg4UP/3d+YNoxJQJipnnZqMyA\nv95hc+4/isDyKwd6BFnrsm5Wq6ZaXsbAm/gVUsYGV3Bb84UUYTCmsyH6fQqY\no0EP3Ak9f/3+yrg59Jy9P8ftoqX+hiqd+nTmoImYLCu0XJ0hEK9XB1h4buT+\nIlzJ1DXaOxdsPwFc5L4kzLLNQnLiUAJEtxAy+vIC+or+8wEVcbtB6q/10UUA\nVIeJwc39Dg5aenz/l6io+8tSNaS0j2+84LWvnsTPWvucC9zHh6nt1TwT1mQB\nGw4dOApFFxlWk1DhMYCJE1XrIfg18HuCEhk+Ey9fGlt5RP3GKB0gtMLHdOuY\nuG0jaTzbNOpxv/tO0CPpwqTzbQjLC5+bCfL4vYZmU3Bm8fDBWsSbvJqhfzzC\nAzVrEyIqmHQTCln48n8Htnj1hSIrnX7svUcQ606pzNEC2IU3Lm+S7kj75saI\nglY7wGnIHWlj23EwxFpaQ+i9Ge/DlYAuyduAFTpq9PmvE8tUGX4tk44tAfau\nCrjFhAU+XZyEMVWgZ0bAeEsUwUv5YcXqP04dRataVTBWTjN9UgqGfkYLdz0z\n738HBNcu+nAt1OT7WDIZ02JFgofqqHHVK+gABpcbaaZ+5lccmdwOE4l/oJbU\nnr3LUMJDnNjxEvPZ3GtF38/DLe0x6LC9aJxcglcbrap7SxpURumEmUS8u8uL\nPP8G\r\n=ViB2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGyE1bn7KglxoIIcu1LToCyhK3fUPdVe/DqxWgJZX01mAiAkAgIyUr2ZZQiVk3+UoDyQ1rlry3kPN+joSQ08ns8yoQ=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.31_1638878244487_0.53111000705064"},"_hasShrinkwrap":false},"2.4.2-beta.32":{"name":"ecsite-form-builder","version":"2.4.2-beta.32","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"4254be43bc6e11ac379f101a3f2c4eff6b305926","_id":"ecsite-form-builder@2.4.2-beta.32","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-khQk3R/c3BFqu3zp4159w1KAuGzE80INVyUAZCGKW9TRRYLlE+a2O37Ya6BuXzCeNzs+ribUbcmVnsUKMw/nnA==","shasum":"7ca8991a54c9aee0383239c8266c93c14f0e66cb","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.32.tgz","fileCount":89,"unpackedSize":4279413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhr1JxCRA9TVsSAnZWagAAEboP/0zgTLz/PSCP/Tg+JGDi\n2IndG9RUHXC7IYZ8R9nuKK1bewJ0BQZNQbIRcM9N8JoCbwKOkI71Inqq0Hzi\nEKwN/9mNmTTN34W8bCwJqBglaj+1ln7Jh/oJQBNe7QHOSI7KIZJ27RpvBnr3\nizKOKJ3xxPjp0FSC+fMkTxhhes8V5Dn+jGPzMOZ3WApjXxdn//JrUq4YUMVb\nWR2Wl5jQtZ79GEvptWUsW/ypVArHcuFjhuKC8Q8kSaGWAzE87Fbt0BfJd1pL\nHLJEgWt8Q4CalcfsVC+0RQTS+L9iNdH4dLIzwkG1m5ue2O9/U2jvu+fmo0/X\n/dkVLmbnsClOyZBzKgw+hL9B5Mu2Epmf6LhnnfF32zTUStG4jiqYKywyAiu3\nfswRk1hTzjD1xFuO0f7PeqgaZHzxSLEr+bmIJf6XZDZIA3sLIrrd6/2+FbfP\ntHgS6eM4BD267ZKvFcSmvf/vUQpu3AYUQyYTY1cwNZVuMgdGlZlyFsQ+1MHh\nkOWmGe46MYXlWdl/42CtR4oVWB5P/PiHZs6E8TuQXnB9O40q06nclwdqxC3Y\noC4O329CezuZm7EJk7f+SXTxL2efLtVJkVu8JLEd9NgYPzF51AFnLlreUKnt\n0zQ7A6FubooKsavXDCqScBtzixU7LE3h3KKk/yS/0l93Pk5oIiLEqxOq6Fph\nO0ju\r\n=QMgQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFcypdQCiA2lZLfWgp4spT7Tk6bH2517Frv7yEjK8fpmAiEAyvRZZtAcVUNjtIYtZXGKMNqQThHFNBINx1BWBrAtqNs="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.32_1638879857257_0.11297124527522051"},"_hasShrinkwrap":false},"2.4.2-beta.33":{"name":"ecsite-form-builder","version":"2.4.2-beta.33","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"af11d074729cdc53d01bebe03b82c255aa97aec3","_id":"ecsite-form-builder@2.4.2-beta.33","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-BksV3lJfpLnlj9Q1z9yNhbi4pBU3YqdH2np6ZkgSnbjqVWJq+i8YEj0teQiH/+WPEIgVJBwW1slJWhobL+0sxQ==","shasum":"73447a025da489f6191f88abd06cc98329bca673","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.33.tgz","fileCount":89,"unpackedSize":4280839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhr166CRA9TVsSAnZWagAAd+4QAKRWWw8Vbg6t5QR5/+Wd\nQlf1Q7hLqBMsMdRwcRecJtW+JmknUiFEXJkEA5P1IYRKI4jLzH0+qhyYTeSf\nWvWklFHmO9bDhacP9eLU16vZd42vmnPxXY/86hPUxAh3PWQsjAPbLJbSMON/\nSxnWEK5iou+10bcZjiVmUSHBkB6I7bDOshtqY2+HJzQzQ06QzvM55eiT+vH8\naczE7SI5b21uncWLl4oZNAT/yMEO29qmaqjxAGIBAYbzD8gLnTFZQIV+BLrW\nJyW1NDANAjo1+PwMkMP5PM/5yhHPdMR/4L6DuocuXDBFeBR4DfShferZ3JZ5\nMI+dM5ilRFjGQ78LsCaoEQIs5jymOa8UvWvCPQ+PBapBOYns4ZTCDvY/ux2A\nMBQpxFEeZwCIK8TbjWtZsVlt2duuQE7DiUWWd0U5S620kIaoitPn2LCHuyEe\nc1L6ao+DzRc4XgTZI5BK8smpN4R1JiOVBIBJz68x8R3ZUSB/iSvBbkKiSixL\nzrmRme/UoiTDRoABdSW0gTcmFBcA5lxxG1HKOTBaGz2pP/cR39TL9sRE4ATr\nGOnIF1S/S0VImmCYMQvR3gb9gMH0hxjsygcPLyQoHtiLU2qbrlpcBlZxLqV1\nd7Y8N2fSYvF4SXyvkfwRp9eC8Q5DS9O9t1gVtFA0phTfkq7oXHGAxnXXAPox\ncYRw\r\n=u8DX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+XFXJKrpM7f0pP//eZ2swkVuO7n4c5Lb5xh7OmXgmtAIgBleGw65O9BrKfjkJwUe6YnI1IKh93LIiGoiTC+TxyxE="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.33_1638883002061_0.08919353564920973"},"_hasShrinkwrap":false},"2.4.2-beta.34":{"name":"ecsite-form-builder","version":"2.4.2-beta.34","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"af11d074729cdc53d01bebe03b82c255aa97aec3","_id":"ecsite-form-builder@2.4.2-beta.34","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-5NqHxXIC44Riq76MSmWX51eMp35XqBZuavrgYYSRtvwWPDDqfk5rq2BcHUYJJKAHTqklnBUfirjBFodHYhIdmg==","shasum":"29eaf551c611e31716d43c2302c3c634f255da5a","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.34.tgz","fileCount":89,"unpackedSize":4281121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhr2FgCRA9TVsSAnZWagAAFCAP/i3UrrHiyeXO80iw5Kmr\nen4B6JhLjL80dFZzdHf8BVvxaoroCURl5rv2qKDRcRIISUfhCIPiwKkyreq4\ndOjJwatYRgbI1tO7FHS2NsLxgP55y+3MbsbsehLFt9ypT0GdxshO0N1c0KRb\nS62tXD9Mn48xOa/Hy76kJIKYNvt1TWM6FbNeA+zkw7gWtpiGDZAU9aTvDyUK\n8gz9PPNJhEtY2ZqbxjlnBETtwlIVyokB8xdQ8pPbj4s4b5Zoc/mRk/mcknwj\nzDTHbHajoAYoyuIJFTebifU3j2YXxcDQfOxlKSAixUW3V1FXtMIE1ZnwUW0p\nPEvKTzBf9j9aOrSeRMr1ogcgaH/Z9t/a5FU3+Y42TMPXf6TCos4qYUcwXYmz\nEprDrivXjUW8uHMKm6tEvTQufDj9Im1rZWpEU6hbYPlvKFam20F7LEW4etXk\nfZ6/rtbaKEXh3qixxMC/iQ2cPW3wmXNoGmMOancACTI0W3MyjqyVrzORVn0n\nmmQr8egO4QNa/qJQXVWeOBHss+nFZb/CW+Dq03RkRkzcEBKg30aLiL3NkDwi\nVMy7awagaCFjPD9PzeN8oGAteuMLSvq6z/DZ8Z+hc6BltC4kWvNbWAI8IvEF\njx9ZYzuTVZgHbl03QBOVBrnkCAiIHDq65tucFBDzNqZJYx/vVhi4X/+UM2jR\npROH\r\n=Qdxo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEFBU4uswwGWe2YGchO/eGSmalvFZ0FfF36Exvtv6FPaAiEA0glvQUmOBJg4vE3upJ7ZEMP9IIEKRnLnHPvLUrUfAm4="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.34_1638883680125_0.12173898751915946"},"_hasShrinkwrap":false},"2.4.2-beta.35":{"name":"ecsite-form-builder","version":"2.4.2-beta.35","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"c973b6399b01167a7a695943c090c614deb8ded9","_id":"ecsite-form-builder@2.4.2-beta.35","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-JV1jUYrxoih+ZOSzwT2Gq8mbuMDjj3yHm1OVMoFhvF823zC0XbZh4NMx8ytDV1svnRb1F07qnidqfWypPmbjWQ==","shasum":"9a279a9254caf689cccc9f420c3cf708a7bd8524","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.35.tgz","fileCount":89,"unpackedSize":4281185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsLPOCRA9TVsSAnZWagAAob0P/25vfZEHBisDiDf8VjYe\n3raeUxAlxI6o08kZqPJwtexY6VBiKcIE+Z09o8UaJoWKcXHaVGzrhI1ZCKFI\nqzXJlE8IIs7JIfswlBiMVNI9PsDFHLMmFX1vGIT24tvs6pnQimgBk13BURFI\nLgQAekuhDlhc0j15sG24oqZFIFMfjxNyl3HvDiceH8Mtl0bUm0uaT2C3jXun\nD0H239EiCCmrLkKiTxlSGgshYUPIM5V+a7rjs0nQHvJNzGRPPhqPeyg8GLnw\nha847BOv/gPqPuCSJurIEWzNLb+zM87j8XSWTdH1N696scGuCkuGPyJ7vuL9\nxgBI7nIlI3mrfWmUya+8o8vplYbUnlfPQIkwWcncFl6lUhfIc7sDoHXOqLG9\nZgK8t82qW7f6/VZYeBYubfdQaRo54ZkgIUb+gPXz6dPkbDpyQtywY0vYx2CO\nC8elw/NtMwZEW/2/ffkMXt3dWakmNmRlNb+dA2ehZf5pxPTKBAa06uzKxB73\n5s3KiKMOHW1M6tpcQ9sqKZPim1Pq5wsCdMhtF/2sxRDcbnnKbSZpsP0nlrow\nrij3E+Hc80cxzb76lfm4SfJJw3UVW9h8MkjqieGQqXLqKfRiAMjqHt57G5/+\n1BBsLj08Anxucm4v2sEEGoJveS8GJ2z2AMnee180nM63JwOEP3DrUeCX32n4\n9+t5\r\n=OIcM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBrqk+0faBZMhWmRGwL18v6tXOvt1VzcEKtjW1S0HxmAAiAn+t0ZssTexEgGijJoin2WzhcBMVYJeUkd49hSVrWj8Q=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.35_1638970318573_0.38457095990957946"},"_hasShrinkwrap":false},"2.4.2-beta.36":{"name":"ecsite-form-builder","version":"2.4.2-beta.36","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"bd9af043771efbdbb06100918fd2ffe859069d40","_id":"ecsite-form-builder@2.4.2-beta.36","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-DW77ZiGUVDEFCcs6XRgDkSfuK8rN6N958WieNWt+hGYARE6cynSv1A6P/T6cgOQNgmXM6TX1/4RfNa2zEsoPUA==","shasum":"f1b473cf9baab43b1ac32e6c7ee15b170cab41db","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.36.tgz","fileCount":89,"unpackedSize":4281985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsyPMCRA9TVsSAnZWagAAVvMP/3U582eAqreb3uSc0pzG\nwM+Z/KrA8+gU7TaG370AnlGfcipX7fLKveqqs1arM/cHlEIIsiiDQKtbD+/Q\n9A55sekBYcsWe2/X7r96xoF8tjyukIowUyyhRddQJ50Tor1NVGQgXgxbbltZ\nLbNhjbPCiuTS18n0mOmMpq5ZvN9d9N4HSU2mWU4UIvQiwzfmzDs/WvHwwy4H\nks+JDJqlWTxYEbpIaC3RSSIsQqyDN4/X4secA++sViqIjpOTbqQP84ychMvQ\ntSHlOG3BGMvMOra1SIgYZiJWH3bTsCYqX60ys/lRFUu0dJnSYq3XdXJmaiES\n6wDbdxHuhZq/nK/vcEJW16RP2O8vYYxYKAqOAVNPmwIWYBTJTEzNXc7yaG70\nTM5VZ8MpWEXNpbcHnFQVzaHvI3Csughv8MndXHJHGPPkiwDEeQZTjvVRzz9n\nLr/3Vm4SWdrgJMNi2R327h6kM536hwLZE1pykc29wUBfr6Qb6Ppo7GPzxINO\nkJuM7+Jw7s6HD2dygtKqk4kh5k5J8lwqhwF0+KY6VjfNKUSH6aWhKs/o5Hyw\nF8y96btsgg3ak35Poi06DCkcHNQnHD8n+EkjbXyLfRUt7tKMrHOMqOZtSt/D\npvS/kPuXdI0RRnrCP6PZSdyb7HmSSJy6uZwl/m1sH2G0aO6W9KC5K/+jQCD6\nfwqO\r\n=NxSc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHnPZSUI1A+cQO4CudWYG2xJ63Lm/x7oUPgEw9OdxHTqAiEAoiET5YBc5LjD+AOpojrYRcgtWMG0b3cZH3569EFHezs="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.36_1639130060622_0.2976717216812701"},"_hasShrinkwrap":false},"2.4.2-beta.37":{"name":"ecsite-form-builder","version":"2.4.2-beta.37","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"4edee69bff0d62ddfbe24cb212a0b0bfc2505e02","_id":"ecsite-form-builder@2.4.2-beta.37","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-IQGJacBbAW8k58jlQRSnERmHaBjEUqdvXOVItesSQnQvY1uEsDIrpkTwAgapdlxL+8hKOzaN7SBxDMcjqSI/Xw==","shasum":"bf29fc450741ec922bbf76217d9b8488d6283c8b","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.37.tgz","fileCount":89,"unpackedSize":4282753,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhtsnzCRA9TVsSAnZWagAAl58QAICbNKaUbr0yGENNIwZP\nIwqtMwenqAqVCMnOJIyQ0D9r6HlLdOpSySw9YxFqBS1cTDdozLlwaXswiMUZ\nLfMdZbUnkKtbq68d8zyS4LIfVLAJDCz6sTM+xx7HvKKCJ4b4vxSyuThUv0sX\n8vcrB53iBLW378jWDGIsP7KfXNU5IU954adAzEdjTIe/pvYPC05gZR5qpRaj\n72Oa/ys1UzDaKwKFM3yYs8OBNSJRKYuZV+AismHjXF9/XbtAWhW1xf0fFAoG\nuJ/ZXmb09UHSchXfKB/uoBbCQsGC8R0sIJGc9kcZtODBjWXK+7qQvqFFTeVD\nYMmHQaCiVsjtZBv1SvqEUDtjT2kIDtyrxACrjaiseeuxlOtdV6qyrxEige52\n0uOB/is8dr34CAx2niY3/kP1UyvDwJPgughWirJ//yl4k7AFHbbGZgFSur8F\nL50F6RdOmZD+aC8tbqr8zsFbfYrnBONj3JDEtn24bocP3XCXTr3oZNNdyPoi\nvDGjUt3nlTZPJXKagcKOUVCdpIyRdctvSzEs86GcUJpm5s9TC9liPj/aXt/Q\nshXczucya8oBED86oiXX7V8SoSg8kVUL4t2yjBLPU0/EjvvrjDb/dZhuTrl9\nZdszX2M+Fm7X9oBBio9Ry4eXSQYxS5xR8pR9KAcLpa7NoKnIk/SQwGVUbTMS\np7uw\r\n=g9Up\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5JbDdlidHc3rtpHZFY4IuebSNc6C2Nt/UtHskzU/pLgIhALt9SB6wKXGoXV7RxPUO+f87iJ8Pr3Re5ZguiY9/v3CG"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.37_1639369203633_0.040564850185889734"},"_hasShrinkwrap":false},"2.4.2-beta.38":{"name":"ecsite-form-builder","version":"2.4.2-beta.38","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"00e01a4648cd3abfe25de9d6c3b96f010f4a9bec","_id":"ecsite-form-builder@2.4.2-beta.38","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-MnRcHMpg3Or7/7Bu2iwTD8vz5NOVcyA+of8EzkWBjW111tVJm/Zcq4mmXMLHcxrsdNHwMRYIfo9XeZ+jwOzfUw==","shasum":"d78c49b50242036ff91420c5432b12f8d535a740","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.2-beta.38.tgz","fileCount":89,"unpackedSize":4282934,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhts+cCRA9TVsSAnZWagAABxQP/3pnYltsQW8Wm8x9rAl0\n5/l9LxgYbIYrrXEMnXI3N45qmtGQn03Tzm3bgNy+0b7/lsbXa/27B9I30nNv\nFvZVOAAG2VJl3Lix3u+uP0BcG0bZTdGVlwTFxbiR/3wz9zqGCxlLaOOjTKQI\nSNz5KyS53GU0bG1d8ylrJh9QoDARKjRJo1WUeSaIUn1elNOg6y0qfeHhQvP+\nTtLi4KM1bFXO4XrDaWkUQN77EG432e5FigrPU3fXN625KTzvnGXKQPfV5NEO\nuSIXa5t6dIx123fl6WJFlNh1PZ5b6Xr54f6MDFgFu7nWEUB8vM4CtyjCgOms\n90nQ0+82Q/SdgZprGWb/JCUN1AkkG8bwaIPY+VCCbkKIqCBleIlzWxOEQSdA\nbUrCkzQ/OXe+27s4ccRq2OENgbn3wqhUBBRpinEF3iCuy85MzJzVXwopuFe8\n/qWo+HLJnoOQsvtF4SNc/Oq2+07yCW8ibdi4A4dMzL9mTNTU/f2orHPUvjjd\nSoXDUS5xCYJcXF1ANUhlh74p+ptOEXAczD0OJSwk2P4xaxklL05t/At0ns8z\n2Lc5qIbvw2AZh+6NZb7ms74aDai7RERm05kcEswT71jvZmRz7QG1aYIRXih4\nKOsFRDWlXtF0wsci+FbEMcTCJO66lzTu7YRAmgD1/nLiNcC+oGIjE3HaYJN4\nW6gk\r\n=STOd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwg2b9hmNlmvNxnK1qPnRyMG+/ULOj1p5dxWOMqIW6BgIhAIxz9j5L7khbW2ffavKkaba+sRfMz77C9zx2Zc2oyb5Q"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.2-beta.38_1639370652105_0.3343804496311851"},"_hasShrinkwrap":false},"2.4.3-beta.1":{"name":"ecsite-form-builder","version":"2.4.3-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"b723adda4488ded091b92a98cdb0d6bce0b97a35","_id":"ecsite-form-builder@2.4.3-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-jIxvCPtmFoxtzDbtX/7ZXIwuwE+Asub7kt5Q74rb6bNZOvU4Tcci2PFZ8+sH2B9DzyoE8aRYiukAxbsrFbOucA==","shasum":"edc5f96b2f2f7c0e4634aaf15ec4327a639ea60e","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.1.tgz","fileCount":89,"unpackedSize":4285721,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuJQ3CRA9TVsSAnZWagAAHT4P/08y4gKMgF1hIdRmS5Lx\n4UBZKdx8JmT4ihGcWw6rmI6MDQHUhZD5rRDnvSt/a6kwLMq43orYHZ8QqHBM\nwFXeQOLQvM25uGr52C+ozzZRrpLrNHY48kVj1tgCFEz8mEIXmrAZ7S/lwWT8\nYiuYkSAcyhMETLglEEFCNlbAZsoegET8+f/1ZI4ZLllYkB50zaTOAmZs1g3c\nkIeoA97/X0vtUyvVR+aKxNDiy6FuzDVy63sZMR0/Vb+zs3++lR8d1uuiATjR\nEgVixA0yAaXD4gF1usvMPJoi8o3ZJ5CSEWD89gl261KKmSpojur3BdW8+Xum\nmIgYHONh3mpFR8dsP48G2FIYWZTYsvqlZG4qtCDSNFtXCx8Rn1zU7B45lG1V\nSLN1q/q6T2GZcym3bxXxMfRcd8BT6NcxzW0Z7hgZsHkyAx4Ff5u+2QLufCFg\nJ1nJrMnSX+sq0bsRxAyfxhD2blxLgj9/mGcQdyp8nsPRmDege3runLSRCio0\nPJMD8Gpp13D4lLSjaBU1EtDGze2NOSbgCBemgbWLzRuZOZPOjKmeE1uZObWO\n1AfW8M/iujFu2pH8/H2OG/GeTDFL4md7Vp9C0wPpgxM7nuIBa52/yHIBlFo3\nGSFGSqwRtZuIMfo6pSsMLRt0RtKIW7eVoTSqhfaD/qDkBlQMVOHgRYWoQ06d\ncdMQ\r\n=kK6Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICH2bGAqaZ+4UY6ih6/AHP8bnucFosg6LmYpBT8ZXX3JAiEAmrrD0I2GhHd6vUWw6pkjIRxLkQ1l8nyZ0Ga9tOgbFrs="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.1_1639486518990_0.47221559138979097"},"_hasShrinkwrap":false},"2.4.3-beta.2":{"name":"ecsite-form-builder","version":"2.4.3-beta.2","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"b723adda4488ded091b92a98cdb0d6bce0b97a35","_id":"ecsite-form-builder@2.4.3-beta.2","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-po22Qb0URpDHAeks7JGrrjdb5d/eNBTO2HoBBabpeC5Nq36nIqV9UjPF4VbryEJOC8aFCEsNqs6KQKi6eb7yww==","shasum":"10913f46a85ff2f2c929c2dadc413970a458b03d","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.2.tgz","fileCount":89,"unpackedSize":4285721,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuKTQCRA9TVsSAnZWagAA1KoP/A6eEDQLHF7xZWYR6+On\nzae4MAfgLXcb0qrlFlNxeQNIUAy8KkzpFd6pkwiwuIN1c9gjd6qMfTaFTRWx\nPoMjHwBOie11GqWgweeMKODjbHxvaXpT0KSoL4Y3Ux7+cCHhETLa/XF1otBA\nFhJkhJiDdXB0LJDc6jh5xkh8TTAg8u1vsWL2yzzIFMnkYy50xO08fuEZ1QPS\ngsYznnyEPMRrIptalSxdjUEGHbiNKERpkVjS0Wpw27H2yZM7jCRwe3IQCMOu\ncvDs2smpvBV8FOAQJ7OozU6xnX8VBd9tWbAnEC/69kTrzbXlqHhvpN/tQOB5\n11u1/LXNJ1ft3OJe4U3mJww8B9OScHIKGI1WsckA+Bt5PziPydnhROUkalTP\n4QsnJNLqgunTimWgvufInB5+e+dREb7BJawd1El9jC6Twwz5eK2KtP+iUDKn\nRh1MGpaKZY7jyG3Et2A83NeAOALGKw1/OLIpN8NlHWmTwv+hD+2aMomQWA2A\ngtccM47Wxw2wNM5NtX7IT3IRJsSqY9iaQFxx98OcnWI67y8fSE0vwS5S4blW\np511BtVZrSYEaT56ltX+eV1RmQb2vW5V/GlJ3veZ6haY9z27sWVESzmtPTvh\npVDNtpMyEQ4i2/ohPlqH7HnPdKDkEnVoyackKPMNL3fHjTMcWPfvWT4lj/YB\nCVS7\r\n=Rhpk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGj9lAXp2N5sI+d8j5rPRJjKIRit1EW+CntAPpINnF5PAiEAmTFapBnU8D2Qm/6zBSgADtTlasSQ3mwz4k2oha8P17Q="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.2_1639490768346_0.5646696001819151"},"_hasShrinkwrap":false},"2.4.3-beta.3":{"name":"ecsite-form-builder","version":"2.4.3-beta.3","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"b723adda4488ded091b92a98cdb0d6bce0b97a35","_id":"ecsite-form-builder@2.4.3-beta.3","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-1Au9Od3/6e0eG+ybRqftJhHi8cJ+vE3jHevj9AeySdDAu7ruLWmknUnGlHzhjtbRQpNI/TLFck9hXBBbqnEipg==","shasum":"cf211c39479c60dae7700ffa3228a9b9fd889d08","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.3.tgz","fileCount":89,"unpackedSize":4286572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuLLNCRA9TVsSAnZWagAAd4AP/0qA7omzs5sRg50WHBsC\n9UuoJ1sqnJU4GFm6re8vxWi9A/20H8Fkjs2vNl1g1jJsMWyW489kGFfq8BGX\nOvqLXzZ/UiAf35fF5sF+wyJ+84POAw/4NGLwoV+zAD1TOv+HbqveWrGyhTQb\n4JjewexosKMgpPgA4M9fiGCK088j/GWAn/FH6U3ujgMxk+4y8aww+9Ovg8PQ\nQFU14sz2BEvClSzeFy1tvFe9m9LHL7aq0Mhg2RFOSrJXYnZndqc73XICDTe+\nqHoN8BsTq6K+6uMcl5IsPze2AV5jDFB7OOuxBetN6S1sg2SkbC/X2G/7I9ng\nB45J1EaE0tALIqXX059wlRYHQ/knKbD5+OV5Us7j3hQLdzg458b4QjpXU6B8\ngrUIjziZVYt3kRJqxO+gM3e0lBAePrz8GgUgiTMzdFDQpbGHUUfbmGqsLdZp\nc41ENigmzlwfYgLzzo4WIsxfePxsj1UX7PQlvFgfTFh0/oHtw+zz2qMDcN5w\n2R/W4zTabbxHjj6e7cb718WyqUXGcQYtkfNl8JNvmthHBEP6PZnLzgUVJxG2\nJYRGOwu0eeGrM/TAB6xn1FZh8i/skgM9B21EKC/zgxuaC0/iOrQHzhWX6ory\nJiqLz11P8lhz/56TAbwpPajUoSq5aoeko89ldaWrIHhsluBeJyzT5EKfvyZt\nwY6m\r\n=lhPs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/uti9GXjpmhTBmD9mG+HHir/VvlXUYPQP76jJXmNkYQIgc59UxyRiDRhpVvmCNwjYBwKgm7HVAjyWb2ukNFVM1aY="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.3_1639494349227_0.6072316748365225"},"_hasShrinkwrap":false},"2.4.3-beta.4":{"name":"ecsite-form-builder","version":"2.4.3-beta.4","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"b723adda4488ded091b92a98cdb0d6bce0b97a35","_id":"ecsite-form-builder@2.4.3-beta.4","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-vg8jxIOG0MTuv4Wppe9QfTqC9DJeouLo+kBDq6jB0c/GWpwguuBpyhexaNteTPG1yPympe82T3DvMXAxC5T7Jw==","shasum":"0bb7c71b7ac027c973438ee3834091f36e1b29e3","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.4.tgz","fileCount":89,"unpackedSize":4286318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuLVnCRA9TVsSAnZWagAAolQP/2HuJa7dPEVfnL7+mKfv\n1Q11pFcvJFqRTzh1NNw828qphquFuXFILgWZylYjnEVEsoD3WSOyvbWB+iOk\nVtRArWyPl2dvMHyFXOrMcQQPhkAfIlGqZzwgII7Ci1/XgxDhAeXO6ZzapP4X\nlyOa5vubiZ32O5D33nasesH+O0dHIsrXIFHzDG+WnWTuZ+BVW4ZtQLzJSPAs\n08wn5+aZcdr9bhcFonSBl6SLbeBbeMF63JZ1MS6IuyULvDuTz9ePlfYWXI3t\n192cKiCVKiP31Zuo/v7FjUNSMQXeHxtRoueUOwQog9hoa9xRMwIMYnlN8+/F\nZUTFDSVsia693nuc2pZHj26heWLeYLW9KZtu1lWRVHG2Yb0po0rZ8DcNfm1p\nZ3pfDj1nm7XfbMzaidfD5Bwf5Aw8VZ8SSxjpQhwigGtnaDhKlmQl1Tm+pL1z\nNa9vpjSnFLaAE8WGzEC98CR7JrpKjAZ2OlZatc2NfCzvZ1i2nVrGQeW4BQ/u\nAasAZ7PSSWh9IA3ZXaHqK+XnpGfINKAVb6rAz8HqsTVy2uNefnuYy97Y/ERt\nIV2yqsP1yUQiDWG5LUQOlRWa4mpCAaEuL0FRNMYvQ5vxxEvGqBJXjWbQPh9H\nrR06vCbA9Rpj/oWEMWCtJ0cUxCFbQViEvoo1SK18BitaSmq7/5kR3a1s7/kT\nwUzY\r\n=h9am\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCga67igfbxgt7xVrkrIJJdRlYOKs2MjR8iH8K5v97PvAIhAN03SbZ6HwBu57t+zp0LywGUHyk+IBHBH4BpZ3rlZbRK"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.4_1639495015318_0.24424035808417743"},"_hasShrinkwrap":false},"2.4.3-beta.5":{"name":"ecsite-form-builder","version":"2.4.3-beta.5","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"ea57f27ca45f45571af01b9070e8b78ab43dd07d","_id":"ecsite-form-builder@2.4.3-beta.5","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-0DmOsVy7fvFn0APYyoC2ffPzktvcSdcyg7j7InQx79SWyKQOKuinKaA9Ov/E5yj4sKS3nkdFMltemIZMFDx9Ug==","shasum":"b13ba4e6f4b1c0be53b80d1dbb3291506d54517a","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.5.tgz","fileCount":89,"unpackedSize":4286734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuYpvCRA9TVsSAnZWagAAyvsP/i/JKzs35ZmXudOA9A8y\nbFA3gWmVJudQ/Ak3eLQ+MTwXcFRixRZa0D03NJR6XzwOOW0h7arYAMq5s+Dj\nLg13P4oc3UQ6nEQ3MMVAl2BkcSkmCUkkOC+syuV+XjJQCxfvOIuPZ0S7FnXs\nOo+7BVQhcsgx45UkxyoFdl6iLJs7GjucDPXPxvoNeCnIsMhEWZ1up2u8d4YB\nfsXSbkXC2rPEnXFDuP3w3Tt74lUsFudsFe7/psxN214XGaYgalHoemtaTP3j\nILyiUQypbHQplxUVhjfH+Ex/NusBtjIfBSqvFUKv1HsufKIwzYyk9ojwvaYY\noI33owVG/ko9tFFAT7xqaT1YSc7m5UEzvmO7+qn24uqEXMa84dKIdRVzRfIE\nTmLT05I7b2WYO92RKMg7UqXzbFKiIbJ1x8YRI/5TcrMzhUEKEcXBKKtkIb+w\ncAeHp+sIJENc3wRboPkGg+ogvF9+4reTaxaVtGNmMazEwqzE2P4Yf+1r0fJp\nuubehVljCt/FfJI6tbwiRrJ+WRjyqM3bKrusvJLarG2QUrYLp+Gs2GX+mSHS\nTGPoxvf6EsmEM0DUgkX5ZRoLk/YHkILHHEi8EGM+Mh1JsWb5zOz5J2U4PQxb\n1VpliKQrM4HHyq8e42wRJT87/epmAPXdj8XsHtqh6sFyg1whAszG8VF1FKRQ\n+XVl\r\n=WwWG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHdgwe1Q7Q0yAebz0Ml3MrGne0CQGan8AbvIF0albGS6AiEAlI6LDr9VQc7A3XUVVvHj6Y86nkpcOfPFQtuUcGReG4E="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.5_1639549550793_0.44493255064537185"},"_hasShrinkwrap":false},"2.4.3-beta.6":{"name":"ecsite-form-builder","version":"2.4.3-beta.6","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"f2148a56b7c6da35eb3c54ae8328b5d0682170dc","_id":"ecsite-form-builder@2.4.3-beta.6","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-99mr34F6gYKt5LPmFR5H8M3rRA23OmSM3dEB6igrqmwiavzD/Kb8AuZ1dl2DVOqW07P7DELPxrs2tfF+wAlAag==","shasum":"5f0bbe0bd97b0f5e77113e33cca0113788f34bee","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.6.tgz","fileCount":89,"unpackedSize":4287114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhubt8CRA9TVsSAnZWagAAffoP/RJLPpBYkJMs8h+x3t2B\nXRjshJgy4h2OlnaOYZhEiQ+Ne4QgtEKiMCSJRHk0qkiAM6pxhpaw5E6npJx2\nbEuuuSIJ8peeMYrFHw+JYRmwwPkqYJN6hz8q++0zZ+1Qq5VxTNBEWfmNMOrb\nNPQ+Oj1UIdbdOrNikrKXao5nBklyTcBqfqLNdvXxnphNSr8y+UZk3WCFb86B\n2xh65t7ZoiIEw6Ig6QLLnlIQumYhTVxM/GdfgXQAMDo4rP3c3/s7xoyv/PIe\n21wVQZtq7SNDAINYOGF+jAl/GU4VUTMSk28ZKfh3dfzMXlVE9J1ezKpTdiuC\n/HMZfyxc/gMfgxHxwEWCySQqTnp7haIlX5hC+aIg9tXfx7TV23c4yN7cMAxR\nMFo6n1XecFqiCVz7JCpQh/3cEXbFsngjGaIHJzyUT89hA42FzdcpqwqohQ2S\nWc+hIoWy2xvfSltafeZ8C71DewVBX3HNPWz9qbMNOopz6g4dz8wDo4OqzcdZ\nssTtRQyINkoJxrHqQsB+V18scl5um9/HkYin7zJ28tB4Bg600ZDg1kOFApdJ\n5LkyPMmL8QRffnWkrC9rySqj5WlPfgomDYBpU/4VFubYWFhtCHOyaSCWOkmu\nHzDCZ33mPF0vbainkfu8DqUf8oLhvFUwpMv3LkW+rC2bmvKAopVsS62YA8QK\n4n9U\r\n=iqDB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/WUVWlwae+V0KTRupktnhh0srSV5KEPAH7j7p+DQSzwIgVY3ZAnmKp8QMR0NoDfYq6Qgaw/TWEen//dodO2MQIVg="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.6_1639562108558_0.8783243993331962"},"_hasShrinkwrap":false},"2.4.3-beta.7":{"name":"ecsite-form-builder","version":"2.4.3-beta.7","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"541dfe6f3678706937c5820f4503a9d18b72e4da","_id":"ecsite-form-builder@2.4.3-beta.7","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Bujnk7c6FbklHjEziwOY0533x24cSQrMP3N9Us7Z/RwWedcgfgwckOtqowob0jfKp5APRoBcL7OA09JXuPmRtw==","shasum":"d4afc2b832dd632122c1c06e426d9f9f1e6e6c22","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.7.tgz","fileCount":89,"unpackedSize":4287210,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhudtiCRA9TVsSAnZWagAAvKUP/2Og7fMbDeVfBiOIufT0\nfV2py0lYYqYkoTLF1eeYSWQV9ksy42i838d+PHkwh8ZgCC5zlTNYV+hdGUwK\n3+KPf2zLA6OIrdgUfJBwPmCG6xdCgAz7imP7Eh+2r7aFz8d4gFivbhzSe7gP\nZYdx2B4GJ2zPjjDi/10/KhUvdS27l6WQ/mNOENCbgkrmr/fQxKbw0zNc7ULF\nebUeKrxdlRq0kXF0WNfDgx6K6BRb4xXoNBWhLOr0WXwO0yhkmRj+LfJFiTiU\n0vHMfYKY5Kou5EEoZiTDL/xq5YBUiuEknsGc0fkEVxZKmB51Se3mXmS2c1xj\nGr1HIxt+3pb0xXA617sX2TohOH2OOnK+pn+WbdvNsN6Q1czM8e57lcklx/38\nz0Y+daUjQG0EK1xcNiSSWCHwo0F+nD5CETamhL2Sx8vmcFZROZJ9h+2VTTIv\nKvVxpoZcNFcfRCegFVFXDBKYdiLOTXoXElXG0PuweEC5rX8qAfxjS55NEZ/9\nzrG+xB8buqyvvVu169x7/ws5J32TUUetm+VgL69gcSFqDMMAuFRXkj88PxTm\nQCO39p7otxYUHpCfIQp98A+AuTHRJdG+gatCH1JmaV50D46AlPrYWeb3Yrhg\nliDzYKT58vu84nOGTp4UwHA3ED56BD6hVM2lxmH9rYAamfSKMWTgPDfY+DYT\n9OnN\r\n=Jk0E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfCmhZ+U2DAcfv8/jB/vz1goem1lWmWKjVJEedP0fHmwIhAJ5f6ELPsaaICsQggA/hCbL0GNDM7Z0kGJJ6AnZXcFKx"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.7_1639570274433_0.1599903585300657"},"_hasShrinkwrap":false},"2.4.3-beta.8":{"name":"ecsite-form-builder","version":"2.4.3-beta.8","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"541dfe6f3678706937c5820f4503a9d18b72e4da","_id":"ecsite-form-builder@2.4.3-beta.8","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-on31PZ7Bbgo68xjHje9zlvfEhoWmT891fNoEVv12KpB1x/PdzR5lCd0Zj7il64dRuSpMc3nXv5D3SwhB9O3htA==","shasum":"971da8533360f437908b63481bbf14aea076ef29","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.8.tgz","fileCount":89,"unpackedSize":4287306,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhueHiCRA9TVsSAnZWagAAoB8P/1WFwXxapOGvr/bDW/ZD\nhKTiLoIzrqYtgEL4d3HDisVrFWEE/L7WfF3LzJTi+Yds6/eIhofoANI3BWSq\nxnmp8HsdWsvDIcB2QuE+bp64o6yX4b3WlMkmr4wfyZq3EfH9TCMVyM6nBFjL\n2xo0zSmDW/PQAwIrt/VF9dB4iymb0TtTfuHtuRhYrLl6EwOU+vf3CiKJZ+ED\nJfDiFKmMIZLifehdAKSyLAqvNN5Khst87xs5Ldcul8fwzVq0E5LHOUzrj+2p\n9QwJJPDqwYISQqASC3vvOJxOoqcsvBQre/K+zTewdQaToCoPOFHOl8OqMNEL\nQiCOhkok/muGVWROJPxxnCAi/wPctsEvDy6zhMQnfEtU8XoFtsZhj9axSJRG\nwCOLdkjJHDo+ggt7BviRH6b9biB5nupvJ5PGVK0FdFGFshKQLNCcXuINYLEY\nIclh2yWl9Qnv5YNYDpd7278hX7lZYrCNHlx2IcdjfhEVKC5AY+IBwjGTDXj/\nKa+YwYfHfATI+iIG34wqT2K2RQws5O+Mu0SlX+ad1dZF3e9iIZzNJe5jisBY\nY0SoTqqOdYxio+7bqNwOf12LFR3GN5sgohjdNLpXSW6htEyR9C0ppY/Ztc8z\njJ+Bvl/W5WZ342kUbWNBldt6FEZs+LjqqB7vDfo7eym1g6XyB5t5CFIESIF/\nHBfw\r\n=6F18\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkBWM59riYu08Sg1YHrJVRaVsNdxhCnVDW6dnMSSTTHAIgHk9GmNw+e3Sw3U1g5rFTOWMrrvTWmdTQdY2458sZWZQ="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.8_1639571937853_0.04105595971046516"},"_hasShrinkwrap":false},"2.4.3-beta.9":{"name":"ecsite-form-builder","version":"2.4.3-beta.9","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"15fbd49bda0f447b1f3ac7eef4abb30eaed58190","_id":"ecsite-form-builder@2.4.3-beta.9","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-DfZwBIkUg5Au7M4ZYCQ1VildVJDRiOIh99ps7Dd8i91PM4U4IrkVFknp32p6habPLa2M2lTZ60AqOodCPhJJ1Q==","shasum":"5cf95cd070335846106504f1624f9abca7e5964f","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.9.tgz","fileCount":89,"unpackedSize":4291588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhu1jXCRA9TVsSAnZWagAA5nYP/jL0o8lnPH+MOda+DGqP\nEVsbGV56AP2+IHuMCTNERVlugs+rnoqaewvLHsiFJzaPk4SlqIxX2kJTJ2FL\neqCO5rwZVR9+XMTc6b4aXcepcBLbCAmIhGoA6dYFlP6dm3ZXGV2mg1FQyF6y\nEnFlh/78RFzN9hTBEE6PakTwWiI9Zfkrotrg8Fo/3Ut3R8xAO+dDB1znFewi\nQ/75dogjh1iWLCK9m6YUaKyrta6OIW4WwJAiZ68Qradut9a3hFZHq86LDaQN\nAnxTDKkGQauWQmmhqfMZiZ6TVCWz094/0G1CIrKNToJSMmi2pwb2k0KTDEEk\nUFqfsTWVsAAKY6Ifg+kcHdvT/nYCqIKV2UmGuufRNtLme5AT4PfYnKVNztRc\nWNxtnVJI+9i4VsdmGKtMohkFaTipDuNdxDjNmt7ne+V3acxlhEYuTOt9Gpmt\nCTrobpUDHenejqBe3+JOjPfsQDNn50DrRhkl9SkkTvyguMKGqLu3VbxmKSnS\nOd27jnmQo3ZZLCJ1snfCRU/wrcNdYXBw2j99jkdIcvB++UgSYZGsGzWi6m1S\n/IvGJFJ3Ls2Zh2kt8sNrmuNzfTYpIEOt2IFFrSZHNHAwJtera6mcu1arRCB1\nHsA5WYyZhrnvLSkGv1x7+9MD1YhOvaCzCO4v1o8SbLOuUr4fNQ+Fk5bZzVaM\n9hHs\r\n=BbrJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvBrt8NijlvSz0zDj9T1tTdJWMtkw2AHjtAStf9VIEPQIhANFFw2GkfDqUENU7kczcYDSOEPcCkX4dnwIhg9TGnmpi"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.9_1639667927656_0.16833778367503127"},"_hasShrinkwrap":false},"2.4.3-beta.11":{"name":"ecsite-form-builder","version":"2.4.3-beta.11","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"15fbd49bda0f447b1f3ac7eef4abb30eaed58190","_id":"ecsite-form-builder@2.4.3-beta.11","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-NB//Opm2PKHIk9eXD7xHFhx+btZPvQ6zFqF3+yTPxZlk+2yXLDZwgPza9ttxIAhTQLTSQBIIwT166j3WoZX1Ag==","shasum":"850116c3149a5497f41e07fedff621189f21fabb","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.11.tgz","fileCount":89,"unpackedSize":4291589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhu2JWCRA9TVsSAnZWagAAwtUP/jM2GcbMEXn+23C98yzr\nIOYoxT96/LGIx1jUWp94Yu6ojW7yT9vBOTduV8rsRnCFu+8ywJh+lWXY4vfc\nYVSnYCs0QsAw0K547EoT2IP4UpWXOHTUySxDJg1gO0bZtjS0GdmkcXmZ/Az1\n5mSYsYOAGgeh2+Tb529Sng88sBknIY/fg/+OXsWqWXCVGde1+uQK0334K3dm\npTMe+Ctb/waA9xEVrowqcM5oXq0o7J+2LEHs63DhJUuChrmwh2gM8lzmOicI\nf5Gae7I2GhgUVRusfBwGRRxtQT7n9Nr5V+ugXKBiTXmrTdzppKqNVJfUjszQ\nNb+I/uMB7xKJpdc5VCBEJ0yR7dG7y5cV/cgyuogfWajHBPVc3N8QVG7qwFkP\n+w2Rdrn2JRaKdBxFUd9sny46wh4a5hcDRBcPVu3mQj5QzCqjtFQEsQxnP7ui\nhL5hQsBoj6GFaDGFTJ20tPZQn/IFm4aISZmQYlVoBVkanXo9sw1O+2Wsw6Ja\nFggdbV78r4W4xdqrwdtVzdPxvqt3a4mVZOWNYrZxfLehZYwbsYPD+UjCienR\nnU5GcHb9YEnyqc3R84OQx9+Rcn0jri65Ff0WJrzeLujAFwmdyofnIPOHy7QF\nufj5pUFBIJMXkR7OePPv7knBu2/ioMJwZ17dtOzTpS6hf3S/dW1+60dlzB8s\nS87t\r\n=EZp7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4owpORVZ6XOszCIePpWHmHXTEEFvhXOxcG3ciPQEeywIhAJRQdPAVZYNxMPkpjdNwuLKIAAe2lwFQbQ2zOfdofR5f"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.11_1639670357952_0.19361620480282737"},"_hasShrinkwrap":false},"2.4.3-beta.12":{"name":"ecsite-form-builder","version":"2.4.3-beta.12","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"15fbd49bda0f447b1f3ac7eef4abb30eaed58190","_id":"ecsite-form-builder@2.4.3-beta.12","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-LXRgZg6gU7Wwm757YTMiTQXQagQoWbvQROkvi5YuNWEgCnqwD9ys3dFsHzA1okBBRiiceVssjeL7FANx8YcqDA==","shasum":"c3918c39b401603abe1159d19adadf70951283ec","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.12.tgz","fileCount":89,"unpackedSize":4291573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhu2W+CRA9TVsSAnZWagAAdmEP/22XyZ5/0JoX/40ticAg\nf1+OwILecpavdm5I8jlWM3QGzHD7OCQ38s2aeFB8b06MMgNXg+cVTDg8CjnK\n+zPWj1JEuf4etKun9dpmD5mE+0mtvZ6KReDowQ5s1bsmSdiZm+ln4UupOKir\nbzqNLlTvozeA7+8o0Br/8NUxftpzvyfY17vvm8v6hYd+izsWOh7kcLfrCC5N\n1TmeM+gPiu0HveuP8NCBB2fjC3W2Jvqg5y89fNVWEBMhClDyM7NQX6TJrJSr\nbLBRfr5EX+JRsAW8bPSdp3RPwAW+xlxU2tB2NkFPCtJtrm8yVlFS/aOXbrx/\nOmOzhRkSwqBKfHX8MZuYdf2W3lNzsnmkQtKWnyecS3yoaGCtUnIbeWCMmjWu\nrCOxhL+efILjR6tGTboDK8Z12iTcUSKnj+yPQ/BmjHwT4PjPNwPxK1u10T+o\n5m/LkNcIDnewvYgj6DecA8JEX7djzAe9lTrq9SE9huS2KS0EBCI5tMvfcvRz\nbWstNbrFr1IZCVbHedZ4z92TBRAz8DoO0gZG0RbgKEDFUiq4YAKa32tgFJhk\n7z3Qvq6EfD3rpnsmXpSfIZ9YbNZrdHNEaaYBiaX42/9F+iFQ2+jvM/nyEvLr\nH7EGMCQvrWeOyxavu56yYesM1Iw6gEZ5cf4g6hNjBz4dxDr2RhDxzeexaEeE\nS4gW\r\n=HGNI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGZFq3rQeOUhv8kGIA1/i4ls/LqDxhFiODQOr7UF7b/3AiEAxg09cdy0XuvCncW3SwqNwbz4UWEffsGY18ZuX6BCe1M="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.12_1639671230531_0.5735316588526886"},"_hasShrinkwrap":false},"2.4.3-beta.13":{"name":"ecsite-form-builder","version":"2.4.3-beta.13","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"15fbd49bda0f447b1f3ac7eef4abb30eaed58190","_id":"ecsite-form-builder@2.4.3-beta.13","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-mhY6RJWOFEgsR5usX0tW1xdtnYkY56MxGl/WaJqH4pGDCN8UCQdanyTNnth/5RJa/e40kdFIlxFmmcAL5Lxu+w==","shasum":"d19026dcd3902c049b9de5e0fc2fdc92e51e6665","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.13.tgz","fileCount":89,"unpackedSize":4291573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhu2kECRA9TVsSAnZWagAAzcEP/1GaapM4fNPWlR7Txbel\nhsGBU7lRc01P/f4gexxO5A2+nVq7r9Qx7PKD5j3qJ7vZ+3dZKZx7nRrItTy4\nRioe4voCXxNABjIQLWmRnGW08m1FYSNePeC81b/+86W4si5qBopmUpEDefq3\nhKI1k5++5iZeln9Djofdfm4euJV55w69NtuFvWQzzhWaRGPWm4F+iSUNx+0T\npsP9Oy2TyY+7+jcYtFr/fNpFRsJk0X/IfrsIs+kMcbREu1Ns6/urOc4bkYOz\nN6EL9wBjzLrZdppaPGNfB6ohRVq2LnyLprPN6uwVcYEHr+CuxsoYNMPFkevt\nddtQ+1J8xnvHnjkCfTt5A3WMK7k9SwtU0OUyjfkwPdxiDvqtn0Db+aUqWUmJ\nXujgfk+FPQVJdrAJ2XahZlcg8TmC6p1OLj/3ZrUMf2gwWsnREyvBbNHAyiRl\nyyxE4H6GYO1zvIKH+myMo6OYgXblABg6SIV4xvRZ7sLcPOZRGy7xvZ/qScSw\nBXJknrf/z2xpaaacjRTBtJPE3cKd3xuFTnKrBDx3l/Pi23sNdxOQY0sdoU5T\nH3ZnQACNxkYA98E82J+cGB8MGBZYRjsxuOAe28NrnW1Ms6QHeFXbCFLqTxAI\nfFhyY+7YZoY63JyNdzTecLNlcZJLc3X+c0MSm6KkG/IA6zatRgUYmJMOZoOu\nUaOU\r\n=TJyj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSUSrooihC/CVK4gztEV45Cg0nFwd9fhcgKfcGQB4fvAIgQCokxyHEd3/7v1BOkCPNcbJXjh0wZME2xeNgZzylOvs="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.13_1639672067949_0.8550406296013628"},"_hasShrinkwrap":false},"2.4.3-beta.14":{"name":"ecsite-form-builder","version":"2.4.3-beta.14","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"6ce93e4f98e6392b9bb6ec3c5c416c8d4848112b","_id":"ecsite-form-builder@2.4.3-beta.14","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-rzH/b3Ze9TUQmuojoYGpGfDS86I9hqeuy0wWaFNuOYdg8f4pOmfjfilYRnR1dMMjsUh8H2bhV9QM7M52VhFjKg==","shasum":"9e4ae2ba1739d056ef787a51865cf12b8787fc12","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.14.tgz","fileCount":91,"unpackedSize":4324417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwuJXCRA9TVsSAnZWagAAjLIQAJhZrSsvv4eT7y0VifsW\nqr37o5N457zLwWgeATe4e/ktt/vTNm+1xmV6gvKpFhLNVGYxixXUvAIObA3+\n9jR7XJ6sf1+muB3rkt4X/fV+zTedbrt4wgjZFaLtn3YLzgbanat/di8aAZoE\nXiEPz4t8wp29SvRCSEBo4IBilgaRuNLfWFDmaKy6vC03MNNs8DY7rXOkC62x\nVEhvu61ocl5Le41ZE4c8k0qSP3pLTxs9O6TcCt/TDjZfS+Ndkt+kuxbQnfzx\nM+ZGj5ohCFj5EJhT1q32S/Tg+TF5MbNwqoYqcvpmoUy7pu4R0mrQxAG0dpmP\n7CJnRf/q6msecHXqjQWMV/fxZE0ThWnFxYDtIexfxQRKKz7nCajviqnUT01J\nD1m7PIbgTTaPiVoVTYssKa2Go9qSuUeysQwV+rNPx2Hye/+qzv8VsYSLQ89O\nJ2RCmT9vq16atv9IWxWjTRs5A+UKxT7zSsRGNGwroyuLl7W7aEKF9u4Z3r2M\nsLYfnrJyQisxUgeOL/aDp4oMAJqJMEmS8WjRB1sKwFzqtEHgqeEEJFuGTJd+\nrpSyMLqhL0ytQmXzk0X4NaJjFG3lMWo71xEY8A73Gly2mN8EBtE5Lri4R/AV\nZTSCWkdH73BCfHJWV/6/BCZz+cpNeXlS260exZjLSw0RsNssXHCroBbiTMfQ\nmfx+\r\n=knw6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBqs7YgpAdUPbA3ny/3HDfVnhwKpD8biKNt/aQ/ZsrbqAiBs/cWjYgA8xwfygVaFFs11GOJ4IL7TZ/TOXHFUf8vkpQ=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.14_1640161879440_0.9344038169853284"},"_hasShrinkwrap":false},"2.4.3-beta.15":{"name":"ecsite-form-builder","version":"2.4.3-beta.15","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"012e001e3b378326c77f9e08c13fc029a431bbe4","_id":"ecsite-form-builder@2.4.3-beta.15","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-tmPlddogiTuMUMSAk4EBLN4DHb9Ia/T66Y8o7im5eJkyiezFlqzeqQipgwu2FVjQaf5NpmLPE51/Bsu6Zk3pZQ==","shasum":"1f240fecb3b03591b54dbe2c240b949a019454de","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.15.tgz","fileCount":95,"unpackedSize":4344074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxd83CRA9TVsSAnZWagAAZ9YP/RyWKCDT1eSQ3mbMIsdi\nd4TQ928rsI+ITG89bPrgWZ6J8ktjUB186SYOAAu0rP2nqfhMxRkfWJAN4ITe\ntsi4G52851jNXV0QAEt0ieINBt/ZDt/rfRhj71lVy2ZAy8Ihl7cxtK71Ibjd\nHhx3sza83QozdPRZGUGgjZ1Csah1NvdQ5y4wTY7lyDyGlaQxntFfJRgHF+Ph\nAVm0w19rgJkfoYrMcgluvyFUk19EzvGGSHOg8iX2wimkKi3djH8VPKrY8Bnf\nuduzOVX4XYDpRYbuYhbSXBfo+GStXN8Dn/yjoQteqPOlGvizHwBP6hiWhWoF\nhMQCo64HGeBYKUgqn4qG416lT99Xu4aDZzNaseScKtFCKi2pBU6LR5SOGO7i\nCcfltO2RMmwHYZEIrNxPTT5o2J8ZNZGYSo0fyX3DjD/SOhv064xcReIK1l9e\n+YsWvmX0iVzSoZLqQZtsAkIndwCeA38suKW35YQijOB/1Be8NYgCZf5jFnnN\noWltBNqrAQe/9zPatw95ICTkqaDe2mpoOJ670u5TnqRQj7v0c8gudC9Mmeoi\noxphJR3EKhoXZfsSsVlLYpXAou3Dg8/8zR8pIUEH0QnfqO9Bqk2Kqb8LgSsT\n27hWmzeccC9svANcEzKpxf0PUC48M502vX182S6iKywLlajm6l0qVA/JOfWR\n7bAF\r\n=vybH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF526V0N7HDnqSKdnBmcCJbGOMumKTxe/FSlOiFAJ5SdAiEAySdbRV9mnHGsCbdJuz9JV1UeZ5xL7OkGMw04EOesXnU="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.15_1640357687385_0.8810887953968201"},"_hasShrinkwrap":false},"2.4.3-beta.16":{"name":"ecsite-form-builder","version":"2.4.3-beta.16","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"853c76d671484e04df19ec251ce55cd88890ae39","_id":"ecsite-form-builder@2.4.3-beta.16","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-vbKTGPxid7yC/g2wS7g/mb8YlhJ0JLhUpe9aRjanGWaO/lt5ePFpO4jzuh8P0K+On2KbcurwKGUDYqOLCCBcRg==","shasum":"cab62c18bfa13063bdf114c5547511e331f57af7","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.16.tgz","fileCount":95,"unpackedSize":4345061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxfjPCRA9TVsSAnZWagAAzNcQAKFlNY38RLllXTjWNbDK\ncG8brNasQ7q/JhSg0ZCwxuBG8APowyrGtneKJqjuj7Wv56VnnTn+5A6NwNWg\n+bkH7bBurzrlU3C3qXdLYUZ+OdS4AvKmZD/bcCzzw7Lt5fkYrCtdvvvLrrZp\njO4Vca1OtJlptYQoaVN9MmsCr47DXiTnoKwjxDqTXozCj9LdScjgmFbcDW84\n8q7zJKgLX+uP+uu9KnuourOj3JTYhwC9yjZXzZhJaMDibfn/n5/1NGexuhTP\nkrzKvVbvN4Z9196B29QHL1sFilSR/QPoKxl8LufLdLYZs0yYDxFNVb2feSmC\n1uW/dkqni6Wp9tTiFdsy0cXezC/Zf4DIMrhbspp6BQnDaBPck2sveYevNNwp\nSq//LsDVs1NhBTcPmhmqw7xSupfd628uLvWv9QfqoHfpa6ujKoi95RvSgDDZ\np0vygDAMSLDJL1MoHECY80kHtI8OlStdwyKag/jkdjZilqcTIUsA3F1T/I68\n7ManpPLrWNEX6Z27j/ZRHBGTFpwXNxnGoudgHo7/bmWPo6cZTiDkuGSC9bhd\nmV/J6wRO0F9ldQpJY5cIG7GZWfxdyQ73eoE6i4IvD1A8XBBB1WwTDhegvPPk\ntlLYRUH/jiAAiogH0hjxsmmdhK+umn27hLmUdGvtctczGdSPqJTy1oNUNcSc\nW3Kx\r\n=/0oW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBvTbIu48BGIcFYUPXTZy1ZpPZcT2Xi5e4r3WsOlyN+wAiEAl5MlZm3k2G/XGRTWgwoLnxKeqCqZFoI4rTGrclKlwds="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.16_1640364238945_0.08971153660014508"},"_hasShrinkwrap":false},"2.4.3-beta.17":{"name":"ecsite-form-builder","version":"2.4.3-beta.17","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"c57dbfb4f09c06843056d5c3827595dca76fb20c","_id":"ecsite-form-builder@2.4.3-beta.17","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-O/MQKv10q6IG7s9WlPfnrfTly1plcnY8GrfcbgAMaonvtVQ8MjZVM5qc4AOpiD76Y/GYVcQGJHkFEJ3U8mH9Tg==","shasum":"166f1ead8e58e12d82eca3d53ce48a2639805d62","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.17.tgz","fileCount":96,"unpackedSize":4331858,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyXCDCRA9TVsSAnZWagAAhxYQAImvs8bSF3v26ek9rHE7\n+OjmzHSRZqIBtWQMZS4Cs/myY2/+CoMXgOUyyhr5fB5B6typHWsd1frD5kd5\nu5y8WSI/E/iDHiSbMvB0nsk3d+2klCNdUTnFEWh/JZfywCa6SONHrckx26W0\nmVhdVy2VHI2GTHn7PXRuXdM0bUMvEn7TbEnnoQRn3DBLrbEY6jAoYNvqeodd\nVgRZZdWWGNkBBxYuIz/hpc9beXWSuZ4myWuatE53/0wMZp169j7egsTx+UZ/\nQ1hz4ihtW0QXzC4vEcHCog/O72V4BCVUoMzVgutRJsexI4Iy71zKEJ5zUgd7\nzm3xTwAF/az8xpMmlVY42Dy3e/b7RJRssFF2467yNO5i1KVgKlv6LLSm9ZVJ\n67/yV6TA+tCkulFYdBdItQA5YSwpik06TmhynlW6wfUDjqfTrV4SFDeUlbWT\nJD4U8bYzJeDAQP76qYhzqN89hCt532qFY9DWkPaDbqBWcPeTP8DzBAYHviEQ\nlUVA28qwqTTfIspJjeGIo0PBokgb8pdhT2F68HlatvIJbescf7cs0A2XjQZ8\nds9NakfGfHGl9aiFJ1A7JbaKxg8uH+iipQ+sgauJZS76UQoXTbSMTPeQS8cR\n701PEGexOdmy/ntpSSKDjHqVOR8DUnjFbNinZ+fyMJNceCnAaVz8fX+UeF6q\nggKJ\r\n=YNsM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGWL8HEVi4Yu4cw2/ZJC+waw3BmHQUqf4gxCBZSLKwZnAiAfzp+4OqCPewp1O703ed3vImzm1ACrRvEfq9FeiqELVQ=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.17_1640591491262_0.8330480743861546"},"_hasShrinkwrap":false},"2.4.3-beta.18":{"name":"ecsite-form-builder","version":"2.4.3-beta.18","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"01331d405bccdf241be477d609ab21a906dc37d9","_id":"ecsite-form-builder@2.4.3-beta.18","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-syfv2LhhDrP2/lAoMT0CylLD8Ok8R5u3yVd3shCVSAxjsSpR52QqCaKWf2KBvlwHE8d1qFTrBy9c+spyREIZ4Q==","shasum":"a3d7cdf41ffeef011212d4135181726ba9977f03","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.18.tgz","fileCount":95,"unpackedSize":4344697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyXymCRA9TVsSAnZWagAAYQ8P+wSxB+8pUY5micbaMXn1\nftOytT18BDWzpbf5IYv/gazIYebv7mYtpgfOhp2gcDoFgN8Gsts2vZ4nODIV\nclh+wH+lXD43mKsswnXQ0/aTLt8kFI/p44wewu5f69CD4u1HC4NSejiSmX56\n6RyQ4C2m8s8Fl71f+n7WktubNptqSDD2vECjHrWsB1LD8I/IoqTtUHLp+iVZ\nbmZWYeFh3Pc1fkg8D9/hrcQhMKnAVx+jG41WWzD6CxWXz7hcvtKijh6u0yPT\nAP69h3H3NWqPFVZANc0PYlt9TAJ4vHm5nd9oFh1i83x/5wAR7IzJ/u/1EsmV\niMrc+vYIrC/RK9ED5EXX5tKw2k69Ktr3OWcG4CkaYVWAViRPTMZqFtHBiJS+\nqZffBiUEoYSMPxZc6a6owrSBohLWTlt2MPi56dAKANeL4tLEMDdGqyugzgri\nD8SA1DvLEseS96cAG/HVxJTlDmU7xHbWnocwCFOzSaZEHPbMCntsV6RUDUWS\n9y99+jmGivLLzIoMynCoF8fkSBZY+jlVVECUW8Ri1MFuCSDRADGPppXmcBaj\nBMIOIh8Ag4C4zgKwtfOoUeOdO1cAQXcLLpa7mWdtrkRP85OPpv4e+CAc12YS\ndY2X257dM4iwVM5/aM3wI6KFilPFPEsUGPjnrHCgc6CB77OIjsJa2TKELB9O\nHFLk\r\n=hIWV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmpmKJzRpryBRbpN6xpQQqXpydAnFSgVI17k+Yy3ToTAIhAKDkItgVWsZE01H9khdx8qVigCG/QKWj5QvVTzR1WaQ9"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.18_1640594598639_0.38409195302299093"},"_hasShrinkwrap":false},"2.4.3-beta.19":{"name":"ecsite-form-builder","version":"2.4.3-beta.19","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"01e0423dc7f5c905c80b61a1158eb85b7d8dd489","_id":"ecsite-form-builder@2.4.3-beta.19","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-lhwYQmFeVnGyAJzy0U66sJvsLGq9/yZvT7tK5RGHy7A0fRwjTOs2rBbkrmohKz6WK2zZ9izhukPOvy8XnDieRQ==","shasum":"8095d175ba466b7d2e22bd9b81afe0bc69992ac0","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.19.tgz","fileCount":95,"unpackedSize":4344641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyYG+CRA9TVsSAnZWagAAKccQAKDHGGlViViCY7ftUsKB\nSLyif7jhrm618H3A0+IPcyofcRgg7cGvR0YYBwW38iELl7/LUaP79xzhHLB5\nJpQk8NlVCLI9pPNCUqIPbeMxV2so8/sezS3gEWDUjItC5Kfev0FNcqMHngo0\nM19lhitJ5SK1262l2GjQaU9AZEWNInlBNdtKIYJfCPY7eHaC4HZsfucBwGeL\nsViAeG5OLgLUKYUjAc7jUUpX3OaX+US7XWe8vIryUQlDk6vF3hm9ULWBACvI\nkb4in+5tsBKcWjZ3FOGPmj9FxyMitc7mSgCfFvJ5iK1P5FcRBIpxc95V/lT7\nQZTxBNotII1oLKW9rdZFxi/eQBvqlhCjwtf8dI5ryt05rUefWHey53I9VG/I\nA2rwXX3y7xATYsM6jXAnTiM+zOGIpbvbuAKet0aTLoX06hUIjRuvU6e+IPy/\nIHVGuGcQ23vOGfbWrohIvOFMKNWXcaiJ8udzngc5QZRd041CFkKr2iQ9Qbur\nqLkFGeBVtCshY6ZPqsxbXoaVKzbT+/cuhhja8j/95LiVI39/D8L6QgEJteL+\nbtg8UnvQjcNl/vuP0+5ElK3dTAIVJUrDw9vYpYJpfgr5zoj69MZ5Kj3CAbL5\nVHUtY/9jr88oCGhGT218NUz03tZgjz0px2HBfmN8I1c0OHw3cDkmRz/SXERR\nzJwY\r\n=CwoG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEZc09KOuNW/2jAMUAI1r8ZvxsBM11rY0M9BCfiry/r4AiAEXaeNo/h5lsEh/Cw0Bqgj7RzRBcTvdnO24GnU4+c9yQ=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.19_1640595901756_0.7433912192704104"},"_hasShrinkwrap":false},"2.4.3-beta.20":{"name":"ecsite-form-builder","version":"2.4.3-beta.20","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"559447293e4bef05d0515fb92ef0eca0765f1a3f","_id":"ecsite-form-builder@2.4.3-beta.20","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-vGz5sjfQXYFQakQVZWED0CzaK09O5ja4Pp3tj2waaLhIudRzeVPmXeORQlTx2nv3jDsyiHnlgr6v1HYfWW17Qw==","shasum":"b6f265ecfcd60edd0a38e7f473be2afa8e0dd826","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.20.tgz","fileCount":99,"unpackedSize":4351562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyaMKCRA9TVsSAnZWagAAdB4P/2jNu0tNYztJdR2AsQfE\nhUTUvMb0vFzGMMWzqs1ye+zxEUkPHwr7ZqdInIr+QNww21v+Zk7jOdAS7wT+\nTTyBlyX/rFpjc//T7JfGspATjs4fu9r0tF/3YwLArNsPs6rVXF7M8NKimTCC\nib02+kXQJT8y6JnNQjDHPgbsfDHnBWHvwb3Jn7qIq5alxBNgEkseHskKfG5o\nJTSkPwB34KeDrDV/b7uVrmLPn1W3Gk97XCG6zrEUienN73/alNmXLKov8cia\nDxgnkN2KKMY1ExCOPW96RC1x/N/0OdBBuz14ocj8O59aemSLLbXB2ifgTue/\nrzbVz8TVJ3/DRrADD+ID/QwKBqp8TV6VRLLqLU9d2CNNjccYi1eTLAKqwwOb\n5FEpeIAKpIMovCmPTkCLFmES7aM+irFm9eHdR9ZFhuYKG6+u1Ij800PkyabS\nKqFLTURbI4L6hK9mtQxLv5TxkwTbfs0/xU///VGthJZeT47jMgjo/7F0RnHq\nOy8tsXzOhYEFoMMN2bmLznoGIWV6leYYj180YYUQBfycevIXoLM++AQ+eGW9\nqJ89ApOEkSTWjUyzSpus14xubnpiCjOjZeV4Z3eh8mZOGhaGhqLvEHGEtkLU\ngNyv2mMrJz47MNQq6ojTyl6AfgRK51VF3mo1E2wGhdE3nU7QUvl9d6tE1evq\nN7k1\r\n=fDu5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJ3nEAZEKNDKki6ykrnQTNTuaN0akWIP2gaomOpXaxxQIhAI6aSXCrQKHiMEYqM6RpXB/o/Y5sSo9dRt/qGk7+jRSM"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.20_1640604426447_0.6173490385218388"},"_hasShrinkwrap":false},"2.4.3-beta.21":{"name":"ecsite-form-builder","version":"2.4.3-beta.21","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"8f3d2041489a73fd5f83cdf183dcd96af43fa19f","_id":"ecsite-form-builder@2.4.3-beta.21","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-OidSAoxR+2ybV7/gJVm7ux8llB5uCqXq4VjUm9rOVPropeU/s6LrrmzQPuE1NRKN4Tp1e3mQKiYu9Y28ir0Jmg==","shasum":"4098e1f28412edaf0e2f49583a64245ae94c38d8","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.21.tgz","fileCount":99,"unpackedSize":4353594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyczVCRA9TVsSAnZWagAAMpQQAIXZV5Uqmp/dYL1WrdUq\nqN8Z+bW3hbtY+2nScQJBsbI9Rp2xTeVovYW3tRx9kkJ7ZFYQ01mk4Qj/vAVT\nJGG5Kh0uGyQrdOeC5kz5cnLiC6XlPmhpVFJ75Fd0Rnt2bW5R5CCduu/ylKOA\nJVq1cgpiukRekxzQ4FB3uvZatckP447b5jSwV8/hZGuVcT0xVHszIYJolXDq\nexw6mT1YdR4MGbYZlUnyVA6Sd2lDE5rh4W8rolxAiEYfgAwT6+OLfzm2kQYJ\nOMBTz2ouHQv8SMtoWz4dcBWDWtKtT3ggoSh+OcgP4Lz+RmuT9Mm/C2/YS8gQ\nfGztk5esaaeBk8LXeVHW36jZjR3i/1gARpNM4Q+nMZCGiPu+HsEgyIik37/x\nPFH7YGP2Tgx8dt8zZlkD+Z/DPWWsaqAEU6zw3BwSHwaNc+yJwtUJzBvKbKUJ\nHtH9WSphpZKQ46fTC6Bv/Gi1MSCKvj310w66nI8n34KQzMF7TNne6O6w+Pz1\nPOSHLaTZqavbpNuadORA9aR4DOYwqrgqTSLZcR7MJviHjHQLGC7nIE4/qcFZ\nYLEORgzRKlHvN8cbCksUuggnJ4z4Z2L5i8PNwnW7iivIwwkrGKhEndnheqmw\nv6Lzx1HGMiAB1N9SRQV6MQRLrc3QNbrvfcDNgWVGTDXkjZSEsYQ37agNRR+A\nHrKo\r\n=cJnh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDsJsYfE+nm4Ud1nYPCcJ84nrJSjGA+U5R1zkFfND6AmAiARsvTxkCvZEEYQA6apwapIyU5NdXdU2HHfsmHpSGKhXA=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.21_1640615125193_0.14558143419470637"},"_hasShrinkwrap":false},"2.4.3-beta.22":{"name":"ecsite-form-builder","version":"2.4.3-beta.22","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"6ad113ece6edf39b7ce7426d92cb33c060eb7f08","_id":"ecsite-form-builder@2.4.3-beta.22","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-BUFHZOCRPD/LY/Ndod/91KDGbeLF4zKnZ7Emaoo9/fOgplQ03Z92U2Vwng0SsIwgRn1SO4JzOKfN3el98OdQKw==","shasum":"b580b4e7f6d89861cc7a4afc8fb0614190791f87","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.22.tgz","fileCount":99,"unpackedSize":4354721,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyt9ZCRA9TVsSAnZWagAAksYP/RG/CRvM2CjCEbaxt5oh\noxTwcppKYoxZsvxtD4m5HQ5fpp00IY2WXf+Vx6AJN7lvpBD8nc1if7JSnzzQ\n0kRciomfKM9Df0SvfUabY4bjz1P2yOKSWqUMr80+UWa4XV+h8y4CtlDwwaKp\n0mf4yE5oCbCIAQIiP1IkmmgdsaYB0wBY1iqjwOichAcXTHdrXLLNkOep9Ij6\nyi4v+hV8+XhB7HjegQYPf3+VKtrPw8suvuGmc7GrR4zD8xA3PCoMzA3V/5aK\nJWVyT9TtVqYBtDv76Do/ZQhNSMUC4C7h3Cey6wopbhsHXgfGlAGqnBJaykHS\nf63lHorKbFiowsO6JcUg+JE6MoyrEDDsPMoHX22YeN8y5DP2uzIv1r3qkwRZ\noQznw+eWa1A+VeHxPtild6yiNxtZdVkzx4p+RAUyW2UpaPk0VzdbLJzK5uX/\nqU4kwx8pOUhnvda4cBi0a9NYlSD8+MSyl3sEB+CjGgo6Dtiqn6zUe+MaosOO\nzu/2mnsNUjdLTPPv2KipTu6WFMJttz29WWQkAO4wE0/mXzfLpG1d02slPgbH\nBTJbHzKcyZ+6E9yA3AQZW3q9bxXv6phsCsKqak26NTapKSz6S9XXt8/mtoZ0\nG88qO/J+E3FnVFe69z6U8AI4t9u/w4a7uGF8RyOWZqM1pnb3hxQ2cVwNrTEP\n7LdI\r\n=eAZY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDmhBNgXcP/sfhiK+eaRjlGZ31Yvm+GNKCvkhmfyWyKoAiEA8PvFxZNQFeSmuswNkJXxXXQ6EXC5ZVNIW/BfN4Rx8MM="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.22_1640685401171_0.9914485801552806"},"_hasShrinkwrap":false},"2.4.3-beta.23":{"name":"ecsite-form-builder","version":"2.4.3-beta.23","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"0ea4efc78aa7b755ff6e769aefce78c14f8d3923","_id":"ecsite-form-builder@2.4.3-beta.23","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-JS7oyOlEpoWhU+XXXfRCUb6drj8vviF8KkY1FSWrUdHVkcKdpL9t40VczfWmm4Zi1Xmq5gc8BHZIT8YprQEO0w==","shasum":"2717d2190fb1ee539a80317c8cffaff5ca00e07a","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.23.tgz","fileCount":100,"unpackedSize":4357553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyuEeCRA9TVsSAnZWagAAJtAP/3byryUUsaM8Z2Qv9lHK\njxLv2luTgosBoBTijhiKOM1Sho52hGG5875tUce5mvWGrSUsxhhizoKIEF4A\nyt/JlIzJ9cI15SlkleQ9OBOaoBoZQ3yu7vRJgw9+IIPQyLzSCjx0Fo3lr8K0\nvUgDuCV08xO+sTwXzOvqP8/GuwGI1XWFBeQFpXxAc1o6yaSHvj7K4S7lZnxm\ntjjz3ouT02C1nk11Ru89Gn6mxS/mlB00zGdJQI8ujCH2KROzIBLn4VHQ4EVO\nEMjxHgxS56Pt9RFA2OHx/9Fx8XOtfix1nFDEuKrs/vWADWEkZJqijYNMQKC8\n6XwW3WNTEWA8xwpjL+S64qC95ttt/+uGTgyT7mDYmnYQF0EaUHw8wd7HPZYB\nQWdXqPCzBTK+K6THCd1JAYVJql1R+ZN7tgC6/H8nMtoTHDlYjJ5smoVNMJ1/\nO5lsdYOHxzbLnL8fb1CGg+0xo06Olyu72TFCuXnoAKjjc44EEudT30nhMB2T\nq+FqXp2RxCpDBs89ktz23gOXYKp++fyDdvTiaIizJ2XP/hHYFpXbhm71vNSq\n+7RPSV0uyFqobOGPnlJs99fz+7dGir8Uft5OdxhGkjU0IIM7+/p8hDhu6c+H\nTV4nPrEAe9n48byzAsRNXVPbWI+ToE7kZoChu8qrUO8SHvjWYDqHoXzPQ70J\nRzv+\r\n=i5HS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzpiFG8hN/1o4vzhjeCO6R+VDci2Ao6lTLcOkzVZPMugIhAOfmYIFj7PITrQFwUKziR0eXZeOyT0ne9PN5XmPAQd+s"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.23_1640685853955_0.8345602589176855"},"_hasShrinkwrap":false},"2.4.3-beta.24":{"name":"ecsite-form-builder","version":"2.4.3-beta.24","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"acd52f2bb979573505fdd48709577684663de6fb","_id":"ecsite-form-builder@2.4.3-beta.24","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-FRtx1CbB3VPdw2XGTAk0csin2ckI0rStUuiuoFAyq4TS8UPlHhGT61aglFSUyWapTwZ9aP/O2HpBkYbFswhOmg==","shasum":"dd7861b01322f2f51f284d44fbfb45c50d247199","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.24.tgz","fileCount":99,"unpackedSize":4354723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyuNwCRA9TVsSAnZWagAA9NcP/R1H1QkQgWqtBTp0T9ri\n9xaCnhk1G2gX82uNvG7U9fLQkI0V0T5ZwOfS48UY+T9ygxSLphEbVSbl5Va4\ncX/DpnEL1I7abA4r50LtHbAr1wJ6seuiEyuawKOiAIk6XaPdktomwdsixaFH\nUuH5iduRNpDIntm1aTJP7+nYYuJPLpnnWLybWxbVbLLsvZ6VnD8YVdrym9hf\nzVjyYoBm/2EDerS2hRlrSJqy3IyrCq9tEDbebXrnaNmupS2i1lH5Hn691dBY\nsRZH224UNz5cTKSjxoK8deowkfGxrm+bKrm6skve4STbcIQo2aFO18rF/n+S\n4SxhT7g77NHfosUW5QJgNhVQ+i805Wy3F+ElLTVuGDsC7a3OkwHUzMOGlLhg\nJ5S7UMenJPfrefzxnGmzpVY5WISN8sT+BxSES6dCQdIh4yyC4oKekf6l4c9T\npWv+KLXTxg3zAU1U7z3LleuCReyqvd6+TSwKw0T8nPUjtIk6WJBsSCjxeYQh\nM/+Ug+Qdnn3k8R6/6wx4eVSuSJ9MDWqK9EQnBe6XTolLIOt7uoSxxmEfsXin\nQwiFPOlhyTyWxZtCvNiq+RwUyHG3U8+zVNldxLEJU9FIxm7C2dhnMo6xgBBL\n8zkWGaaeZ2iSs9egHMoRWSLREkBOHBOWeIYYFkUMzhlhZxzbm+FYc+d882rw\nX8gk\r\n=dfcx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFlnfBOy3RjB/gZ9CMI84UAGE0AnADUilPzi6sbVRYoAAiEAibai4kdKpHlsvLWZBO63arVMUR3HFOgw60liGUGHEsY="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.24_1640686447978_0.7797323666601528"},"_hasShrinkwrap":false},"2.4.3-beta.25":{"name":"ecsite-form-builder","version":"2.4.3-beta.25","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"f1b6199d70da18e5bc9a29c468751f791a728cee","_id":"ecsite-form-builder@2.4.3-beta.25","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-PWZ2VzqgwC4L0YSSr7obuU2IXy1jATEhQ5Ko91Utb5mn86VyEzDx7EHsjb3Ocy3rV7llDjJhSDeU8/TRf5/g0A==","shasum":"91c5ec57ab160a6aeeaecf66fbdccca481ccfd87","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.25.tgz","fileCount":100,"unpackedSize":4358674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyuqyCRA9TVsSAnZWagAAnosP+wU+uuuiaisTSlWkRuRN\nhvkWHrmc/focmoQ41lKdjTz8j3inMsocpH3ew7DT5XAWRupqO0Iujqr8zEpi\nNMUFHUcfuuJxPH61mqhTpWjpH/JAw+ijgbTjrnipxvqLk+0FaazicqE9zVji\nW3ThQzLPelp15N7pe8+TeUPc0VrnCp4wCCdevVl3KiijN5mWp5VxVuzhvgf8\nE/F95AV5rNbSuhxVM2XjX6AZEmyYrVAcXHa/aIbmlEg7FL9ifcADrIJJn+VQ\nrWACzwBFdJnOSAkCS6wco4DKrOt0pMzxyT1T2s3YXu1gqRHF4SG5wEHUJZ/M\nlOL4XDLTr9elzsllg3w7UahpclhQ157pgbX8pOq7bfqnvG/xNDiUSzVu4+Tq\nQQSz+XENPVT7H91D5h7xKGFIoll6mSoQ4iJQFWJtfKHPKhhxirYKSf6tnS91\nDCH8jr1q5p+xRWsU5RS7b8ecIMhaSP0GrD55AD8yTHPcsmjT4XKlLPepmSNr\n2g0zqL1SlPW/5kfG2FoyQP0jsUhBso4u+4DlRq6IVK7UenVZphby5XEnw76X\npCvIrOcAN8AoMlxX3s1RzzOrvoZm7vDtd6GPinOHKZE/6NOKJ4j1e2bp0gf1\nX1QGFspRxMWnnqmeUWe3cVf+kRG4gQD6rygD68eBRNqRWcQWzfhrbEXxcwn0\nZ1Ee\r\n=vDdQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIbNyXuoaVRuV5m7piv/rPPmsHraLIXv4TkGgXqRjc1gIhAMaw/Sm02XeguSNQFzjUVZHeLzsz9YotVSCT3I5Rzjjm"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.25_1640688306817_0.9245462988608828"},"_hasShrinkwrap":false},"2.4.3-beta.26":{"name":"ecsite-form-builder","version":"2.4.3-beta.26","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"127f021878a4c5ce59c6304b559c265cca4e239a","_id":"ecsite-form-builder@2.4.3-beta.26","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-n9BrgQ+y61OanJbwuO3S2U8mFWM/qI/VDN1T9UzDL1mRdIWFvMqmV9ufQE2b2XhP2aOTAC119XtvfShuUrN41w==","shasum":"fde0690c41f0b463fe09e28612d114ff98e9f516","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.26.tgz","fileCount":99,"unpackedSize":4357867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhywSiCRA9TVsSAnZWagAAuhMQAJ54byEw/PoPa2owAnS8\n4XwlvySMm9by2nRhK38gHC3IUSM/oVwWUwVbv4uCZoCrHiDaMTuVkJmn8rDB\nRkzEct+0Uo79+5QnnDhfkhHT5cLb9zP9NjjPSmjA7dBbZTwHGS6rO6eR3xHO\nzKBO7P2F/6eux4pvQJIyfxIH65kUVMGDhFpkg5rdKYmnIc6LbKb6OAVXn+f3\nogncrV0z/A9pTwebRblsBz1GXr017svE+t4HOmteb7qpmE0fI3vQjJaJKLTF\nN/SLzFz1pV/zJHQZVDdPsGzAXJX5g2wfx/Z6yvWD0EeO1AfOoEYVHk5PGlGx\nXGItN1Evx2k7bADg19O1bzGVdJArK31dk7a3ZDCZFgEQqx7cObIA1POVBJ0P\nWg33f/+B9Fwyra2ozgRukf8fFuWIs/2J/8UBi4B6wAAErBvRNPFL0Ai5wfhc\nR8ssdQZ00QPITr9SoOv7Lao03M4GE3qJlDb3qOmwQ8Isxsw7mYxT7nhOXgyL\nTklBpsHpEnimGbaDy2YWV03kZ4psIB8If6LMWRd8So+7Xgt8rQNkDktohB78\nqHVDZY/QkLsHKq0MSa/ds8dr1LAQHQews/uW6isLgcp+3IKn4s88t4fKnu08\nG8a3bZ18NOhTarL9BSWp9qLorusIy4Daz35OoMJlGHahXqcscX9fmniHm6gv\nkvof\r\n=/M0E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXnSInUSmhZ8Ck2hfAKtg13HfYvNRNDKA8HctWGYnt/gIgfSFv63h38FFy+RC141Wmg6dr/ccj4bs6D3lpV6EygQ8="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.26_1640694946689_0.6462087184911107"},"_hasShrinkwrap":false},"2.4.3-beta.27":{"name":"ecsite-form-builder","version":"2.4.3-beta.27","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"fb41d3ee3df25740d8359528410b9b8db1f2c6f5","_id":"ecsite-form-builder@2.4.3-beta.27","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-gbDUrxB82qZtN5Fs2sEDOqbPsYryiaVMoeUl6n6yh68M1xFjiVTo3Roy+pWzwW55p9z/zZopSyaaVn8lYGNHyw==","shasum":"bf20724214c32449ae276cde908aa18fbe68f4b6","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.27.tgz","fileCount":100,"unpackedSize":4359052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyzfuCRA9TVsSAnZWagAAEB4P/38/vx/POfl/sn70zQWk\no9HBFW7ksvuEjyTEwqPU6Z329AekSq/QiaRX9oN6MRAwJ0N/rQOhK4HI3nya\nGyGKEZYlLzVaj4MMqJy5WwLcv0IgK4lttO1ScKXNhorHhpEHqu9h9hi9Jj0T\n+Ih/esS03AcFX4UZRFFrHpe1BW4GMWeK8mDl4PRKv+QpIkWrgb8zqnV1E68b\nLYFZ1ysozNjR8x+5A/iYIVH86zWbOfGbJ+OvYC07D2t3DcOHNvfk5jjX52/j\nKfA489Azjd+1krLJNVjboCyAFkwsE4I/oqlGTk4nith8heWGLfmejKvi4eK5\ndtXyXXUixZcmul44DsU2BjHU0fhqw1n1dON9LY1lekDnn0HE+P3cs2wS1uIA\nVbvb3n/NzJmuu1FQ7bPiJZ7BAmxz5neHY6xTVq74C1wjNlqssbY46XoYX4Fl\nuoQ1p6ODelFCA/sslUemYs9+f4UXKdiItiOBr4f+Kly1/lGY1bVyOxIbmpjb\nLZBaFam2bTFPxIN4gEexir7iyZ6NZM2eyvWRKLF0PsxnwO/S96XiYTcQAWrY\nnVi86JkLlixlOFfU5A2mybfZKiSvRwqw1ElzXlSm85f+n8v4d6EDk37+c8YC\nxMAkWlvtumX3BnSuVJgjehft5OV5yxe1jxdwzNb6pF0MLegFykAhTkvbc2Bc\nA2HZ\r\n=sFi1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHBDnYgqVilT8CwIa7d5MvzMrmAR6B9wTOm9KaJZMiIuAiB6z1R7eP00H7urXgJGib6y8NSibG4IvJRSRpNr6iMLUw=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.27_1640708078529_0.9367955189060484"},"_hasShrinkwrap":false},"2.4.3-beta.28":{"name":"ecsite-form-builder","version":"2.4.3-beta.28","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"fb41d3ee3df25740d8359528410b9b8db1f2c6f5","_id":"ecsite-form-builder@2.4.3-beta.28","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-IMWZzFcI5ss+emR44W/eXFyDCdX8Ia+v9JZfu6REM/5pT8EB4rqKE3xTisvhqmRBVVQx6e+jXIGIsoGNPHCPig==","shasum":"2016844c1501bbcc31a08825f59dae8240ca44d4","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.28.tgz","fileCount":100,"unpackedSize":4359123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy0/8CRA9TVsSAnZWagAAcFEQAJMFRN9dck5v2M+v2xH6\nVnHsbwf8B1HibtHomAjD5O6g0PsaFlwySbrW4/dag/7Y3CS2HAA9Yoal+YFx\nq1CNk6adFe0ksW46vy/TFmcr0HSN6E07xcmlUJPxVnQLGskVGbeInTxpRMaB\njBm6RZyg14/9ItqrHIhIemaOu7VXMiLw6px9graJWldUsfYIEcS36xRgFbsU\nHT4Yizjg0+DEJ8LIN6JMQLMWZBIx3ieEtMxT/wFoK0zHCR7wDO3k1gnT5EH/\nWVyC5zaRT1qK+/G9Gid1g849gxfxECfLGUK70l92POtkSylhB9M4NM96mawH\nvV+2KWt8SaDs0dRGfMWZgd8mF92f4VdfZ+om7kBuGFsSEe738HIh+Lj4XPRA\nuqsJ8jDyXVZnMoQ5c+ThZJm/xoKPJocbU6vaKaPcgSyTK7jXfqPBuRYO3zfm\nqrBiWDr0QknS00R2s63/IXstCNf6gGDppNdVhxWtOE1jCSHYXU96LyImBEIk\naFm2JLaTBnPTNge/fJCW+tktMC6nP98rRPIkfEjFNFB852m9w9WHsWqIgW14\nk7FahQZjDlEOr2QKndnFkemnBwWhMRA7afWOvoTLtNCMKDjuRGTkdaGjfcuA\nnJEqp78mLECmXHvqfVieYxBQtrrhoyYi5TKi+po2IMNzxJODck3xFCrRH/Pq\nWhF+\r\n=Io+I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDYzlLUlkscuEYMXS9ycq6AwZqAwyy5Xh2mAPFZDclFwIgbwkPg1b18QtS+zzeZuag44oM7CiWu3qj0TBsnU05wC8="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.28_1640714235929_0.0780206297126731"},"_hasShrinkwrap":false},"2.4.3-beta.29":{"name":"ecsite-form-builder","version":"2.4.3-beta.29","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"4f963dd31e5e48d9e2ab1fb7aed51c9e2ccbc6ef","_id":"ecsite-form-builder@2.4.3-beta.29","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-58Bc1lPHceRrwNLoIsHNDrvmgcjHnfib8r0iXQBIk5TaFKVfOrDMUTvI2rFPUciSagCmNn8fZzrNxJdJPRR5AQ==","shasum":"6a8237307b0bc3515b2f4027b565e067fe0f914d","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.29.tgz","fileCount":100,"unpackedSize":4360334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh0/r9CRA9TVsSAnZWagAAvwsP/R/GZh27baQS0lL7pONr\nEX5bZX9Jo9SCffRjfSsOP9QVkqNoxi67pMbUZNcTOQvFc5W38cQs2eVa64R1\nHBy9BzhAx36rXWpXJNxGBdydXBFgMlILiBXg28+OJopYfCgEv7Ky+CSMOLAD\nDnC0iy8A+YAxClPSYo5XOx99wT6LfpX/H5xfKlzZxKygHaUrzv9m8CrRFgua\nN7MekPcsdwM2UgTahBFBdr3Zkbw+d0qJDS5VvC0WVjyvil4xuCPkFrt5gdqH\nOYEtSFIymJGkEcl6SchkQvfZBaneXD8y/tq48s4easwIe4cBp275kVC6CcdK\nzbahIWeEDctvYINd4u93vytTwRAstVY1zWX4WZe7zNJXlGrMfu2JURGwmVbu\njRiPzwNMRvt18WExWb3BjtnMTGlooL9IPJguKP/IyRUhtzboOCeuLgUMaHRg\nRSeHwR5YBGrehPR7pct3Xc5uSkj3KDA6ESGcfYdv1XLh6xeUWTtmPADHtEfR\ncdu7uvOmM+Yv2mKtimn24PpRXpzjYi0ZsjIla8Xqs7lDsEiCaTsUcHwbdq8E\nuzzg15a1CPcmYFIerWQEac2jvmHkR6VvF3vF/4EUB2Ulll4EACS0UcJHe6ah\nQmu7wgn0OZFNFloVceykBQpyIumFZaqHQJryfAZofP3hH9nvvcKHhOsM8Dg8\ndV/a\r\n=7DAL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICXKuChf2pGFuq3X12n7z4eVgwyIIXz44th4Mgof9HtAAiBxaXSqYXaWBpSzA1jjKBREL97/vEOKkWZK/PCh9TCdXw=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.29_1641282300903_0.05621785122069678"},"_hasShrinkwrap":false},"2.4.3-beta.30":{"name":"ecsite-form-builder","version":"2.4.3-beta.30","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"c98866ad74276547ce5bf10d2aa3de25d274f194","_id":"ecsite-form-builder@2.4.3-beta.30","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-2VG5JV35vTa04ewqC918M5Zg+Ln8BDRVJQJgzTBIlzxtbEq2JMHcb7l8X/+a7pgYdmdliSeSSaPb47oEyZedBg==","shasum":"ed5e9adb85763766649c2e305cf4bac8cb9a4312","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.30.tgz","fileCount":101,"unpackedSize":4441427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1LkECRA9TVsSAnZWagAAmfwP/jCSRViwWsuysLjbGER8\nyz6RhPiOMgkFq0gizZvDVVkW79TNDMSrnvejrVebgvx8QgQCQvUeRkWJHPaJ\nQitk6CieZ2mIP01WO1qo+jncRPAXIxw465ab0eI8TtcnZCUWV3qjDHUs/kwm\n+I5Io1K8bhNtwDqGM0Kac6P2xGMvc+10g0Gzg14xuJvPogoRenue7J6LHoT7\nIUydwz9R6slP0ZdhykaLTgGhxYffEXOeAdkPPOgYsUjd9D489f4+puaA9fuY\ndnJgLGBTNqq4WJJf8K0iFxkJPyXcEGvHwkAEN8IUn+lMNqCYATrMCPS3e2mJ\nS9qVvBr5Mt45At1fsw8vaAhzMVCCfjn/sfA66kc+ypRuiGI8zyjVVx2q3Nht\nFhropYtxREy9dSM7ZGeg/TBOhPDryy+YTTcAJChqmTqM/90YWQgZDJCNVPQB\nxcHbTlBV9nlJ406UCOJJQomL4X+dHFCa3sa+TnsoLzBxVNamC2YqKzzkG84q\n1urT9gjeUEr6zsfdOd1KjWk885epHBqSOYHTMgVzuDun77vjWjE7ZRxnzMtQ\n+o8NGPv6MCtjsB6lAi5hYh2hYSrQxf2Jvx9whTEVmu5vfmowcbkV76YjywhO\ne543kzMDbSGLKGWpAOsTL4iB+xKZs8ZwrB8YcdzAes+YBdzFxUZr7TozLVVe\nxRBV\r\n=hDEV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEAk4+F7PpkxK35jTd8ZFCzlxrsgItLv0wU50tL3ZscFAiB25wvsE8NfxEtFLgrI3bJJNQaThsgi+Y7Cb4UqAXLZOg=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.30_1641330948756_0.2390496280766663"},"_hasShrinkwrap":false},"2.4.3-beta.31":{"name":"ecsite-form-builder","version":"2.4.3-beta.31","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"7de22359185afda76b7ef0752e56be06eb08be38","_id":"ecsite-form-builder@2.4.3-beta.31","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-UKTUI3DAnAc5cO5enCSmL4FqM7ltDdzWSKiyJe/nzeELP5aYN5FPQUk4Ej4r2icLvst3lcUYGl5bv6UnHhaohA==","shasum":"667ae3c8c5326a12cc0d3ef1d14e4e453aa37cbe","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.31.tgz","fileCount":101,"unpackedSize":4442589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1MQcCRA9TVsSAnZWagAANG4QAJ4vkJZhTWq3o+ZsPX2A\n/sIeYEYPsVYx25IKMCBOakaxqjjCXzzhx+bFAoD8HnLd9OtaF/Chm1SjGHHB\nDJogg43F1y6JyNwxwGFWiyqZhhsuHc33eY9c3kPd9T4KEEQ0ZUyBy+piFRE9\n8zf4+Mv9mvqWRUMMN4+rjI/f0u0N0c+GZRJLVeuw49UskfnLIfOfms/FkXQK\nT9HhD21ji+WCSz2a1x9zjlPT5gQ+59WVwKJACDXpjy8gSdEcJ/BAGUcGahll\nRGiy6HWcDCN8exc1SreWu5Qama2h5HmaMd7ARuGjYvK78np+NpjDOKNwgbk4\nNfZNjbzn7tqlRewI1+xqBfg3S2ixmHxxHUc918kH3i0D0wad4VRSoYR0sE5t\nSmZssEFAII3VInhUM3pRkjWvwQbjKugQP/I2/TioXojp7wTEFHV6A9sJTQE+\nYbFuAyS1rTorhapu0Lvrvv/7+4r7Y3vTwgatWDZYGJ9EE9IjLSxA18l1A3RW\nWFsL+Yj08hD+OhDFpR44OWXGEAMxz1lkM3Ol0wrRYbonbwIZDYeGzYzeN1nQ\nEelpVp768BxLWTyTZxyOY4tUG723YvSxgN+cbf2kY1v6AyY8Zio5pP70x5Of\nWAmr7DtlLmPUMWZqtjrPVHnYoaPHdOn1iU8Ab7a7q1Xf7kmdy20bR/13f/sO\nHqFq\r\n=8K/8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBcikFPJ44a5mtDWHIz6o0bN0wHrKRY77Zle9wPyLnnxAiBX5wQva7AqqRnWhfCyzUVH6RY0QDWJc0a8M6C3DyYJlQ=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.31_1641333788342_0.34759685210133484"},"_hasShrinkwrap":false},"2.4.3-beta.32":{"name":"ecsite-form-builder","version":"2.4.3-beta.32","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"7de22359185afda76b7ef0752e56be06eb08be38","_id":"ecsite-form-builder@2.4.3-beta.32","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Ygsn5OSbcAO6b9KIU2ap0hNijtjk6pk0CfjZDb24R2k/dwokQprzGJ8Fg/+ZMnif2vb6ao+lKiRIQ0/EBn/PZQ==","shasum":"69e1e0c2e0386a031ee028ae95e8d4d758c399f4","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.32.tgz","fileCount":101,"unpackedSize":4443164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1cOACRA9TVsSAnZWagAAelYP/i2heEoCd+L1z5HpfwBa\nhyFcGbsemEifEeRpC3VuJAF4MkEFErHGkqbzDR4oA9k2XRDdSzaopC36UBsu\netdAmZ6jcBCKSTkjqPaXbnDBpx7fsDsqnwPW37HVAZWAbndw3uI0R5/AG1p1\n9p8lnN0Sq401KlQxNqigqHsXK8GZbhcV74lZROmgCjXgD6hPmZST2onxhHHu\nbRCEil2kcnQlLqJJdh2gXYEJzPOW5ZuGttDDnE5FIFLx83y64OnIyN2Bm/RT\nLxpzhqBOBDdwdSYMcR5X5DULuQHbE4L/aqiUMZ3thFsz1yv6WRlBNbrcYK1k\nQMa8a8Dqbb7vIJnwEnHENKgFBnqFfvqSVRJPNYvvdfutZ65KWe8VMjuVNoEN\nACNDZxquTNTa5nSSdBawg+RWKhhAGFZmAWwldSzGNbv8HAVua2YgoxKQAB9c\nrYueU/U3uUQXrdmO8b81/RxlsRiCueXvrVfhhjKe7d85QON62ofB6spEhXtR\n0YO1te7OmV+T9h52n8JJblr+jqtJ5mE8b/P86SSJ0kw0tXziUWNhfmgl5r1g\nXEm/XfCfQ7zbEhikhvhDjh6P2BVs2WvLWQq7iYMIle++nKGBDOqhoOVni5CH\nLApqUiK2wtMmm0kgVmIXwOPsP+ZMJOu1B5bxZ3FvTmReYalvKfrmiLk41m8C\nttFL\r\n=TI8Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjvrdiQ+QWRiJpGBxTANNGAzP2uFmMLddS8KgdFDmbYAIhAMUo27MENIyoHglieh+AhpxmHJeKBMiVfCtVvaFGYFLB"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.32_1641399168652_0.9140791224881823"},"_hasShrinkwrap":false},"2.4.3-beta.33":{"name":"ecsite-form-builder","version":"2.4.3-beta.33","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"4b9a56f25770983e18c7cafe15f83db1832a8815","_id":"ecsite-form-builder@2.4.3-beta.33","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-e6TcGcWPxYyaxJVmFkf8ELh0h6zkmmT1ybKz55jhBHLOB8+OXALd/hb5NE37JLVTnteCUukNbgUnyKFvqxP9RA==","shasum":"f328489a44db70aef774e42bcaccaae062ce9c69","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.33.tgz","fileCount":101,"unpackedSize":4443164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1ch6CRA9TVsSAnZWagAANMYQAI1edopkY53xBzdRXJX6\n58ZytQ8PR71o+lIdxVhBj3AdfNLdXIfco21G+BkJS9aysyFKmh379aW8kFPY\nYqjPT2iNvwGL9WvOlez1A+lYLZ5k80rUVSySwlQsrS2j9cw1BNs2iXZb+ix1\nCKJURFpKoMFj8IShRjIg2UCEPli7O1AclYrJnzPTgQM8IQd6BljH7c2bpatR\nExaUcqagtT9X5296tk4NT+SvD/o96uXofws6o+LkySnL712TfIA5MoxRSyQU\nvOZxrbBrAbYV2/tk4PsbchxfDdbx3do7KyFhwcqQTzVrcMzeO3RmYvrCzLuQ\nwgHOKCnDGBcDjB9zsMPb6IVmDpUVj6bwUPJc2QwNUozi2e+cF656xARwLVW6\njIc+ngjX7Gc4v/et4CHoOm6iwK95KdHm2fN+aKPe/UBIrl+p8rPgzvRrKksC\n04uOnck5oWaseBdu3up3+eXMfDKU9lVoxY/Q0I9Us0LuRBndf4SC28zmyO9g\nrgaPgMzWGng6r156LKskzHF6KMB9FhcM+9ueEQFry4qGEg6VxfPe/m1O3UsD\nwd/yPFderNzZys/DLP8HV4j4nNGL9F4QJDxYaqQvy3OfxVk003sdgwMSSRt5\nJkGnOBmGKujAtYan3Feza10Q6oqUVvwBmZbuUBFSxgLPgME4qy6mTpBoK7Gn\nzK79\r\n=C6hp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnwoirisQmoaYW6CW8W7Wz/E3GlRIamGRiAXUqNU4DrQIhALZ5jfvpsJViTuLW4Jx1D5boqQUrM2Gu+hsFdJ2L1GId"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.33_1641400442171_0.07882025615894439"},"_hasShrinkwrap":false},"2.4.3-beta.34":{"name":"ecsite-form-builder","version":"2.4.3-beta.34","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"4b9a56f25770983e18c7cafe15f83db1832a8815","_id":"ecsite-form-builder@2.4.3-beta.34","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-XDCYSNO3DAIKWgChEDmhweNfQINRNewRsSAEBs2JiNo+FdN7IMNbLci1bZQeVtMJdZW6uj+Jh4sK9zENZU7k6w==","shasum":"a42c9e70985601d13aed18154930ff42bc83d86e","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.34.tgz","fileCount":101,"unpackedSize":4442864,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1dWlCRA9TVsSAnZWagAAJxkQAJYJsMLn31yirvJrEaMa\nAr+XXNP68q8lVEpmTF7d/oCGxz8W/3eqRpF5a4kmGqBShccPo4P/rkOhzmvQ\nZVKFUz2DHByp6fC9Zjs5KovXDYR12Fw7mUJ1kx/P9uDTP9iJX+Ix/S0RPWFr\nHpX5ElNiPDjGIt/vpm647b4UGOzsFttmsaQoKm3m0rn1GocEObLTLtKypfKA\nN38ZplZGceymgQ1qvI/9L+bvui/8mA4yvryUHOaRcX3USjTXmUve2EhPrITP\nA6CwUUFEpiDiht1aPeN0IXfVXwf/k0FXZ1xfRTV9ntSZ84NYXurP+rhqjx8A\n6dX+16lv4QplLOum+0O3nVkwqtgc8dPlg3U73SzK6kHUZGrp7Ni+mt0MrKNa\n6JnL9zIXCUtq8vF9g9VaLSWWqe4Vo5DgFokGqlS96+RpK4X2anM4VfjGK+8B\nO3jGI+gE5sOG6if2JDuOzCLwRerkJzGpNDQoBYAIOhype9J96jIpDdpllmEG\nWsAIZ90oACPRoc1O+j6PbquxI8Hsa5bS/RFOD3HZjtHgK+gwciy74orp1XDo\nYOzGEAW2niiJHO7vBM2F3sH2Jj4ScEp32NHcm4AhCrWv6onMsM2lwa3fc34Z\ngfUcAOHr8L2Rp54RBQ3/gyUmbGMfiJSxkZioBJUYzp/QWp84L1/aesLlXfLA\nNo6l\r\n=zygy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGYJRd9GUVgZvK07Uya8TfpoBxOUL096rTX7JP7aGbjpAiB/m9IsxVN9J8KLQ64824yCfJwxLBcHaLZqo8pMDMyJUw=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.34_1641403813623_0.4167161434292732"},"_hasShrinkwrap":false},"2.4.3-beta.35":{"name":"ecsite-form-builder","version":"2.4.3-beta.35","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"89db8d31d18535d374f860aee9d25f6efe81ea9a","_id":"ecsite-form-builder@2.4.3-beta.35","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-YpGkmxCBQTr2WQrNF/zytMbJnQ3Jgv3zLDDCnKyiKl7mmGQtosuJw9XdE8p5MmtZDa29O0+PLFK5cRwkrRXhbQ==","shasum":"e3470dfd77f58c246bf2e9346fcc1772b024edc9","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.35.tgz","fileCount":101,"unpackedSize":4443038,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1sh8CRA9TVsSAnZWagAA808P/3ET52252Vo8KhsNRYCk\n2lOcmHDHFTrgzq0mQxDXx/FTo+g8gvc3BjrM2F/IKa7IUNmwRb/MfuS4iumY\nHZsqd9g9YwuSohlw7NEDTmJt5U2Y3fPsHL75CkrJ3Ex+AgwJH2t8Wd4JaRcG\niZFVWHIyTitBgwnPV1SMcDk40WTBpl9CnAJximtU05lNJB5U7GRDeCXPeEtH\nIhxzvonQjG+qjaVkSgPfbOuf7wh/jUDAtHF+q/Reso7dWA4Mi6O+FTOR1VV5\ndqlnjWZYf/jBSfBaifE1HbP00wK+/zFSzls/jyk8tF+FF7XZ5ZJ8kHs2BjEy\nT1qTDDPZa70XKbr/09Y2VvJnLcAgKmQAUy5XtjCR2SPgXoKKqm1k/9wxCKIW\nopziKj1jMDrBZbX/dmb9PrhO1P/4KrTk/4GWdzKrDy4obbtA5QVBaLHDYXlA\nhyIVjq8gXh3hAXiiA2RXswwZ10MbjkrsC0/5d4nyxclI8GzUxLVRLz3GPbyJ\na6XM7FHGD7+G970q75zpblFyr84/mN60yT0zaVFLomBc7f7jw1zbntW/XUkd\n7SxzGXYGNi5lk5SEG6Iv4oDpjq0oxuR03C6mMi6gddx+IHm3gQ0jWXLv8Fin\nin+zOBh9l79zZfMogI7BPM09bNHTZANR2SxZICuyXJlYHdW/v26U0Oj4zA8P\nTCJc\r\n=Wq3w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBV8vLlG1uDmgdcGz7nyePojLR62/ragRvRxtVrTSM8GAiB2p8ylA3MDu01KTm26ukwHw85T4Dv8IvJKIeAYaY5wiQ=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.35_1641465980222_0.29583172730297136"},"_hasShrinkwrap":false},"2.4.3-beta.36":{"name":"ecsite-form-builder","version":"2.4.3-beta.36","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"89db8d31d18535d374f860aee9d25f6efe81ea9a","_id":"ecsite-form-builder@2.4.3-beta.36","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-BZLFC//d1jLLbW3FQBst4WsLiYeoQ1pXacAjt18MwFcmZQLAIkLN35QbGiJCl8rFM0zjjfcC9v/vRAJBhTybRQ==","shasum":"a29e3d96125e254cd7d62120018bb294eb0b2c05","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.36.tgz","fileCount":101,"unpackedSize":4443237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1xQxCRA9TVsSAnZWagAAGbwQAJFvKDJHpFPpcVZuU98q\n7fOtXap7I8ypb3C+53r5eJYzgyI2OgbW537iR0T6RPQOZU2TOEDmJBioYqjZ\npBzLYc2Ju0SHNLvsyr9S90AY1dNf6lngwFLSaIwMmfr5T680MOQENw+O5m84\ncqMOghkvde75GU3sQBZ0hLqNqm4xcZs0BbsOyBhPix2JlhYe799dunnacHkl\nJb4OnJoRvAWH7QqhecZA9eoz+3OVmtllpKKJwhnSivfQtuuAsYBsrDzVYoll\nV1GJ1/3Op6yMIISNSgk/22PTuNK/+M0emWP55y1iJcI4BNKZdPBlfkoKNZFR\nyzOqsNHwcA0Uj8Nk9vDcyRgx2h81A+HaGqi7IQb1JT3Skz2rQP69SkGN86vc\nm60hRx4wGi1wHsfUMD+6vkgXBGgSUb45n6w66kHmclnLYjWtmuKXTjUf9pji\n103RinPqx09HrxnjgshTUEszRtLYH9VsPgiRfYgTZDEJ2UWg3d7iLFOL8fP9\n8yd8bmXdRid7S07iNrHa5uaYe77Wk4immvVGMMGUzMYTuCuf6MV8oa8rl4wc\nfAZk5lB2ZVYatXJ2k+gKEIcRcJsuaWBCGQ3YKYAnzmdI5AG90kOgZEg1EDFL\nzTcz5cQmiVU94qgaPjPT63exe/UdulkEx4Q1jMbylSwSdQgfaGrAoAoem9ZE\nqhHh\r\n=a+tR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDp9o1Jj6mrrAGn9CRM80oFD1sJ7Sg3718EZ2uJFaLPIAIhAKh+i9hQeL2QscaqeH7dIfdMd2ahH+JI9in3+4OVuHfa"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.36_1641485361422_0.8670211913197992"},"_hasShrinkwrap":false},"2.4.3-beta.37":{"name":"ecsite-form-builder","version":"2.4.3-beta.37","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"89db8d31d18535d374f860aee9d25f6efe81ea9a","_id":"ecsite-form-builder@2.4.3-beta.37","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Pt2RxAi1MnIs1eYQtdZtlWc7PtUJqnZrIoZDxupRDsdyU9TNZ8G065+tQghVE2tDQ1jlZ9tqRBdpLX2iRYGz5w==","shasum":"bd641a08bcf811b55ca2f422ce9e33c55dbf2a6b","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.37.tgz","fileCount":101,"unpackedSize":4442974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh10CXCRA9TVsSAnZWagAAaO0QAILqSR0cnUauO1EMaDoD\nB1uuBArtDI8jVqwmhwXlUNvfaopQUqVB9IL7r31DnP1+j1F+xh45OhnryrzB\nN+Tkwz1MI/ht5O5cjS8PH7bZbVcCK5dUC3DdlrH2W6C0C+soFZHLvnAZK/7t\nQhN46/1/9fzvpl80wbDFt2UwiTrkT4s/q5hlJ4DzYV04clNwQLlzKBA2yVo8\nX/mHUPhMqbXYNv6Em+Ed1pwhe6xPdc5/eSJinheAIGo4ctCxpz8Em9LZsqHe\npFSqhhjI2AAWZ8K58DxUW/VcAIUHJ82AWqajfWaIcXJd214iR5Ry/lbJe+6q\na+Wz4OTEPNMq7sAi+8B8gTAxVCLoMzHZ4kQVNwjAa4Np4Q5YMvtpe6V6/qPS\nZLpxdTpeWHND4GtBSCDpQ1TxuFpPNQ4l67eDd/gyAykUCiWlZUZWiK8hDsoj\n0tTaY8l8oLrIeWDgAU6X6XrKrmWI+1EvzKxiFbk5lpdmEHqBTN1HuEythlt7\nSzg66EkXCzXYUAreBf1Ry5oBpVYTY9rrCZt6wrGtc6YeNxXT/LbyDqvqfhig\nADtl3MX7IyFEbYcziaCLcDmL9oJxpQNmzGKnagEYG/tTUnQlkuWz3dDOJNIR\n/3j/QvSWmgj0WvNYV2YP1tNe7OEe79WVeZS0+fZUkygpnAA7B+pNYEjzzcbK\n/ZYH\r\n=ov6r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAEMGA5mRxHAKUvPsBbBrkjGJTFkwMePdLVVjPgcnkezAiAVlzJTSQkhPMp6l2UnrF1EQ88QPd8UAF1pLagwSYoV2A=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.37_1641496727654_0.8634149763211001"},"_hasShrinkwrap":false},"2.4.3-beta.38":{"name":"ecsite-form-builder","version":"2.4.3-beta.38","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"89db8d31d18535d374f860aee9d25f6efe81ea9a","_id":"ecsite-form-builder@2.4.3-beta.38","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-PcEjlFgVHtOM4tQRfCRFtDE5wUrcNKoMTyTB/AfyxySkIbKB8zUtfHaD4HzPk0IwonD7AgkIuOAf5464oHm+Gw==","shasum":"fb27fb746be1b55db98d03bda65e7b6437bea0ee","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.38.tgz","fileCount":101,"unpackedSize":4442860,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh10elCRA9TVsSAnZWagAAwM8P/jpa3W2Xil4YLINvnmTg\nBoM2EXdS13TbYCStxRkAioaHFP8SaFi1B7SkA3n8Gt+ABN/V3dfHmaBrch+Z\niwk7BhF1lDjPUS1iwNQi1LWnZidfDkRSUw8Ts2Nkdr2LPh29PcJ/M7kiqNlV\nTpOcRoVxLIvYWnnX7zOgclaHeKdBTL9QES9fJulBhE4860/V1zpMe0NHqwZv\nrw+J4bmsJSB3HlqGudZmW7yXZpgwqCQxj1BaJS9aGjtBX5u9Eqy4JpznNNzM\n7LqWC37/ImwGhXFw8IaTmxpwrbtkAR7AC+SCvMJmbE3Ijur2qYWvd5EWzRM6\n/5i9LmWN9vL+lPJwRJkAa8Fls+XZwEype3e4V93+j3RvkU7igrJnUZAfYAuW\nw/AiA6l5nJ+tiAOSZkqDMeDAZFl9eQdFf7fn0/HiSWfdgoAzKNKkyJmQkw4g\nWdgOQ+L0rEzlOvABjEhtACEO8DASUln25Cs5mESj6OXBZrMzDmkUZhB67cWM\nnKN1zSuzen/MCBKHr+qeIhkQqsWJe3a5VK8OoAzgTMpaZr9cxpy3bfBUkXxi\nyG4570O8tiobPx3X+6VO4LgiJmyMtMM4Wiv8BYYv1gyqYkql95DT4ZnbyBO1\n8UDmQdGGGqMzqtiqiENL+ri0sQOo0R/+41E0jG9EC1YEEVKnGPjRwOwncfGm\ntrbJ\r\n=13eE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA6EjMezuONpzYxpbvT6lQuBOG5npBmze3mNj5aoj042AiA+A92H2t7+mYd9lRWoyU5umrokNmsAZYS0lcSytTvvCA=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.38_1641498532960_0.9239347391847574"},"_hasShrinkwrap":false},"2.4.3-beta.39":{"name":"ecsite-form-builder","version":"2.4.3-beta.39","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"89db8d31d18535d374f860aee9d25f6efe81ea9a","_id":"ecsite-form-builder@2.4.3-beta.39","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-gwkx9lhjXHYQwm1CRDQgsYzlJhd4G28ri5HzFoV95xRZph76X+OuLVznKYbs/7jj4tWkV515HZOrtPPHXzzDGA==","shasum":"0c91d5131dfef57ffc9f2446d7fe30ddc20f1881","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.39.tgz","fileCount":101,"unpackedSize":4443370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh10oNCRA9TVsSAnZWagAA2mwP/1C0eF2uD47qs8p22RoX\n7rsIyWjv/9fb9k3FMD0886lNSo1vggg6XSa+2fr286DkpctUY729sS81ebXc\nms2h4o6EhgsLPCytTOxxA2mTmwhxqLGICncpoKjjpmsaG/TgOqK8WnVW9oOC\njSXhkMUWoDxQ0EjpI0K0oMs9Pm54NpMWtePcJXK9iO9jpZd8z/5JrFwCTQGa\n4qNqdV8iu9vJC8oHuBj34QEpzr36oJEoe9MSbvvKl2TpzLFyDb2xeIjzkIlo\nhYDhYaABLmkLi7DqJ6mn9SbCvElSqqI4dtaWTXzIJF+WgftbmmoA94qIowZh\nEN5yGb3/eox0UIblF9yAgGoYCFjhgyZmZjHcN9zDQOZmAf4R91lDT9WWYySA\ndKmvxo81v+h5Mtmicrrcfpu35BylyfBBQn6wou9q7oSbc/6OTnK6bgVZYqnO\nsQyx89LsYJOANYjbLLW8GO8Q0RZwgF+kLuYfPJtqRyxZ8VvKyNhi2CrOPkEI\n2DB7u+jAyufyZxppKa6SK8DtAIwE6SGY7O6Yt8EAJ3HNwcUJFAgbQxjc+Ueo\nYwqqObUGk1gtsnstvLzUssL/XGmMpTiWyoHebq2hIuL4mpwg/0HJMgbi81uB\nPV1LaAeEVmBxJi0gCI1xPwJV56fnUKZgJ21L4X+CvxSKC2o9HaJN6MvPZXSg\nw/8M\r\n=3pR0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZ8mHcsFBCEVDSModc09SNSh8OZ1wNzoqkaML4mGAxNwIhAPQugdLzB2JT8UIrlT0niO+00G1cT3UGUlBKU3W+rQaD"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.39_1641499149050_0.7390688726314198"},"_hasShrinkwrap":false},"2.4.3-beta.40":{"name":"ecsite-form-builder","version":"2.4.3-beta.40","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"89db8d31d18535d374f860aee9d25f6efe81ea9a","_id":"ecsite-form-builder@2.4.3-beta.40","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-9JiWklWM1NVqpM9KRW5zXpwdDRB+Ka10BWHi9y7RiSxHmNF13d8Mhmy1FJ1itKHszfflVRNSBWhojL+nxKdv5w==","shasum":"353762f6342e22b26c6143cf6f6939f6d6184ed7","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.40.tgz","fileCount":101,"unpackedSize":4443306,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh11LFCRA9TVsSAnZWagAA7a4P+gP76qlEjV7XtPcglbZN\nuwKk/xtCwM2321ohKQ60veD1d8V8Gab6+9QlXHRia39GugY6z7VNtuSma2Rf\n3AK1UparYTXQXk4Hb1QHihGW5IeSKw/crvHPqSjsR73WVnaJGfrSx956Lw9i\n1xJKprp9S979ftzjtdOH4tQCR7itgdywQ2W3RynA1QyBYDIJHCQkSmDOtk0n\ndXeNbCiCWMLqNYy+Znfg9OeoiXlCF2fLvT9cYirzT0hGECWmok+MeA3cdwoD\nQyfdLq/SFTQE6ZnLzlD52oPUU2+vz1xF0sBSMBdSdrEX1xW90/4Ein+BzaCl\ngQwb/+301Fj6IUqjK88ujEs0E8d6/w7qS1ljVtHn2hGkw1Qt1Q2qcZHB/Euf\nBTiFr9OPmPV3u6S7mGnAy53dsBSdMG+gLAu+Zrf9qKEN7kaOnNwcVfw4wBMT\nc1uMFZXjmzCB5gEUOVkUagW9XkE4APpsX24PS4iad7VPemgivRyQANfurn4m\nifgQkwhy3xC7VW7hBXVUBbnbRPJPnFVtmW+ll7ppM8OQdWgZKAPcGyCi7kSi\nrmVudVa0Gy4i7qUHoXgKhIrcS3RPz2fBi/eoiRY2XsN1sidFxlVVM8jQkZBS\nNDyp9MTZLYd+bQ9nIBBcI8bcey11af7a5/Gj+xmF2bp098RNvQFsMgIFG78y\nGMrV\r\n=E8NA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDL9I698+MMMAW4h59/6m4TWbqyfW2X0oM/366CYLbAsAIhAP9f4R4/sRvUAvoI1RjykHderzyZw7SOfQf9Ef0YAsSP"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.40_1641501381125_0.595027221313716"},"_hasShrinkwrap":false},"2.4.3-beta.41":{"name":"ecsite-form-builder","version":"2.4.3-beta.41","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"89db8d31d18535d374f860aee9d25f6efe81ea9a","_id":"ecsite-form-builder@2.4.3-beta.41","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Cctiy/OycoYoQtdcu1Jm0BFthBFnz2UxLNiw7cRPML0t+pxr7awYnwL8RSR3lRz6dS32WXZRY+IvOxeIY7gpqA==","shasum":"4c9b8487740a8833938753c00792a83152e19f02","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.41.tgz","fileCount":101,"unpackedSize":4443529,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh11qjCRA9TVsSAnZWagAAMv4P/A3PNYBsyzsW5Yq8G3Z5\nJcjN9RoKtMdXjJD2mZG4RcyVx4hMYLJn4fAYxOF4zm2oyw2YQ5RKAfE+N8xe\nEI25W7Ou8YyXt5TI7UHExE70+Ct7MK0Z5NJRDPT4BTD0hOm8o5yQnds0v5dU\nYHiJ4tNz75corG+Fs9LWwVCCGV9ctdEgPxpatXYQ7QI3PXCkiJiUnDEn3wqv\nSoVD0ibJ+IgFxOyU/Tp1WmoqBx5tpNp8sexPuLQb4M0MzvysfDZ4RU/Hj1xJ\nmSNXvWbMCaI0LoID+KXQQI9EUktEZTUsSIdXIzm+mMSPh3dyuc1MN+AiG9qA\ndtABfyIU9AR0XUefPavB5n+1tNZi5sUAoxLoGIYiiSLHbJlZaa048X9ma62O\nGM7VZrgnU4SV0xKLUM6qy6LK0+wP2WtfDofw+/FqpIVgO/bNoXuNmDO779Tv\nxPkT2pDyTgGquiUKEzTcYcXWmy2E1m9WwMn1OcaLrIpvIBtTq6yoTNcnuXm7\n3tqATOATI2XKCaWpnXVlCAiUf91kgvP5r/ZylYuhXgpiE4RZhNGoAbRzXLzk\nzXiosO30TEfe/q5e4lQ1xzgujcugn5+RJLCNLTo0Epw8VEc5klZo86QzeZHD\n66JCLA0zsgUh4rXM0K2serdGIo/aMSM+cq0h0gqP9GUBczbbz8rb+VYN0hOB\nV/Vt\r\n=41y9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICLguwY7BIfl9aJwu14FQLSDrxf4yOwebehmlF5d2ideAiAXIZvaKZijHwuhx5ko0DggalQoRflRquB7aQx5J9fWmw=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.41_1641503395430_0.807977660903676"},"_hasShrinkwrap":false},"2.4.3-beta.42":{"name":"ecsite-form-builder","version":"2.4.3-beta.42","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"89db8d31d18535d374f860aee9d25f6efe81ea9a","_id":"ecsite-form-builder@2.4.3-beta.42","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-k1We7nF4kyRuh/hn8Mbf8qbB0HGoXRBVwQqs8mvrb9A0rMkhMbslu+UrhQZg5rg7wPDyumh/xdwhY6rL0dA7Gw==","shasum":"4d35b0ec64688a941f6c598189dfa7136bd4755c","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.42.tgz","fileCount":101,"unpackedSize":4443790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1199CRA9TVsSAnZWagAAoboP/1p1crxZTQ5q55Jcj//U\nK6ctdp0HFGToTbqGZLrPl7eFZ1dgSkLmT780oMDM3i2+Uhgoqx7545anS48V\nMi2OonIsjqbB8ZhR/zV3mi1gE7r6yt5jVzjyPHsNIIibMce4O198cPKOfmb8\nTJEGs1L6JA6voxSaWEVgtFBIZngrPXUTGXtZDNE1vNPj/LeRKzCB/6/+/1Rx\nzvNLQivhdJTKXeNfU1t5Vo252LKM8gda6XpqRDsBGsvTTU+yz1sp1Wosm1Bi\nwlu1iuyKB7MQ5/jcz9x0/NulYVoIx/As5UWzKP5xSqldlo5lVYAXLAyN6KGl\n6pG0Ba3e3UEZhxPls3tat548QmBDyjk25eNotMvTa7aNapOynNwS7Q8AfarU\nd1OU2pb6XLaNDOZB38X8GVU4Ibe/G3Y/iRJhtqJkWeq3zjf0l4LraD5v2zGC\nvbuTasSjz2Tov5/RbcZoqonskxBi416ocEp1oQ87fAdjBWFtnUJMq4MAKOK4\nVU6KJmznDtEEEfF+jb+61tLAfuXjQ1+Qk04fNBWUsBWKftZ6K78nRLOIofym\n9poQibyzvVQU7B01AwWFbZ0IhyCyvzFgMIi10Fq1Rx3aHPP8/ZbxEJtCtPpE\nzHZifSD1c8PRv2TiZX0N3HPUzNG0dvIB+t4gk9cUe+GQzZIEW65+Fum+J16y\nfYrC\r\n=1lxS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDuHEGECtF5Y07A0cSLxdegTgELHRxUOVfCToFtfa3EpgIgbliPtSL6CxQ9BeY5iObQGod1xXQZy4VrwI10Y75L7JQ="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.42_1641504637040_0.25446943536562827"},"_hasShrinkwrap":false},"2.4.3-beta.43":{"name":"ecsite-form-builder","version":"2.4.3-beta.43","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"89db8d31d18535d374f860aee9d25f6efe81ea9a","_id":"ecsite-form-builder@2.4.3-beta.43","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-MqFJjd6Dp+4V1NHqe8rlhpQ+Oi3dl8cyfrlJ3djtEEB57QuF0mKPCAP+bY0CqYgpTtZMLe/SQ42CXryWooRcGw==","shasum":"788c23782005d2f2d3221977445ed15bfce69be4","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.43.tgz","fileCount":101,"unpackedSize":4443797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh12MvCRA9TVsSAnZWagAA7esP/0687MCp48VfuYl1VXx7\n8lvWDBLWk63oNRE8S2S8bh3KfAbDICav+fphVSns/EUitPuVIfllK2LCWSSH\n3taMi03va9TeX5wQY0nAPTWQ/9KZCOhD5YYAy+5nM2ub2Lxc1IUW6MOKBqZh\nL/CyWNykii8EOOwrHelFNP7bbP64fzErL9N2lkpn931eeJJi6twFLvYnEZuA\n5jIwWVDec4m0cxzJqSLiEMzqWJW/EcUEGIb3QCvl1UFkjyyYM9ZgsavQmaDY\n4xTBaj8AEeeGM3gbeK6GlGstet6MtqUrL9ObFIpI73HMwykyvT2QmtME5Wd9\ngYOW6Um/uBPKA5KejCLd58R+JNodZCeQ3E8HW3woRz81SfC/n7muxcXETJP5\nETayv2k+QN+B8wbICt32rQRxoW2wKYmHYW6aQ70VExUSzOpPp3+yIhCXXGi7\nJOnMQoXWYpkmJb1culQTpnv0oVflQ18QhSqLaghKBaS19ftMwIYNCP8kjeml\ny0MKBwWUxiqYzFflunwU0AYBweUzXwvB23XrzA63GzmTHg1uWjZTRMijg/Gv\ng+oFooOnrykjYzERHzQhBtMC9ep8xSjJvBGLEqeh8NdEFu6xChR/yCTnWz+Z\nmKUwwEAshDKOGknooibn4zWS0m/+GOHgz11yOSM9Lntj77QDrOuiZWWgnkcx\n5s6T\r\n=vdBx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkysaXeizIS0gZRqAC6JbB75dP2jUISWUAP/8D9AyWvQIgOH7GFQbiS+0Q0vEMIntdxgy4mYvruJDYSMRo9c5XSvM="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.43_1641505583203_0.7692553440596583"},"_hasShrinkwrap":false},"2.4.3-beta.44":{"name":"ecsite-form-builder","version":"2.4.3-beta.44","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"89db8d31d18535d374f860aee9d25f6efe81ea9a","_id":"ecsite-form-builder@2.4.3-beta.44","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-M6Z5F3hFHa1bm0+9onUt5FbZTQ9vbNSJZ8rdMV4Nt7uTz2UCgGuazpju+O9FPRJbsQRWDBoIjLYUIA/LX9EQMg==","shasum":"0617a26085944b157b9deca2cc9a2f205b16866a","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.44.tgz","fileCount":101,"unpackedSize":4443797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh12XECRA9TVsSAnZWagAAt5QQAI6tMtlG2s+fEwA9JqLt\nNs5O39LbC7oKmSz72Eq96WwBpdEH4OtQnwpBruJaCKe2ndzpHDU6FXgeB4Ss\nUsYLQZozzWPCkhhA+jE4ndLQAdObHLDJFHP5YcjJ8oP98LLVvUdDqgZhUA17\nLGW5wsKcmJhg0Nl1Fh0VdREz0svnWBaSb6sfruC4aDwzab2HEFVBEAr8S8fE\nrVDjYTnf+UIU/gVESs8+YfE92Fbs2KFtvzkWdL+qrSSmMyflsYsdmZ1XTAMZ\nv1gibedVh5yixAk+OpWGTEAAea/Cu2R7OuVL3HpFWeWrN4lH3KYYcRRK/96d\nek61DbeZKXPX0EPBnWUgq7OtPhgylAwy+PWrTw2ItYTScH1nMsa5bwTl43LN\nDeSJQA+S5xY6rvfHPF8d24/zUXJzm31sWTDimNr7JwdtIf3nxqzkPFvJCc5I\nNmUiYquiLD5zOp9qZxa02u54T8rTFyPbtotTGyhF5HPcOX/gf58C2aPs8d7H\nV8oql04MqFSOw0jaJ0E+0Yaqs5wOQGopH4c2hp/Wx0JkeW8jE/Jw51G+I+OA\n5wd6Qgfm+rZLnhjcrtqnSSzb1B1DSxRTpV2ZFaWbAybnzk2dBMcSVOmAt4rv\nA58dAntB1QnFFQFlyGQtVKena9BXsMwk6lpQ7rldLqYgDTWKD4XCLPiQsBgU\nhNci\r\n=5xOX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEE3cGKL8wCNAdwq0F4CbDtjpEoQgFED22Smn1ZWY8ZQIgFCcEiOHlPtnEA+6dke4p6quTtfAdRpGYKm3MsHnJ4Ts="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.44_1641506244483_0.13014346504122032"},"_hasShrinkwrap":false},"2.4.3-beta.45":{"name":"ecsite-form-builder","version":"2.4.3-beta.45","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"89db8d31d18535d374f860aee9d25f6efe81ea9a","_id":"ecsite-form-builder@2.4.3-beta.45","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-L2hHgLCntRDxQCNgEpQTxQP59di8fB/Fxvyf9iiy4xsHThLwvdeLzQpSolLF8Ujk99R0DfazmKG9zy2CCiupyA==","shasum":"f8f6070c0b6f89680ada7dfc7138cb1d45a4632a","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.45.tgz","fileCount":101,"unpackedSize":4443766,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh12YVCRA9TVsSAnZWagAAsL8QAIffERbfcSoSVepv24ia\nn3uTewmcL7EZRBQ19mHuTpA0gi4nAYRS7BrZavLr1dvbhCS7yabBvMRT6vNR\nTeUr1VTXbIBIj+sIuCB07uYQZwhjob+RI6qi2e6s7K42k2Ldl2icILKgdLlj\n9uaBhcBBUlMBxjisJtOQgNaFgK7Ck34GJ99dGxyPwwMl/vWjRDyO69lN83ns\nu32jUOboZx7B4qxKxgQaAoDYboORWdEnhVqqhlSKUpDjc3ns8o7GRbSzaD9e\nrm3Qas6nMpsprfxnLLrLpKxcv9/A5Seg3gpFNE6/BebV4yHO+ic7qyFhpMhO\nOV1V+fescgfw6/cAqiOfDX/hTZrgKoY1wW83nXctvxnMCllUvzuSEeu+SSxG\ntWCQ8Tm8iuM8btV/argm1g+9oTA3XuO+yiqA8+tsRtYr22A4wXjk7WaXMDy6\nTpQstwxOdVnr+MUBrgneaTfoXVmE1rABPBNthj3EmK4N/7aKOkCso3oqf23A\nVzXB9EKYT7rMRruAmQ5A7Ig0jx4h90AcpjcGkuQBLlcfTlvy/rqnpL1xLC9X\nSch1nJO2/Nr+rBNQiqmeULMpIEoN+kwLhgo0GdsdqZp/QSCooj/4icjvLgkX\nY8In/y2+d8RFTAU27Hnt0wforYXFXHPecgllJSOc9ICWE1sOWp3QtUnAKsqc\nlVVA\r\n=cAYy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+EvB1w67s5VS+ZhYxGhPRTkQ0yO5mIJW7+nT1fOKoqwIgZHXZgO9XnUkildbyMr8vT20iXP9AjcsBCGrDc8Fw87Y="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.45_1641506325148_0.8009165375927778"},"_hasShrinkwrap":false},"2.4.3-beta.46":{"name":"ecsite-form-builder","version":"2.4.3-beta.46","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"78a921575ab82154c026112479a73c56a217a578","_id":"ecsite-form-builder@2.4.3-beta.46","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-zbnAgfaLCPGa/5d97RpvOQbmkn26LXenpGH+ivGU3ekE7x1YNb9O9FkfE5+Q4Oc57hkbcL+qofLZL4ax60XNMw==","shasum":"69c2e47eec358df6072acc2d03050ade3decf7bd","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.46.tgz","fileCount":101,"unpackedSize":4445058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2GTMCRA9TVsSAnZWagAAI3IQAIqb51ZlD8TTDunY/dWB\nYbkoJa0nJzv+3+PF+g2FOCPUAZaSEscqpLzA/ItkZqkUuQq5XLen9O2kB2qF\nAF3F/VIe47FJTtxKiSaa89VGMkboOYEYV59YNL+Uq5EHoQPxHhnQR8P08Ce2\nCgi2AfDfCr1dVb5LuzmWGq9S4VeAYjjQmG7gmcN0flgR2Ss6KnD5bQexJdZV\nd6b5O3K5y4tvcDF3N2+Y8R+RxyR6dJPCyQ8GVaCw5PXxAq4wvZhTyqxYZjBh\n4iAS/Sje3/nMLpoqYQJeudk9QT/srJ57fESwkTrn9+6pXuKmh1xzN7FFXDgN\nDd0TI2pJtZjs3M+P+bkRYhbUB/mQYVTFXEvRE9KPEZJU1u+0pH4fVdy2pkey\ndnUO/xF5l81AkQYZVK7SQqESe2rInHNPnwq5pRIcq+5FFz3kQEmWd45Jelxj\nYdqmXBsdtfcuPdwGQBujCVcfDxXsL7Gkidb4Kk90bLbPR/GdOAgpJ4WsshMT\npJWtzwNsJvLVQ7VavV1nDBLiwG1sx8w8K00RZSte217zYfwEpiuuK3JShlsQ\nZ3GYFDYQrxZmUdNAD6iFGoIQBRObr5pf8tF695zjgIQXagduRZEccG2DTgdd\n4PlFXlP2ZxgUR3CQltunl7ITmwOFDaP4YE7QuO7GSbE8JWfg6vsm+56spzey\nEzkc\r\n=49ER\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDxVcSHK2IdwbfuP2aECMkPDlPf2WR8+XeReErRVKUYQIgYzj0esz6bTgAYrGnIUkXR1SalrhzXU+PqOqE0m3RRMg="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.46_1641571532365_0.8753351973624421"},"_hasShrinkwrap":false},"2.4.3-beta.47":{"name":"ecsite-form-builder","version":"2.4.3-beta.47","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"c145894f6bfc4b4f063e4b5fde028c80d6111c51","_id":"ecsite-form-builder@2.4.3-beta.47","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-etTpasDKbDUsot67aLXQUrapeUksfVtEWZGoRajUBwV9Xsr/9uPQbF2XUo8S0LFD9/lY9TaRfTZL94Ih3CNDmQ==","shasum":"0978b5bd14ab39d54be594d3944929a748bbcc3a","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.47.tgz","fileCount":101,"unpackedSize":4446581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3CFeCRA9TVsSAnZWagAAS1oQAIzuSPw4EBiXqiw0gkwG\nZF5uWOfxp3zX6C9/jmiYP33tT5ln3Hy+6tSfF1VCkqyG5nn4ZeZ7Si0IcyjG\n69O4zpgWrJMfH566LqI2uPwzpSs3sZIn8NFYY8+W4wdHdjg9oNcGh1VXM48m\nsK82dsUi5FH9LhzmdVhHI9qYrr9o2GLNAn9N4tNX09ZTqyxCE5RMnICfZiuQ\nUl9DQT24LZBAxXlRkEs6YVAITXWOPVasOykLMIW8UItPX/ynW+q5qvNICY6S\n6Jflz9j1Z5Rw+ioYGDxcMaeGjKgeAoKtE/LvTTT0CwSbdDE7Yn9xgMMu58Cw\nLIvtPxnJSU4qBhDt+sUzFtmLel4e5uEcsiwOrYo10vayD8kfIlrQ8ceq6OSz\nEnsacFr1Z2DHNtAe1GuV4xlbX2xXeZigg1oiD8AW03zkIQ35m8b9Nw4e5Vo1\nevrDHt/Eo9Oe+PPXrLHSfZp3Wq+gHgJBGRX5daz7Fl5gJpmEV/w166qdNRy+\nT+8QDH3yBeMWbQJiUBSOLNQv+Bqia3wZyxRVig9tYgrJ7l8H3DVA5dDouet0\nulwJFpH4ybTNPPlO2a42nETnir4GCkkLPg3QjoViI7YlDw/cUHLnClPwphkr\nsxZK0n14gSdE8OGlNIHKToTNgmimW/3C4DlyaBFCDsyr7E5nv2VgBlTJ61Hv\ncqIo\r\n=Y6HK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID0VE+XPpsCS1gyuRs+NMfkf7p/f7Aoa6igmP6bF+qw4AiEAjqo/LSVeKTkM4Eq82+I6ukbZa+M2nlqIBxPmpkPMeM4="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.47_1641816413972_0.29167126570121593"},"_hasShrinkwrap":false},"2.4.3-beta.48":{"name":"ecsite-form-builder","version":"2.4.3-beta.48","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n","readmeFilename":"README.md","gitHead":"c7736157db328379cf821ecde44a2d028464313f","_id":"ecsite-form-builder@2.4.3-beta.48","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-OSRTbSoxDCjGF6xJdu47zqXCTYmDuD+N1nRbhnqwxf78GIJpYVwCY9xFp9l4bTcpy0TVpWi0ucS3drOBKutnVg==","shasum":"a72659d5cdc854ac757e30d9781f9a5463b9adaf","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.48.tgz","fileCount":103,"unpackedSize":4453916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3rEKCRA9TVsSAnZWagAAs4MP/Awapxlqz17u/jQVmrDh\nhNHFYKbGdeyrF6xkiC93p7VVsN3k2yOhPQn18FTpone+9NY/8/Mzf+9RKiqB\nRRasygXTn6NJNCysZQPMEGQDMTEaiIHlbEu1ADap0GFWGlgzwwqpTjSoOCqK\nWVNWkkZBnHH9sv0c7zIDuzMUPk45n+AJ8nxyQqMWltjBTACd9AYMU5EleYdf\n9IzljyVZA2wwGmY/5T5KNrJ3mHzh8i31zXdbk5Zr4yQOvwtTvC9MC6B773+S\ngoRECVlgpYqsAe+krNAg4iRpN6vktEfQ6ersDc6OtMJIgGDTqkZreHDOZyxe\nwGrSK5zvqrFp9oVOYtp+zH4RqiQQSWtsaAyiJAFvg2bcLFaE97isldrpR2Ks\nSNr+l/9znQHuCS4+32FnszmUsXkshvQrUp4XsWsS2eHc56mGBsb3GYNIlhAe\nr0URe4b0KqPl1t+uesfzuHzzTUGm6PCr7MwnshvkKo8331zWnk1/c0m1hrix\nb1SJW9nR5iUaicR8ijFFVzOn8EUNk3WuwyICix4eImO0/Z18bGI7NSLXi9NC\nSG/PqDsNGbyqYEVEAMh+yrE0h3CbPnSn+++eUd0dJfvvAWXqyKEfGebxgj6P\nUmTpdaBq2WDGezKKlpgUBfUjmF2Dzr+wnhcROHcEsPLHIQ6JN5P0ceNLeoXx\nLqU9\r\n=VP/q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICnP1k38OtgSF7ruX3i5dbXoCnb8sGgt1da7fydf0X4DAiEAuISUCmbTMPRaMDMIpnt7g3s2NFEPt34NdhNQPWP+dGs="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.48_1641984265903_0.63704014257403"},"_hasShrinkwrap":false},"2.4.3-beta.49":{"name":"ecsite-form-builder","version":"2.4.3-beta.49","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"4a817452710d9056b0fc56b52163956692f67fb3","_id":"ecsite-form-builder@2.4.3-beta.49","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-E54CvUoWppqrb+jcg09yYjFMNhGjRjIpPxDosmDf5yIN0TE/i3ftMhIibFPaITycGhtip3Os9CKmmeyHhU5cEA==","shasum":"01e45014e1fe23c322a3a512ea06b18a78cd31cf","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.49.tgz","fileCount":104,"unpackedSize":4456562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6OpTCRA9TVsSAnZWagAAjjAP/14L1MiD+uESmfV8j4yy\nXpBzbkkvbmh1X0wXDHHYj4v2Cuo14yExKNpKO0wGm+SVpxkNg6KtW6b/CzXd\n4Ac/of25Hcy5EKn5aeheBgdR3HfkTMrmXZVBYwH5lMhlNcryP0GeflMxEcId\n1wgg2PqEhbUNnF3ZABFMXZjyHmPL5BMDspGVqgavs1MUqcvtdx4HAqVnMdCp\nqYBF0pkqhVySue+CCnS/qt0e42ZKWbJgU5sHAF7bkGlCbJomxJzmhAVZf11s\nRX8oNpelXqH08iFwi67bc7pmiqmNTXswqpVc6uleCLqvFeUhCnSdZrWPXKuo\nJBVO7abo+EzNKYRs5kCbgGrnG+kMQC413TuTb1tWcSUOjXtGdSXv45R6B3Kc\nF3QtOr4G2nH4G+0vfxFKMy47O4Muu6u5ysaj/EFQkpKHidTAwqX9/aPkyjJ9\nvgmHfaI/i9+37s8YbqMdjM9wlJoBnoUpGXD0bJ//fHT+MZZ8pdXCghPV+tJA\nDy2gta5vz+RMtQFD0OlcRgv49i8Xz1noBTHqJqQ/frtkKkBaKqzX128zGt+L\nOMCAroU5D3WEHNUzGhh7Y8msBqfhmURulJxrQ7T1QH4+UiYbNJI13vu5tnN6\n2wjsSZXSYcDyTZdb/LqS6ozjxmxWyRFgZnMztDcII8rO5VKmJ8eRnE3pKB30\nHVYd\r\n=xGAe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRGlUlmlKRgktPp/hLUJbtsotJ3vHuU1QU3OAXVGhAAwIgOhOEVhv957hKZ2OSqpfrprUCEO3Yvesl9UNI3a9Das8="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.49_1642654290887_0.40779945019355157"},"_hasShrinkwrap":false},"2.4.3-beta.50":{"name":"ecsite-form-builder","version":"2.4.3-beta.50","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"a4a9334493c433ce80808b8badb1210dd8ab898d","_id":"ecsite-form-builder@2.4.3-beta.50","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-+1KGpH4IgmZ1vabn0zBQLI1Tb8AhXRlRr9rjqIjJQ76RswMqYAQbScrfRFJqxt6rjhbXU0mpeDLj1GMWgzx2Tg==","shasum":"b7de069ee7daf52ca8171b694ab5aa8cad1a3870","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.50.tgz","fileCount":103,"unpackedSize":4456135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6SnzCRA9TVsSAnZWagAAvgsP/3RCezBpKbt2BwD3Le9k\nl9IIx4onYk1B6P7MnzXfL1osy15UYchuB2SzYN48gAeouryOL/3Ysvt56u/x\nnIxYPXWpwb5l/qz0VFIF/9ReCek7HbuHgEV/tYCglcbEihpTTVyLyVT7KjMD\nAmakVZ/eAGkDv8I540I3l1IdzYV9W3dE44UQxsNurPnYx/X1zsTpIrS5gE87\nCzRA0zT6KX5nM2XA19iARWxYOX+zJ6+yTt1bI4dNojhAsfWlVa3/NeS/K1zH\n+r6zB+3+z1Va1Gr2h+H+z+AL/OuWGxaJnk5rywcRLuJkBvGCekH/HI2NLZId\ndoZicdXPCwgz2Bjv0Y3LEYOujf2Z3rio1HWR5aTmE6d3pSQQux+UKhCWMrbT\nJTuvT2WKDCEVSVjGUi047H4J2ynxfi4nuhG9RANmfthGsoA7BJH8JHSb+XKt\n6L/E2FdiM2kPEvQax/+A6oL6fs+9EI8h2vNyEwnGluhOB9CICP+arCJBJfhq\n5Fxt5lCD0ZysjDwNekJ65EKZC9zsngES0Mg5WUXfH9kgvBNuhFAs7hxCJzBU\n+4VDEXspQKBX1TbD/ZoTEhBTqm3nnuotrHrOAKPu+CwZ8w34HQKrSP2S/UT9\n9es3p2YR0va8lZxbM8EfojCP5KLj+uBtp0naXteKGUtAGiXhaD78G6eC9RLy\nXKtp\r\n=PCgA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQFEdEI/fyySfoUIddFUUUtDzS7E6eor4nzkTvnApWPAIhAIyL2xeMS/JvNNgxuqUyHlj7N23ixAWrLmSy1mbkrxgT"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.50_1642670579153_0.716856811968307"},"_hasShrinkwrap":false},"2.4.3-beta.51":{"name":"ecsite-form-builder","version":"2.4.3-beta.51","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"e3213a6560da6f09ae0129f7dd6b2ac7dfdcb991","_id":"ecsite-form-builder@2.4.3-beta.51","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-lATj9hBPfjai9AaCj2c99pAoxe247QgVvGFqQ6l0oLolwKc2A0XyOF/zanMEiqrAulEqJHDWfuu+NS/YdBPtDg==","shasum":"cdbfaba930c91ce717f77d03a3377c1c48221dab","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.51.tgz","fileCount":103,"unpackedSize":4455759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6SypCRA9TVsSAnZWagAAkRcP/3LqFWxNOVatTfESPJwc\n+CGgqI4+gYiCcoGqYdUtoJA5PVA9COPRRkB1g9jCgiJbJRRH4A3i0NzA5Met\n4ZCGRyDMMcv3XTs1ZqopHasRzTQaHU5xSx94GJgKFOcIB+KnClAq5ehpkeBZ\n0EEpIv5RprKzgLMsvCmiF4e/ZmcvW5qgCeiaoQDF75LXETM9oecB5AhJBGyy\nzk0PsY2aQJfUkq4kFriTwUvfjeKjW/lbWzXHF8O/WV5Kl08LxvU1RXAC3966\nfqi+97nyXdB7QrsLu3u+cYd4HE2/R4SU7Rq7wBvTYGO6Nxr+CX4b9/BBN++F\nq7cvWUWegBAlCWtJVcYMvgkdVJjAcow4b7sfzf+d5Xb2qD2dgxxYv9fLdPlH\nmGFJOjrBkcvYQyHJsuGVF6TZbUEN4uJ3rXQCxVdN1mlJlcVxDt1lMHWrv7mF\nllP/QAmx2gyeFhhkRybZ+9J+uBL8nFdcwsHLYMYORVlbaidcTuKh0xxfi08I\nXqwSa2k1S6cpX5nXHWogyZwUdciikHmksJCKvrkRMPiU9TvXjBYFeIh9StSp\nVDdGTE5f85FklZfanu9g+2FJVBGef1T89fBHmtemBLKWiMYDW/UC+eSbw9SE\nuux8PRgPnYABwAZ5hkrjIjwajRZrUoaYbojUpqRH9flyAKlSwwzdTbv3ov1F\nYJFG\r\n=foyb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA+uC3EYi5WxUny3zwWTDUNNTzCVj1gkCxiTplW7VmaiAiARoBKrcMTl8cHM2FLgjwFSGyOiAoYs0L7UV9Stly/WgQ=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.51_1642671273191_0.12507582127112538"},"_hasShrinkwrap":false},"2.4.3-beta.52":{"name":"ecsite-form-builder","version":"2.4.3-beta.52","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"c771413c5099c95431a79e9a86bd62155bdc5383","_id":"ecsite-form-builder@2.4.3-beta.52","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-YZ0SFgCMJPlTFZrmgK1/loDdbmE+cb3JnjuyrdPH+BODbc6LIfzVnCvX2CAuIHjAAlZPzjL7Mwu1aAT3KEM0zw==","shasum":"4b62d83e1f4651e1aac19a2057ad66fdaaa7e3ec","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.52.tgz","fileCount":103,"unpackedSize":4456243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6mJcCRA9TVsSAnZWagAA+3UP+gLGk9g7ooJJw8VXTPku\nOL7C1BF7ySGoD8vS47KhukDtnnXqTof14CcB0VQ65jt9WsxR65cMZc8G29t8\n9vSdmjPyc0QVZN03TI/XwT9aTBBzYNt/IT7mNz2XyBuYjIO8iX+2jFNaluYi\nkWhPruRFJ87bqn337ngfY1xhDnZfgINxTT/LiiuWU/8cgyhEgMJdpYAzYf31\npkjs3UbiElMCbCfkAnUlvaOl69zqlDg6EtYAUyKWYjQLnujXAyunfcgZNd0X\nvlI2oW0RYEq0aHmz14qy7OglRyL2LNX36jQEj+F5Jvgq8of3jwsCHFEqE019\nYgBXlX98jfPxAtKftu5A/zrQuZ3bBDWRyKBRndhofgEJ7VVJeyMc5cVwYz0G\nCKiWOezTAaUdbbxsLBcsuApjo+E3G6h22r0p1VNoEhhtRp6mQbNQXE/RSNL+\nfRNo4IbESyLvadJ1KpDobfvGXxIHncvGOg9pmysOZDqQlehV+4SyZNO7wln9\njB41bCGlMaNomoFffaeDRFnpNhAE5S0DCuWAQiZ2fHy+slLdnugn227xkQqZ\na8dVXERsPTBjXONBIas69Df2Ac88bhl1AWdmTupq11rzfS+7VBmkIh99JwAX\nWZ6zUW9qIrI9jxqkXwFh0yPEDvYHzwzCfNP9QfSaqv/jaF6A2esyVzaJKFWx\nzIjh\r\n=nafi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCSX4g0oHWKTpTECv1TJP2WyklrotnbRXJBZezzFU+pAIhAPcOOwQkINiHsq4c7gmYiV96zEuvEID2TNCFPfWY2dVk"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.52_1642750555992_0.2632686322924185"},"_hasShrinkwrap":false},"2.4.3-beta.53":{"name":"ecsite-form-builder","version":"2.4.3-beta.53","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.5","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"8135bc52c2174c0c1eeb4f94739acdec1ccd36ed","_id":"ecsite-form-builder@2.4.3-beta.53","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-u6o5Bl5OBP8sQXeibMi8IbUCF0Hts6RM1tZXwVzpu21jbjInUS2DF3pWp2ZLvOgNUkPGJx1rLov9tU69kR2Q1A==","shasum":"ac3af4c39fec9e5ba52d88372e564f871491ade8","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.53.tgz","fileCount":103,"unpackedSize":4457214,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6oIACRA9TVsSAnZWagAAhd8P/0IFEomv8wpdaTVHhWRz\nRhqhdQ1gcJsNG0lGcqc032tTkwVa0TVsW19QeThUsd4LpaEu/+6+Iulhjc9l\nG7JicNF7n0YMIxuNYz9SCyz/rRUKCpH787+n3/o5kah2SItnszjKhgwzun4l\nGpL/2BoQ9ZqbEZNc3kztjCoQh7RdR4pAguuEIzTshTyYCDjRG9+R0O+tK2Uj\nTCDL21kofDn9hZW7xx16v/zmnRhYHpof7TMJvkbcyJEgRCRAFE5yctQnrOaC\n28wIlXJ9pUR75Y9XKuC95h13XVtXOm6ZNtNXJEvqxmhC2A3sN4B4FngL+hEy\nsAq1ify8zv2k2S80XkK5VcuisHiqcxsEDXf1W22wS3PPkN1gNMbDlRk374C8\nYe25KEkSTGO0rSilHZJpGbx2rXwKnV8wrckS+M0KidMALQ5l/Dw9UauYzA64\nA17A6ZE+70GzmDtnQ53McdO8RBRZf+82uJmVmULDCjZl2I2hgzM1E3rpFkhI\n+ZvM2+K2JdqAgThfqWWPgo8TqocBg2BmBOjoKsj381frkc9e9Ue5SFF5+qzU\nKWloi1tTOLtlULBWLZqq3/JLBXv7OyGz0itE1xv7dnvLFxiy/anBVL7eQ00a\njKkHXlZj3fYUcGwKWAbZIK3zfLqshHGypTotoBo2GUiRoyMIwbQXsI782wre\nzgU8\r\n=R+OV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDiPM3qjHbEX11ohEnjyrRtEOTHQFkw/7qFNRJSjOyE3AIgRqpabsfacuOWRpu1KcGSeWkwyn92Rl1AqmlsAtqXHeY="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.53_1642758656072_0.6037002373643823"},"_hasShrinkwrap":false},"2.4.3-beta.54":{"name":"ecsite-form-builder","version":"2.4.3-beta.54","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"3859470fd3f124611ac9801780770d99286cdd4b","_id":"ecsite-form-builder@2.4.3-beta.54","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-1dKtzaqG9AipBg9pP/UuNCHEuDOqxt5bGz21WejGLUaUwywa0UQ+4FiIQkcp8so50rm51m7DdnkxcKjSS7G1pQ==","shasum":"c13a2658416263f32bc0480bb779a04787214daf","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.54.tgz","fileCount":103,"unpackedSize":4596821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7qZsCRA9TVsSAnZWagAAck0QAJADQm0N45dQLZcEDK32\nCfoDwc0NtvsIJbdE1crwUZZEyqMzkg5Cbz+P1uKOwLKs3Wlau4D/9FjgbBrf\ntlSjYyU8uzmufUut9w7XDvHUBPpcorG7T/EGzDGkF45/bi7py+wfXIL+toQd\n0snKFq8PULA/DWCViocbVMiWHnBPC153fOc7BpxgNMfsPZbDLpO7C0UCuREX\nCQe3lidI1JD802YXnQZlEa0psjYmwpI1lI1JNcSQ77chRtqKmz9Ds7eAjUK7\nK5SU42yey9MZtPs6bBXX03OpmRNDpIT/357MDe1ZWeqehjdULDL6ZCTMcmIz\n9QG67i3fqLbCJ+zd3heoATlAxeyswwtyZm6wCf0wf2bR1sygSMorN2jHcmKN\npy2udcV0+GQOvUOX/w5f3ziztCZGjbAB0A+vZrB2ICbXZ8MpRXslTeeXNPRN\n8Uc/iwarrIHKhQt+vuMGrMpwBHpevH2YA6F0nNeR1qF2qszlmxiIu4qE5PDh\neSn486pZ29bqPAlGB/Vysnpdx+s4kQOgnarWV5FCpfqqRvPe1yWiGJBYj9vk\nUUTBuqUOFTLB9OoI7Gaw325GApMsvA3Db8kzT25UOuJhzL72+OByZwOWOTT6\na+UmdRrqJjAt602wTtQXBpj+e16Oc8saXKhc/AXttpM3q5EgtdybeoW6FqAK\nuUYe\r\n=EdZG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCMWFRpciTqLDk8rbHuDF55HFrP6kKY7gOgJEnw01gqggIhAJZ4PnpKB5MVhi5xJOHgOgBG1MpanhxBviaXevxkGhXu"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.54_1643030124300_0.41652258348508275"},"_hasShrinkwrap":false},"2.4.3-beta.55":{"name":"ecsite-form-builder","version":"2.4.3-beta.55","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"d78777894ec8982b4c13c523d4867d63ec318745","_id":"ecsite-form-builder@2.4.3-beta.55","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-n/aWQEIW49SJBZpPRxlCnV1jFmFLagopUhalpPGDdoqnly2nyMUmJtawJI8lj1O7j7vXXGy385C2byQmRmN5xA==","shasum":"1041fe13b64af7f1e7f1586d82fb3be353208ff1","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.55.tgz","fileCount":103,"unpackedSize":4595979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7qobCRA9TVsSAnZWagAAN/0QAIjSKF+aobP8O2rCjgXU\njWFIUweCs8MdD59aHNao3VP5X9Li2SGMpDP9tZ9PmG2N+Jxbq6n3AgH2USse\nOyKXLo6fB5T+aZi+Z2gKJt4Eszx1XjJfGE2nooYfjub52dz+3czPNWrxrpc2\ntcIq9LrYDr9YCTkM79V6miMeczbPoAJ0HQHhx62pvUwwCQ39X9R8NOF9Vn+G\nEtewB5vfZQ7263Z/0Uta4OUR4+t+Y+OyQIWtGNuajC5/zxnHcQcb85gtSvCo\nvbsugz+n5VnTW4xH0sHg7YLyBEpjERseCz0dhhoYH+09YJwi+pZOygW89zJ7\nB67vlUHnyZU92C6CMaRKNorcgTjPI/qi+pdXJvcGWPeReu1/yq+6qnm5inLZ\ndnmgvz3LImBDnyj1SbqNNSxUmCB4/sgJ7cWD2eIpzWLDV69gMt34dgePK3Kx\n6+Lt8QUHohBg4sR2eSyoGFLxmomqHCOVgxB1175gwp5bZ2Sj2V3s5wKOJ71T\n7jNIEJThlCJSPfaDGUC28F7zrPDOn2dt40S3cWl7OIY6Hzuu8y09+WF/5vFh\n6svFsPxJM+lGFBdcJ3sjgNwrauG65xS8PzETH3p09+Ii1TBbym5ElamQzoBh\natAHUvw9iEvOcrZ+jgMSTVWhKXcGmsCQq9Hcc0iQ7aCHFo+mSsWjyJoLiDaS\ntFBZ\r\n=5010\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChzuMxFVIpdRIe44SOVIv3eGilbjicL1lyqacLixPzuQIgJ+KaIc6sK+Tl40M/9dmdReVem+AOu1lbYl2T2glNzbw="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.55_1643031067679_0.4678473388702564"},"_hasShrinkwrap":false},"2.4.3-beta.56":{"name":"ecsite-form-builder","version":"2.4.3-beta.56","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"d78777894ec8982b4c13c523d4867d63ec318745","_id":"ecsite-form-builder@2.4.3-beta.56","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-QRW649Mp7TvHKLmUnz4o1XQbKJ2TdlEezMg3/YHrPS7g2ioFUSUaPuFogh56tRnYWwHO8/qV75RqP34kv4WsMg==","shasum":"49dcbe5ade853a5d4a4e26605588cc2ec731e3db","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.56.tgz","fileCount":103,"unpackedSize":4596147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7qvhCRA9TVsSAnZWagAA0EAP/ROuHRvbLXzvrkZ2gwSz\nTGRZpOBet1X0EuAFN4vb9Q755MXteEEFXuOeRR18LlAvMrJDcfLnDG4ZCn36\ndGBkUNqizkMBA3cioId4PC2s2BVrgArZl4DMRixUO2kQYGqQfVve59Rspp/s\nbF57NEiU/Zft9mFBrqFcSX4znsML1jh2wlQtC3Ym84DPoAlhD/MovmT3Ckd7\n/+rNljBt1ffLC176SdAH1hARafQ3TPo2OAfYD2cOIhW6YSeyJG6L3+WyW8ba\n+z4NPXTWhBdkxngJ4entqp2GjTwGGYY0CadbOYeW8gFd4J/SXfH3cVxzestl\nC146HNbt6BJYZjM+i+pdPwG9PoCGw74aCUE6cJagE7J7wesVt3J9qlKm6LK3\nyknN2FMHp1NBm0SOJZl+LRCWO5ilLwqWMCGlfXvN7xt1nsg5AdvZxVmnjhFC\n4ncFLLkqYFr4IqLdSSxsFxfrNwnqfxgeddWLGEt4pwXgX/OJNUGF/Dh8OZqf\n/IRCP2wZN0APLOZbjAF0JeZWEfAZzr4XNU4yE2uBFXBqcgIvldXEO3LlgIrg\nc54l1Dq1xjrLHLL6uL2JFibz5/XSoEAFuRJhryoJCwSe5VHCBQugxKgiVoUK\nTZDUKOe1JttN+qE5IQifBXPUEteLzZoBxU6DE3Q95VqooTJVKdDg3+g23Sb7\nSjEl\r\n=WWWs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDY2mvq+9ubvpsPiLIF0oxywh9Kf30YmNONjH6Pa8CXZAIgUjMwwZQ3Xdi+bX5CxFtHqwl+hZOXysyNY4FNHd13HUc="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.56_1643031520863_0.20824227121723204"},"_hasShrinkwrap":false},"2.4.3-beta.57":{"name":"ecsite-form-builder","version":"2.4.3-beta.57","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"a865e5476f9b62d0971b466d6036e4490e0ee89d","_id":"ecsite-form-builder@2.4.3-beta.57","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-0PzwWN2vTKjLIMT72xO0CzAB4ker8Sunyr5CN8V0o3tOi8GWow9wEAq56hNNBl4kx1dY5H6fxfsWTxnhbrWQdA==","shasum":"7fe62b73086899b0a6651cb0298c8aaa1ae78366","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.57.tgz","fileCount":103,"unpackedSize":4596516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7sTgCRA9TVsSAnZWagAANdAP/3oP6GncSmmUe4PgTLSV\nTqyVPJ8Rd3mVaKe4zh6P5FKuqVD2KkT6hJGKKibhcnSyQPlzqieYw2B5qFBT\njeKoylFr+ZWHe+jCrXUB61ac4HeHYEbfqQyH9w2aHD4DQJNSFnTo+rY/ywR6\nhmNbYyAIL6dQvBZnDcHgNBCdqvQjfAcaCw8alFUXEqFfjZxVfbYU0b0DkkB4\n79J+S0uQPiTEv1YJc3wXbdSKb6esR1SvEeJ3O1PN0AvO9rFzOlM/Gn0zEd7Z\nw4Y28GNAx4RDEYlxixV24MtL5hE2bklmXnTFKOohHTtqzYpTnPKN5wKbVQTH\nWup9VcyVz73TfZQn0ZmTsUNcQmcIuKjHXzXSbL25XO3ssq0fq4DomXQOyeV/\nxCM2xeJJ+UV8cOL+Z0honTClv7hT7C75oQB0NHCC8J4c0ZK0/I6XDrxOWJOx\ncW3G1++eFKzVmSMhMtaGtJqseesUfihKKG9xcrsyFqUXa+BlN2VnubOSZuQq\ntLtwwD0OLqckLOfevoyU2TRKZJBQaa0KYzfA6cC57UEPn26FezzNGBGjVX86\nP53Srpuv9h/XDNTnrhHmn0lVsjhfLowWEjrVoCELhY+sKKi7+4oikxavZplD\ntJBJEQhNXZD+oEix/cAGVcgR0GuQVSncp8VJSdpnl9QB2QF4VCsO2eOEQZx5\nO5FN\r\n=+9Eq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAkkl2qJLt9mxDbiJMfU26oVT+W4WY6qNt3UFhMz29GrAiApXb895ht8GwDfv2WHht9JhD60++lA8N8CW9z3JjO9Eg=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.57_1643037919778_0.30477620626298174"},"_hasShrinkwrap":false},"2.4.3-beta.58":{"name":"ecsite-form-builder","version":"2.4.3-beta.58","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"e2c064791523c1a4caf8fb8f5b08e89dd36926e5","_id":"ecsite-form-builder@2.4.3-beta.58","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-LyylDw+55ASxOFvCS39arTxyrVWoG0j3UaVdZBIWENzF91Pf+LVo0+OH56bavImN3w6Sfy5XAulbdQMrBYQj5g==","shasum":"2f5608dd4edd04c713e1ed1b0da8fee9abdb4557","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.58.tgz","fileCount":103,"unpackedSize":4598915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7s2jCRA9TVsSAnZWagAAXgsP/i90cE2mXLivTAkStr4U\n8uuj5b7s47TwvpX6dl/lj6sdadQEDRC4bjeOyXT7ufq6E10AGOm8xqqPXamy\nLAl8U2H6QdsrvNs246h4m8mWnM5e+k618BPTJ/2Rff7aVTmmsn0gL4Iy5w6g\nLmIW2ilcl5DyumpHjQHVLEva9zoXNDwoUU7dfnK7+MAMuyEn+BXWPZ2s9R9V\njcww/JxyZTxzDzjeBOu9fA67nI0EbVfXzz8X+gnXxkTbY0UBbv0Ok8NoTrcV\ndSlgEmQjDEHW8uLmY+va///ZZe7x1d3YCgSVNID9nTftAqR2Qvb3pNc+X5D2\nRFlBsLtxhBJTTyDOozEaLRIjaEu4ubMMG8+j4ocneW57D8pYCI/V0WYfnPBC\nUmfb9JeAmx1DdXCmdVWsdfYf/94rZ5SE5KL9io3CWPT+1OoHUnaDPR8AjMKd\ngPKOyxhFFVD8Ejvq6Cgpa65VODsCWFiYwZ502H7Od0CA0XdSmEaHlCzyVA6P\nFfkvC+bmwmTPdNBewUMFW+xVSiaYshv+QmiFG6b65k/FwzeprieggBU2264I\nqpttc8J2CCHn1oll0UtoEu7bd/m8Ct+JDGDezPADVAKZwJ0kZuRZ41ravp3o\n1rr5T14VfI9dizxv3HwTT8jXnz/+1IXz2Y2nUE4qBL0e9Zf3w4GkLnAURiG7\nTPNA\r\n=CP9G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDEffW76Tt5cup8W+j1l7ceju2TTJ3kqIukkadlNS/hbAiEA8zjj3nYb//tuPxFt5YA1d1S1TZin6FaYgIB5QQFXflM="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.58_1643040162748_0.1953625307102933"},"_hasShrinkwrap":false},"2.4.3-beta.59":{"name":"ecsite-form-builder","version":"2.4.3-beta.59","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"c922ef598d6ab6c6f117e34cc1531d06591a1329","_id":"ecsite-form-builder@2.4.3-beta.59","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-rvk3JekrAv/xJ6pBFvij+8hAZhj9A/2nxDrH6+9U1kcfZuk1NOqX9NDUya8FIKfx28QRJ9RL3jL/H6GDkOivyA==","shasum":"559a1c5f66dfca805bf004d177c7cabf19329044","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.59.tgz","fileCount":103,"unpackedSize":4599054,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8kffCRA9TVsSAnZWagAAluAP/3XMtfmMLpSzomMWmoEa\nsuc/xKLQsoka1J/9zMMh5hHEGmLOYjqG092ADOKHnjvWM9040pqou6txUSEw\nIPc9pCVFJ2jhADEfSk7v/hGMlt+PXBRw0Fxx0lX0foNRi6vo8EWP+k+XlWfB\nFIaI2TZ3qmT8zPHto1FdokdHocrVn2ErJtckAk2xseOaNB95eBjoGcJo5KIu\nm+jVTVyP2x+YGXyn8RFrn+iDfXV9VU2BrqzhcU/7Cl3NaWtmVnxXWMBHzcHS\niNn20Op0viBQY0y8HTcHxEDv78sbdqesiu49zYioXZ8WT2RDLFNxnuM/RDEV\nZILaOT1lRuSJIYCL5zWR8oKpBFSXW5EPsxE0MqV4xxmOeJCwL1fBPTwLCvny\nonao3JuMsa5SBNZFxY4HGV2lsV//0TlCC08zE+pUSB8rrJHnCffzEodMbhlm\nWAx02NREEJIu0ZhW63eiE9y0e8L2S6jkwjS29Mz1Or4MuLrLGVjhp8/HzW1m\n0pTyYDbPmpf2JbyGi6qOsKcjMVDgViyp2Hxe8ONNmVVanOQIYQzGEqrbFoeX\nmPpNimooaPdurUSGliyQRzUmTPBaWTQ9p8ns/O9wbHr9iTN26lSenbwFulMV\nYNS+0uWryqVngB8+jmOAQ6pjZHNWyQX69MJXchDFw2GhNffm72RQpNNZ5N/p\nEOLa\r\n=EyUW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+m0MN6pHtQ4Nbz/d1op/P+4K0pDscKFKJL5UjY+f8hwIhAPxgJjWYtQMX3YmVxtbi+XD55ZTp+BJ+LNpuAEnhQk71"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.59_1643268063438_0.6428178109315608"},"_hasShrinkwrap":false},"2.4.3-beta.60":{"name":"ecsite-form-builder","version":"2.4.3-beta.60","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"08e8846a705738ec6112bd3b8f19d15d9da9d432","_id":"ecsite-form-builder@2.4.3-beta.60","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-lUoiPMit17atPBo+or9tVxaXO9EZas2PciFbZMLxc2+LJl8AG7JGRyQnMC+ykaCNRdyg5bCPZ2/iv08M1TSE+w==","shasum":"425ead7b4da505420e6d965a25cd1ee84ab542e5","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.60.tgz","fileCount":103,"unpackedSize":4613095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8qgFCRA9TVsSAnZWagAAU64P/RbclwNHQNq+Z/kw1IIe\nhY3UhhdLVtMEnFqmuoC5lBKrK+NBY5RIh0cKnAk0XIc5hL+Qs+zDi8RAYXDF\nJFZhBUtzYc4g89xwEVdPirgLjPc7zNXcHGv7lkhbJgUgZlgMVlwNQfgj3AIY\nNNom5GJkI6ytHjLAJe3yqwGlCpAPXhMs5EI6VLBLpq9aRFxd1RF6SUxBLxYp\nfrGtxFNT3Zxm5FmeFwA2Y2d9XAC1DmJuIK4fsEMckmB9+ZVJu0dls9QBEhR6\nXxWBaFWdofABAaJTJ42NfbHulXPXIKSWGGkBYcz2jj6pAe06Q7IPe+E3fnaJ\nXqxOjlJXtylRKaN3IEP+QI9yeQ8J3VSp3YhVOAghDNETuWVRdDATMq0gGw4S\nsdFgeBQbRZFcuguV+z1Ie+CzMovygYpHWUFuhyQS57Mp8I65OKOO+faIedbk\n7fGhaxYrhU2/mDz2tZhc9rRq6NNlOsTdcSnmkqnCfgAmSaknCBf+5BTqz8Br\nBrh+p/Z+UUk2I/jGyxfPPHeVXA9t/gCK0ai8wIJxmxaTQmughK43ily2KYDY\nRgO6BGcxYcnHbHMcQHpbBC8K1WexBOFywxUcG7SECLI2uYOw5rwC4NUboprd\nWZAFMrgrG5yxKSBegNT/SwbtLq3qiAcTyY/nowWDSdQaBqGfXiFxoGp2gIBR\nLhj2\r\n=V6IH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJKn7ZDD3KL1ZwIyMuPOLX8CJa3i3J8zg55Hy4SyX9YwIhANCXzhqBhQBwU6fGHTq1e4cVTeF+XuYEVbCy5E8RrMB4"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.60_1643292677121_0.4335659556671292"},"_hasShrinkwrap":false},"2.4.3-beta.61":{"name":"ecsite-form-builder","version":"2.4.3-beta.61","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"08e8846a705738ec6112bd3b8f19d15d9da9d432","_id":"ecsite-form-builder@2.4.3-beta.61","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-zu44f7JS/5dwNqZ6FiXDKc3Av42T3sp3Z8gIlmyElQ46jgNVgnjCVnM7kFY8AijC7hYDXDugWsaYgIThMHGG9Q==","shasum":"f4f7d6b5bf73459add57f1ecbf9529b66974ec0c","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.61.tgz","fileCount":103,"unpackedSize":4613217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8rjcCRA9TVsSAnZWagAAGSAP/jlvQsmI9PCx0r9I5cWq\nIT8T+YiQBPXY4nLFIdQrkAPaF6ISN7j+sje6rJo/DxdY7k23YTR9cX5Lvf1W\nbjB1P59oVTCNaR/Sk/p0mkDrjYHcBmKd+alK2wAf83ZwHsUlabQowkrYg2hV\nIFKRfHUCbqsECCqycmdbDsAQoFjJosXbxfQp2k9iOwZ1SxPGY+QQiLKllsId\nibiB23xd18D1cFHc2K371axUm08Xz/ymnACZQsajvZGtzsF8bo6CGPN5myaN\nPTjd+e+McKUxG8qfUa8cpvd8csA1Qv+5KrFm/2kWeWKxZcX1UZzj7dJvk1k8\nqpLB9IC5l0a6PTfpxPgvCTTg04AGiHmImVbPheaJlik2zF7IR9Gq6hHsdqpG\n7FEeYvrK8Vxshwz8BvOEbD75GRbS9vUpP6zHxhYVuHDTDKxdA1kxEUUjMnKo\nV4YJmUJWSo3jyTjE1c8O6la9yXE11xGpv85EqlgujbpHI5rgAvrirCqx7YVD\nskBJG6mcMC1Ik3y6AvnzUnsj0XsgcuChL7qin51ZEdMvyaxVrW6lTrTjFhhe\nUzo79o5Z7MDuUD/SxotSpnmPAu2ag84lHli3cxe+pnn8BcNba9w0hTnZ+i8s\n2/W+1MzbPJd24RalDoeLDKvIDymme6bT5ZBQXOeuY0CvT+SJ+gu4S35WRsvE\n0YM8\r\n=J8JA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBIjGjKMHeNxoaDY3MWUmzY0iy0i3EN1LTEQKZsO0rYnAiAuMTCQgWhBzaRXDPp+5LsDE1+UmiMYmax/W5zzX7D6kg=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.61_1643296987924_0.3508711126591324"},"_hasShrinkwrap":false},"2.4.3-beta.62":{"name":"ecsite-form-builder","version":"2.4.3-beta.62","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"8715fd140d456ebbd321d8b46eaa165837cfd79a","_id":"ecsite-form-builder@2.4.3-beta.62","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-zTm7xSCNi64bxZBnlEykNm8jLcj+Q+niOTNo9HOCebkisYnZPtZFNuuiPo/FrnFwZzH/DjtIydMlByaUdCG3LQ==","shasum":"7906667f05e3bef269ba09822bf083f4002133ea","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.62.tgz","fileCount":103,"unpackedSize":4613218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh85lXCRA9TVsSAnZWagAAkjAP/Rhm+gfbnWWD/GXDWSxu\nggPudbFHaj7oqq7nXZw79UH0XCVqcFJ1kisZwVv3hPjl0YLHT/sIguJxAHrO\nwfgn96CdtQ3L9JS6Y8jPpEc7iIU4gDSo3PMNwCtra8GT7SzDu0lBCsQ7SCSN\nGtSl49vwqT1qXg7VXcFC3xzf3zAk6mfSHerODuJ1yOSD8UqblFgZM1FcdqZs\n7BGKqjC1YIqlkiaE3Kk7C6PW/Q+ekAir0YExOE2e86pl9dgnjegBl7ghi+Mf\nCZCPRNAQTceuw8M3FSYlu9eNABzhdKiIyPKgmTdVWtFK9WSyi2chy8sVHP4K\nmyCpe6X0wx1BQz10Qv9N9Xwwj+UgyNlp0FjKyunPb35/LK/jpiN0c7hDZFNh\nOBWnVP/Cb2zSB3sIInU03Pn2e1yPzm8vnWqb0UKKUd603rFHNwuQcay6mk1S\nvIM8IIeTCP61ijNcs+AMwLectJj9G4MSg13LEu6QgBiCiBrSf9QG5le1NghG\nXIqesJbAj/A/zcMC5+k2wxxeHHT7ACLnA9WVLlIAzyS6r6zZnxTJMHOCyMRA\nvpCdZ/hQ+4pspFHyZ7eQ0L2yQstOMsmX80zsIhFwPjtgMGzD6OxXItCFwMhT\noeWhtb1ELupNz4NndBGp/VQaNFSlYTV/LPA01dL9dwTDZrnSuqtaYFdqsIdM\nqgoM\r\n=ILIq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUgxWy8ZuNaI7QJQzQelBdDNK7012o9DrqMu0dH1OfoQIhAJogW0nVCoeJKR6OxRt7yQRHl7kykhKoM3cQjPxgTrc/"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.62_1643354455385_0.44191092588559266"},"_hasShrinkwrap":false},"2.4.3-beta.63":{"name":"ecsite-form-builder","version":"2.4.3-beta.63","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"8715fd140d456ebbd321d8b46eaa165837cfd79a","_id":"ecsite-form-builder@2.4.3-beta.63","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-8m6FmHuFEBRF78B291+ypUUPiBuuIFw2XfGQI7O66tCL3kxE6LJC4UYN/3aQSTn5gMjlEO05g1kcpWzPV1hO4w==","shasum":"06bcc02ccf785af7a6919addfb3562eaa5218563","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.63.tgz","fileCount":103,"unpackedSize":4614323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh89rvCRA9TVsSAnZWagAAU9cP/jBxbh+7ftkfCCSE1Prh\nJjhIKp5IaTtLo1qFb/1bVoWEJ+Dtn2mJulBnQigK8lw/RM3mIXHqrew7aqjq\ntcIc/v5RaMCT4wTMBl5KnqqnfXRTIPqGxqTKj/1eBRl2dxAKhyuMxxhV1bZH\nSX/Pp6RUq9HFhTixXZClmlgD77wVcwHfqFLNEwD5q2drOdiMUfbgkL4jy323\n4GpyrZO5hlC3r0QcUTbk3uqbnbnpYKm1IEcgQRGguAovP2MDDmRR039t4Urw\n7xFTlVHSarP0elkAvZ5ZB1dHcYGSWUF3YnA6HqZvoD1nAKGqEATLB2wCYv8I\nwy00AAhDyHuesTQ16JGkUzHPC1pZUICaZ1yboZDKIt4Y+EXy/bAu5SDE1Pk8\n257WDIumgQH2KkDkxCRZoioG+v1p/h/0tb7Y7TYm5FqqrTub/O3/oCjMHH5c\ns/VpzB7m4MgVLZgHUoTpPH7gnnUVqiGqteFHy0nflyU3NVPo7WA0raNnHD8/\nuw6St+BJaG3rddieKap1+sy5OxRH7FIv9W4fmAkCOVFshLP8ifXsBlhuMUBz\nXERC+Yu0mDSXC0kmmG/vCrEsGolplE4FIk2WeEs46al0496oiK/Ge/X2sGlb\np8xE6kQGtt0YPCELuiz5TL51tRfZp+Tsqb4YWXgKmZLA599b/Ft95QieIhgK\nf6Ej\r\n=OMJb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+Md1LAYFn+2fF8cfwmO5Hu+S0hZZQNaoiEMIElaar7QIgZeq9m7/GuRVN9PAxfNwMpdT7Nix9JwE4HOsKvZTCcYI="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.63_1643371247227_0.8169054057787233"},"_hasShrinkwrap":false},"2.4.3-beta.64":{"name":"ecsite-form-builder","version":"2.4.3-beta.64","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"12be56eea091a0228038bf31786c6363d139ca4f","_id":"ecsite-form-builder@2.4.3-beta.64","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-1NxWO0PxcnY6Kc3FApzdtXRvpKSP9aJKE41PlJDLQR09oDv/jxmc7nU2wfeDqSOmjBAIyi4iQu616f7GkBuACQ==","shasum":"950d89c3be84774dcc931627c9e04dfa9c9910ad","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.64.tgz","fileCount":103,"unpackedSize":4614327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8+LbCRA9TVsSAnZWagAAZLEP/iAbK1GR4dxXTjz5Pg2o\nX2r7iSNcyPR61mEsa942L0xcK2qTO0uAgzhsQo8oqNGNr2meoCsGvN12aHoq\nA6levuiHYFna27cuK20xW7ws9+TzdIUFZtvdoVmY7Y4UPd67D86DEdfFrcnC\n2OeOsxWunHORuP0DDY50LJF7OAAl/UOUmDyyI8I3VSjKCtQ98B+51rLkRrqy\nxQDAaH9QQYpHP90gz6DiV1BXAl3IqX8ukr+Cvzqwjicgm1R4cx7DcFO+Md7E\n7efh+FY/tn9YEmZiH6VPbLZF3Ge1t64gKQJ+hF7vjw5J5z/NOUkz1jh38a3f\nOMmh/idOdTRVxTqy8xhKFigfNLixPlR5M1re5iL3i1P80vSPNJR5qQYm/94U\nAkugEeozskuhAsmQl5C24QAsmaIdwnMgGzd2YrOMB2dADkJ/0shHWz7HifEi\nloe2eTavvGOsYwxWIUy3CcP6OiVOGqnpCzv5/5ER1t7eE+R8HTB2cKy2Fl7C\nGYRxoe13W0IoMdWWPHNmM5k8UN1RjUohHAIGI4xdMFWHN/k6Z5eU79Kz1rex\nbHXk4cw+89hXTtGAipBMD5yxBKqmrlaxVT3i/kyOb+b4OTHO5lwfY/rMt/bv\nqWqlvAkadPt7sElAMgkIsvG2/vb/Oh/jjTkdU39miZwA2EYtUnAItn2ZfWki\njPQJ\r\n=qvhO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG9v0k77Ojc4tq2+hi/ZUsQ+Xivu4wNZMTumunu24SxjAiByp0djsGhejI7w6LpXENTXNKyjS47UZdxuak1PkP/huQ=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.64_1643373275051_0.2953373724244428"},"_hasShrinkwrap":false},"2.4.3-beta.65":{"name":"ecsite-form-builder","version":"2.4.3-beta.65","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"34f46a8e49e1ec5c4be8bc6b88f54d78ac362430","_id":"ecsite-form-builder@2.4.3-beta.65","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Ik8KEINJPBlplQHIhas+moHhcfZU/4irnwQEE2doy7ooC1Rr3eDWnIhnbgFIyxT9HOZ7NZzY1EiCYhY8A1WskA==","shasum":"6f37889e749fdd0f9e9f107d7b9d5cc43114d1d7","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.65.tgz","fileCount":105,"unpackedSize":4617377,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh97V9CRA9TVsSAnZWagAAEJYP/RDxqvptvcG0SwdUu0YH\nEoG4mmPmPmWYdf8+5su0Ukm2RjbW/FU/6OOYd5PdMRZQJeK2Qk02rPCNUYu+\nZcDdSQCEVlaV6apNsnCKhCtlCPWDufptM7wSEGer5aTTQ71SZcfRT6TMl9JX\nsFhQwFY0AQohs6qWSB/iVMbQuiNRWaImVVtW0GvuCwtUSqAWoXB2pjvJnT6l\nXCNXIO5UTFT/d3ch2h+UO2XBV546LUldQOgR+l3jUt6sy5yT55fJm4YtCJ7W\nyBVN9SyXystsinLgv5NLVbwNAuT5PiZSDQpM+y0+NBQheaScCEKOgaNCLmnU\nZUdx9ibdlTHwLb//MpA7lVN/OnIhHSO+mYDqV4TnHoAEmQ3H/tgU4494Lf9n\n1XjpQnQ2lvmoFGCyII2b7yw3Y/uDiY/Ekuq8mxikrp5+gENUFbSXDqLEvskz\nSEYk5oTgbUpCHgk3MwQSHqjTMw4X6s1n+ViCsQNTd7MjQt2U49+7MXnWz5to\nk5DTEPyA1zpmjdTOZY4PU4f/4urRpHoYLLa6T7XTsFo9yibF0eejsXeSegH6\nKL/D86ljSpdxIp153QX68sXvH8IGPVFPgWJw0kqeQSgCtwZvcePydS1dgEaD\n9dE78DpQPY/FyIiA/zX/bFUhcmC+O0j/GdawKmtb41aU8PGSgW4bg45vNZFx\nMv36\r\n=cj7W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0l2q5fUQbc5idQwZDjTTRU89IYiuTyI4p/BHzMDgctgIhAMJ15mxuV2/csb+aiCs6cN9eNcJ02m5zSiQNQ50h9+rT"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.65_1643623805549_0.9585218460295668"},"_hasShrinkwrap":false},"2.4.3-beta.66":{"name":"ecsite-form-builder","version":"2.4.3-beta.66","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/kiho/react-form-builder/issues"},"homepage":"https://github.com/kiho/react-form-builder#readme","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n<!-- [DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku. -->\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Examples\r\n- [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)\r\n- [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)\r\n- [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)\r\n- [NEXT](https://github.com/Kiho/react-form-builder/tree/master/examples/next)\r\n- [NEXT-Mongo](https://github.com/Kiho/react-form-builder/tree/master/examples/mongo)\r\n- [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"391239eda3254651f680e6718c570a87020ccd7c","_id":"ecsite-form-builder@2.4.3-beta.66","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-NHlFVuOaxPVBrTiEkPH3klJfZcDYX0zFVE27pX3HQwqyoYXSIM8IavHm9PHc5Ge6vu5K2PEwXONG4h7AQO/v0Q==","shasum":"75a8855de403356095ec8e9abed069f22eff80d4","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.66.tgz","fileCount":105,"unpackedSize":4617512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh99O0CRA9TVsSAnZWagAAfrEP/1irww1jbZQvSAtazLfo\nGM4Us52qGjsxOeLoP1VsC5uiT/cMdkeiRYsMds0kjzHoRyxzJp3H7vfGItxo\n+scE+gdZqy5V07OsHADaWznUC8cruLlASOvcY2TDBUP7JyDPjjcba/NNMqtb\nR1f7szh41mINuu+iP8pAitnHTlnAAURr2SBgqkKllTgdsW/dJPh2T0Fa9pOW\na426SORG04RLuJLrdnQZ13WRx3ZM5nzLIADevqRcT4mRFToTB3DnO4DG/3MN\nH4TzsLoEVIusidbDBCi9bIyCc93cIQxViEENElSv5TZ3MLz7nKu/gSCqpcbQ\nyJQta6OEdQcY14GPsD8XlLmAUYJ4mBO5xDqonZQB6KJ6gnurT7egN1bVAI0R\nt01ATyiMpJCkICT6Eynr1uESVa07eOLmIYkAyO2MiuAfWZ9RpJG68c0pQE9O\nukx/VOqY9sm2FRKD34+zl7oT3YonDRc5mDZ4iSr7IBLash4Qzfe6SQf6szJj\nNaeR48AeLefTR/xszvnI6v6OV/FCaMOATcPQkke2P4XyFfzAW6bZ7fhhECsV\ntaUVFn6cma9WwH89YsgBOEbZfe8j01qmhz7pUVvDBmA6Q+iGHhfav1xZkwup\nMStaE5rq370mBrudTzsXvoDuT67b0zQMZzEcI+A7kiv4BsG8yg6VjPTxS7Eh\nrgfn\r\n=OOLD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFxv4DupZLoMGUFD3Zz42h8m9mW3/P2bQQp4yfkqWazOAiATiebHxCzZgX7RS2PjcZyCkUtjfuJl+O53tXqHbquKxg=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.66_1643631539954_0.5603241911639325"},"_hasShrinkwrap":false},"2.4.3-beta.67":{"name":"ecsite-form-builder","version":"2.4.3-beta.67","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"00f8dd975001d24fa3a444fbae339fca783a9d3b","_id":"ecsite-form-builder@2.4.3-beta.67","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Gqi32mc3+EXtU+n+Er7Cqs8oxcw/T0KrmC2r3N7LGDAmvf07TxPOS6L7ixSGf3Fj/WhEbWxeOzZAXxRSqB305w==","shasum":"f8173118bb8ba2523858220770f048d51c58ec08","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.67.tgz","fileCount":105,"unpackedSize":4617151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh995sCRA9TVsSAnZWagAAgxUP/2fCR/uaZjYjbE+yTn6P\nAjuELISzYqFOIMCASZbIfnYDShsRqtZTEZ0Upj9Xir+LHpObMD21fbJ3RFsm\n6IFati8wSLvPDsC3c4w86SAhf3UWb3JXY7krB81DdY1sy8qJx3I4Nwe8g6eY\n1iYu2YUaz9FUUhb4kgH8dH/8T9kO3BsIczR077l7tuuvyoGaztkuDkXu2y3z\n2m6NChsWjvA52eo7SPq6uP3o249OBfu1isGNtMdzijdbwj1ZIfanBdL5Q759\n+NYsGAT2o5Pn+lhmzM/7ZdZBlq6gr8P+/Qr2NF9ocNv3f2bJ7a5bNe3+LfZY\n80rwfBPqvtotRlqjk43+avjvUHA/q/WKAsnM2gbp0C9BbiW0zt5NdOMp6Mr9\nb4wtHOStGWwC8vAH5M4Hf55pTgaZPH6gpXuqDcqCxl34Ktzq/iKhVA5VoFCj\nOkb73LSHiAXmAw9xWjh+fC8X2dRN+0MoM7mYWfj5jxIGH92h0nhHCbUQNPsm\nuK7o6uvl/VvmzyhKSE0xBO/lPcFLT8PEs7K0rBZa24gGAuo+1/Egy7z4KlT3\nT39i+hmq6KlqEZEehYJQ5lyuTZrI7Aw4rzjXZETxDA9JDFwrk1rQvwI15+OO\nBpXqzlQyBaGZWudmwlpsjEG+FtSu5L9RAEJoskDYIRWvBAJGZ0AEA/pqYfvk\n89eT\r\n=lYlJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD13Tijd8mdQwhUV09sS358uXtQQdi7jAKb7dhHmMl6mAIhAOZynTIe5SFV0YsF72B8h7GmX1Iz7GvFDZ85LEJgaiVi"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.67_1643634284484_0.4779635830930282"},"_hasShrinkwrap":false},"2.4.3-beta.68":{"name":"ecsite-form-builder","version":"2.4.3-beta.68","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"00f8dd975001d24fa3a444fbae339fca783a9d3b","_id":"ecsite-form-builder@2.4.3-beta.68","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-ByvocN9hU37wv2LMncCsiIvfUWPlnsv6/lb4H/Tg46KDt3794aUCop6GwaK1gE3gu2xl/cFA+70wP57AxOFr2Q==","shasum":"2c3e7ee7d8a4a271e57694eff2938a4e3dd1958d","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.68.tgz","fileCount":105,"unpackedSize":4617287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9+KBCRA9TVsSAnZWagAATo8P/RvySNT6bvd/XuK1L3Rz\n+G05LY0jhe87nhli5xPOUE3TIB6Z3vPvCrmXUT9CJlzy6LS76IkN558gaplM\n7miW22DvTzAk0RKlSpYzLFkbQQY3Uxayv8/6BE/Kidw5GJAuqm4nlyaE/3Mg\nDeEVSPXOuoSIdaAmHyKGDx8+XwbGNv7J1PhUz+lAOW1NA0RcIAmxaMoo3qve\nrRyAbGIDPBHPRiH/Y4hfGIXraRf1ZgW3p1lPU+KcpuKiH4XlTRBDzwm7U27A\nvRRYRHS6FaN2N9K/ePbiZL1qsiI1nS83saP8pykeQ7kzWQIZ3jQv22eZo7uU\nzEkdZ3iu71NHQmoaK244/03F/P8KsbSWbMzqSnlO8huOd4tKqX+6u3u4azcW\nX3Mui8ccLZSgD/WIDv6cTnpAYuaV7I9QZuMOR0Clo74pZRp4gA5sRYZunOtZ\nqmDXgmB2hBPh7Z3vbQR0LvCWdzWf/F62sHrKvWXanUp/PPFe2F7X6Z42aBwv\n93VsgFG9XlPE2GBk24HYo6UUopI5Bc9pNAkwT4vOAyp4QGUZsP2y4hn5KlQK\nqEw4u4h84ZT9/XxNuVU2MNembr7rGHuO/MmuyiqYyDNiVYmUv6suBmnSZWw8\nHIfn0Zjjbf10+8R9X3xn3nM7ACy3BOp91MWkdkysIHX1i0yG95KxolYt3tH4\nhQ4q\r\n=yG3+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoOUAfrR3OtThKNaO5bRvzwTMTiX05pUpKReYc15VyWwIgHRA5QPJPiAP+y56aM623y0tccJvZNWVKy9m6oHrB9M8="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.68_1643635329078_0.5101002006603614"},"_hasShrinkwrap":false},"2.4.3-beta.69":{"name":"ecsite-form-builder","version":"2.4.3-beta.69","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"9219b77a76b796dee3d08adcda82cfc6dc890348","_id":"ecsite-form-builder@2.4.3-beta.69","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-YV6PDrDsmM31oYdwZaRz7ydfSZXBxjGHgr25V1LNGYOsPO0ZOoyOfi822LWva7Jxf080OQyDz7uROOPWvRxGFw==","shasum":"d169efb5c0fb3671dcf9217522a3b7aeb89b982b","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.69.tgz","fileCount":105,"unpackedSize":4617819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+N4vCRA9TVsSAnZWagAAuOgP/0q3+Qw2YS/oxv5Ou7RN\n2+OD5Ervhjb3FLe+AgBUyrED4KtBBbFDo3BhQVcBl97mqiWuKsMGrctKV6WY\nWQ2/AEhAjBZlnFN9SicH7bc4vTth0fSMF3DTV4PHo6kpg2UFCU0X19ftxH17\npEBYdfGYtAnVxeW084WVskeJXhPB5RGilg62DzR0itFum7VnAikyzFCNKF/o\nmp4hxdTwm+cqpEI57V6XUv4CnXDWXwW60hOXD6V7Jh6h6PjXXuCOjUr48reh\nwFeJ8JHTSVJZeBF6UKKpmXEFmENCjugPeUN0N+yO/mqBHZ7fC6w+oCzcM9MP\ntgyFqiI/39w+zftAeNSVshM8jU2Kig9m/t1tXJxG1Ap1yrLwHVq4cIunsbbz\n/HVBuqQ17CEIOmymH1hX3GB93Qb83JI4nQkM74a30fDFKMV9AXK8DFY3kn2p\n//+3Pj7k/tgNAdPkdK52sA0s2SWIMSGQSzRmYl/OvXR0TsKCk6MqIdtxbfrE\nck6TnC4A0iK/sx0ei/hyJulvhhnd+2Eomeqb8HKqUHlFffXPr5DEzjDoNs9x\nQY+sjdYpOPouEM9Vt1xm5ik0NCYo5rt4/TL5GqY8d5eYH3vi+0AzFcq6LLw7\nV3atRBF/ID+DjENVr08pEi60Pb5Re1varAmP3owKMtOuoG2cShOfcCtxYRW4\nCMAu\r\n=dOWM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKkY7IS31xFtMtPzUG97/fLrMTsv4HtXiDagntQRrvkgIgQJdsIwIwQZUgUKqH28Zk0Ivl6gKyS6XBtG0QQxynQmI="}]},"_npmUser":{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.69_1643699759594_0.450095583584349"},"_hasShrinkwrap":false},"2.4.3-beta.70":{"name":"ecsite-form-builder","version":"2.4.3-beta.70","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"9219b77a76b796dee3d08adcda82cfc6dc890348","_id":"ecsite-form-builder@2.4.3-beta.70","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-d1veNpk0ES4BVLhDg0MY/7BFWXmgd0CmsCF8/Dci9nXC9AntwSijgD0iPou8NjpB6I/H++hyhBp0tirtwNYSKA==","shasum":"906df26a38c5e1b0000f6f4054491677e7babfe6","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.70.tgz","fileCount":105,"unpackedSize":4617989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+PF7CRA9TVsSAnZWagAANF8QAIwFsQkeO9QNlygkPck5\nliDgNZ8k+ZBDvUe+5zr9cr1hd9+2dVsWKOnQoUWxtV1I1GC+I+mdFx8zyEhq\nIITy1jlLl6drH7pGIXQlorccVc0h5m122INOiq1G/lSw1eaQbW2DNu55aB1i\n3LwuZaY7gLO4w+zMFODeI5KSaPNYhTYn6Qz5XTVeceeKErQPop/a8vE71Txz\nQHWME65L+i5hI66O12ZYoDsNBy6chxWtSYdfdS+z15JBSiF+ARhkVfFBakfj\n5j5Gv/i+YHgNw42AFJoRvRh+A92nENNn9tCEIn13PzXuGPO2GvpyrISNZRm8\n4Yli0o9t4nyjI3i7Ar04bVdUrihVv8A0WKb6KrJyyK5ZpvE2dd8YMieSud8N\nypKtV+sMn/dseb/2b+oikkvc5UNU+oCmd2FP9eU/ju2OfhmSZB09pp/wSKK6\ntCOtsJSSEDjV6xPbT+cEvEeKRNcygsW8vR19NGfWny8UUeqhN5KyRe7e4iid\nsZlHk0ui/zxXkAK6vVdi23KQZZXZmwjHt2sfyZetZdNoTjtCoTWb2yJPPmJ2\n1encEV1B4UmU5GfUm8eKEfCmi1TnBgueRi4/QMQoac2hYepAZrSdo3zelGCy\nDdShmEYNJ3V2ksPoM/DKkKNUWbMMxmTZFT8ZRJ3zXUPXXjEoqieI8vqpw6cW\n+Vl0\r\n=kfm6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICaPIJkI3h3vnR9pFs/8Vy2QljqnWZKX/B8v6No5Alj1AiEAlA6xCJtv5Jgh0iAEWbC96l1vsGiWFVpDM4BDe13qRKM="}]},"_npmUser":{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.70_1643704698967_0.5006426806843072"},"_hasShrinkwrap":false},"2.4.3-beta.71":{"name":"ecsite-form-builder","version":"2.4.3-beta.71","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"9219b77a76b796dee3d08adcda82cfc6dc890348","_id":"ecsite-form-builder@2.4.3-beta.71","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-wupd03FNVb1wvXB3I8Ui2gB0M8LjpFJYbu+3HYPIu9gKgctRjasRE0uxa0WYDzSR/8Kss2QAqbZOMXYlxaldAw==","shasum":"3fc74ea4a0a2c8074519dd82b6ba50a2df29e215","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.71.tgz","fileCount":105,"unpackedSize":4617696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+RxUCRA9TVsSAnZWagAAe68QAIf8gFpYGRs5O2EfcyR6\nlQsNJiqVythnu69oJAjBui8mO/jWGYF6yf4S/+jEwkDU6iQOgA1NVb/vt6hl\nv3A4TIK1BRWzkbSkWFsMJZvnuXGtZFl02YBu+9ngI86dAMQeUlQCD4hzSDCi\nOkU565K8J+jv3JOz5zEb5edljT3Nu3Yv4cv6B/QoZv9mkDugkxQRyHxvynWs\neF+i0py9Kem0lB22JBPgULmbXJ48X97S3rlmLg7g2Cpwzyke5hI8DY5Of/YP\nKXKQgPA6miG4ocL6D4NqvT1BxF/wjLf8iJGCLuAHSQfhdO5GbUKX0JUuilvq\n6DysUNF8wslWkhnZdpxNFBjAM4Zh1U5s1sXYAeNijJnQtI4txoCXcYFctXK4\n+Cqq4gCVxU9xrnFELfcbacnXgwTKnP+aaE3epPMxYyBKMi1IC/yu2krWfItQ\no42dX44I8ChLrazqwUSUzBQHjO7XExKIXZ8DkJNux5jkOGBEgG1aE5nJxqVL\nsJi9MOiPmnIvRtxNpQdzOw4P4s5SuqcwD2t09liiCfm5PCyVp+o4h+CLOOxi\n5hsdsXL8wzbMS8E0MxlBjSCRwuUPtJByD6AdDZxR4t3CKHxFgkoLw2OY+8aa\nz1WvxDaY2AjQbgXXcz+BxIm9vyRIlsZEpyA+a0zsk8zAuJUdsmpjIXoA5MpB\nSlU3\r\n=A+9e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4x8S9mcttyMcfbs1PIr5o+jaRZY9958glN9bgyco/TAIgNpyXsh5054pvvQw3lE5qKmBSuhEfktqJnjyJqKIIA2w="}]},"_npmUser":{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.71_1643715667909_0.5807630620788835"},"_hasShrinkwrap":false},"2.4.3-beta.72":{"name":"ecsite-form-builder","version":"2.4.3-beta.72","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"6004fdc29713f017ff483e23d6eca8d4e9a86d68","_id":"ecsite-form-builder@2.4.3-beta.72","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-kupEMKnOHwUB9nMkKFkolA9y1jv1MTYa1AXbJmlHg4tJH4sU48Pw0rFZcblQl6s6bFSeeiV4hpCS+bvD0n5jKA==","shasum":"a82b584b693711436257977e20bfa4903f74b351","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.72.tgz","fileCount":105,"unpackedSize":4617204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+SHVCRA9TVsSAnZWagAA33UP/3aoYlv1sVY8f2/Up7Up\n9Rlltqu4qJVnifreI/oeNWQ2dZXvspBv73FcZMV9ZUKcSa29ll1JhWXkqwP5\nfQh7NajOQA5snfcaKk8V/wuIYZbIQZf93OoloFX3edHvnZpe907L+D3/QMd1\nldR6cQ3Djpqv4DTxArlRa4MuGl+ZJm0sGvFR4xXZHdfw9yeT8UqIkeGxF6gA\nhVkwe7FrWBJETXKrRDHGD00qXM9IlnLlc4VGV8JMuXClHyQF24BR7NxCoDhv\nIdyvXcW4+maxJ1rSpTbPhVxLXNlJ5ZpyxaKS5HVqsxKkpx2+QoEkt8TGTzzp\npcJe/sZfjlvIgrpffM1P0xl3mZMhNevtJ6/qxRdVdMndRa6E0/wfU6bwshWh\nK8lIOejrO2JzUnZABbDeQu6VeAqVObY8144na6oyxrPlLwYnlR3iepQHqivy\n/zRpKqyEwYf+E4Z+eSyDMri76IKIKEy0YasxAeV3XG11jzBD/wCqkrXxtbcR\nf+3EIrkaq68Ocgi1DXhjZPcor/BU+0bLRAyC0emYi6K/A4EBo7OkTzaxkzXh\nUOgFc4jS4Elr0ZIdkBwgF3P63YzXXw6Lln5OQRcJI7Mo1wE/ZbWhZyFjhRiE\nQadCaOVpQP/SBr2y6E8lpv6LLTjNtYmGFZ3hMgVnNyIPMobeDO8bFzezpuRe\nUoho\r\n=Sk6l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEjlPlR9iGNi+RdTQ1FEOkP5WA4rzEKQT4ey1FhmUa1zAiAgYsq9/IjintrsB/D3z3Zk/MegmXtn5QzCm7GP7FXeEw=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.72_1643717076810_0.0008579061135971511"},"_hasShrinkwrap":false},"2.4.3-beta.73":{"name":"ecsite-form-builder","version":"2.4.3-beta.73","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"9cf1ae6b8fbaab73caa9ace715e4e4f5d1aa0d03","_id":"ecsite-form-builder@2.4.3-beta.73","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-rXDZ/958a1tsIOSALNLmLpY3Hm7wMCp4ahcvdtkvqdoMG6nnXPta4si2qAAja56iSpC/ren3vPeh4xnEnp8Y+Q==","shasum":"c4dbb37df1485becc9c1d7349d4469fc7c97f06b","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.73.tgz","fileCount":105,"unpackedSize":4617583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+TAeCRA9TVsSAnZWagAATX8P/3Cvl5f4yzoQSSDJ0J0D\nQpHhz03tsX3CfwNSrDh98zDTMmlv8HdGgR9UzJGHMypSty7p3kGuXvoBjCSH\n9VqpZRyQCHPtSjk09oMD7g9bc3ePYb2ZKu+YplNA3N7h96zuvGJQOrqEUmrA\np9+rzDkV2DJxHDK6fl7bbgByt/gYkoIPJsdc0poLuV/7nYo+ewt+L3trF5G9\n3vne1DHM+WOQhrCOv9j6/om6MT/ptCZxYr2tdj7AdNOJ8X3YffkxY0cEoOTZ\ndx7Rj09btbqLw/0nmxcIJ5zv5gYUBw2m7I6qwou2OTGdQKTha1NnWEeTlkyA\ne7B+pHfXS5JN7jFvWKPLklR9tkU5o59hFBLetMAFdZ1fFPh+Q0vdNGmC89/e\n6Nt8ITplmT7TRk+aiJwMKwuvxpmPkGm9cqYBxgP/duLq4ZgyU1O9RnTHSWwz\nWNOMS0vfOLCDDdwncKURdtZs1t66VPgyouhzNeQ/7oiJvH5Gd0psr4bWU23m\nyn1xECbhLSbaQdVmkHQJSXLxqRLq5MIeTRYDgyn7Jg2pwR+MbUswUeH9OQTl\n7dcYwAi+2i26e1SBAhFauM2JdkDzo8etY77i9CWCXKFhabFd03GvLHMgRbZ2\n5ITpQJz6VE4gPq7lMyZcEnRsaQeH9xEQmapC4UErgJwfSlEue63QrCWNFimf\nJnAC\r\n=/SAI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgiD2Q5klhgPI9pwT/6L7EbwCzyX7kq1q7IUwA8KCPFAIhAJ2rObUcdy7UCMCIJYgGgEPM8eubVt5lXNILJRpXdldy"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.73_1643720734333_0.11684926271950635"},"_hasShrinkwrap":false},"2.4.3-beta.74":{"name":"ecsite-form-builder","version":"2.4.3-beta.74","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"9cf1ae6b8fbaab73caa9ace715e4e4f5d1aa0d03","_id":"ecsite-form-builder@2.4.3-beta.74","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-3uEqAe9eKoNPIGqt7kj0fg689HzgFU0jzgfjXs4UdSgWtE/DFg5bBHfo1Yyfv8j9vai3d14VpIkOdOs5BDgBtA==","shasum":"5323d89f27dc42879007636105c7d0412c03060c","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.74.tgz","fileCount":105,"unpackedSize":4617756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+WTaCRA9TVsSAnZWagAANlAP/0B6gTU9SohBieZj/G7e\ntJPbyq+MdQcKDAYX5xpPbUD+zrNJLchld1ghn0QVKmP7+c4HeIPE+IzYp1Jm\naCxmXdEDTmjncLPTmbXX8+JekevE9vzZutVDbBZkHDPisWwXBV1nqFFdFk8W\nTLZfPS6bGdsarTgAoMv/qbiauHH1BSfGObvmDCMVM3rcAVlh4SPLw23a1n8e\nDA4LHM5dYVidPJCdQBG7QNMgX5rH9LBuNQL+ZPpc8RmhCxB3kEhjjPbATEgm\nfDY02SZyMoyskcgp5rmhVAELVNuZjiuGQafP8o/9pBbPSMTVR2Zwn/mIbInz\nBmnLyT3B4kcSZMT4Okj0kkS7K54BDXgE0IVUhJ8KqOQNUm3cxB4aoJ1tN37V\n3msTbO8OPL9yDR/HNm1u93kpeua2gi+gqoiTL5VyVXUH2vILecgl63ZdZmmS\nqR8T7GyFSrdW9jzB5IW+lTyK72TmvrQh7R71DMAkPIoYKaQl5x5E9DISXCWo\nC/qeWZwiZRuOoQmeXNmwuuK3+Pmc2TlRE+p+mdwFID0wjx6rYPTErllutS3H\nUEu6WeIuFLhOwHRwhXIqmEE3ZUvg2dWW2zOcbl3vTQWpiGGvgRna0h3SZtBs\npop47BOYUmBb5Ic89ehyI7/fDHiBEwt+RLh4ewKzKRVpRf/s6E77UYyyADBq\nViCL\r\n=qwvd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG+YmwFmGhrtf5zoezPE2TJfHlJ4XZPCCfesYEMpRR3mAiEA45w+DeJ53fJbUH4UAW2tx9YiNTj1GMp4uKzCqAUWNsg="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.74_1643734234512_0.30859716532146764"},"_hasShrinkwrap":false},"2.4.3-beta.75":{"name":"ecsite-form-builder","version":"2.4.3-beta.75","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"1d31a1fbc394c684646d5f4d94f032f637f46cf2","_id":"ecsite-form-builder@2.4.3-beta.75","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-U1KyyndBEYgDCsKDBHH5VWHCHnSfNANc5CObbe82jgzCt179YAzUR6iw1iK75vOwzcTW+CdddmOi77NNbO3ktg==","shasum":"21a8ca77f29ad2af4567d269b2133df5abe4772d","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.75.tgz","fileCount":105,"unpackedSize":4617791,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+WoZCRA9TVsSAnZWagAAUl8P/jGkd68+WT7VW6HdFmcY\nL+hI5zRHj3AnwbwbjcXAuiXF3GpAn1R+If/yoBgD94nnj8gwDuR4Qwqagb24\nJaY1phg2U/KofkfehTHPT/E/06UaPDl8rTlpjVUZqyXObsqnGhvWR9Gt0+Vg\nNTfpNFzNMVdkM6YsQiV7+29s2QfUZyyPwu7YpJykIgGAFM7QMuWyFiONwiQU\nlDeL0FCYlWgicHkHGzfhM/lIFxK7mwSJvGAUqsmKd6HosdyIRch4/8wiCej1\nmjZLrIUxsEyyCT9H7Ol8d8r24GovDHwayZRMu2KmpyogCds8yCzE6kE4jquY\nAJZE2QyjWrDQ2mOnlkP/22PBgtGBBuEELpNZYYzLopYups4nNKb2kYzJ/Hj2\ne9jO1muTCJDIz3Fv5yZ10e2UJVJSyN3/EPt7nyOeQITzo+Wwij5URYVXHtc7\n7KO0Y0f119D1yyvQt96uifm+y76czBskwhuY0BuRR3DkfzPW22neraEKWiTC\nvqqeerlcjXggng4XBg+7lVuqlyXZFLOvQSv7DIfQw94S5J+ezRrazjBXueGY\nM0VOH6CdIdoivmHEP9kg380BP0rj3bFBdo1Bfdyad8VZ5uXyKUseHnLdSB66\n0iLSEVztPHD3BMwTAe8JdXRZNJ+mCYxiGCz/36Ur5ZKR5ITRwAjnAULBc5rQ\nPZhN\r\n=rFOD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHHHIPVDlI4Pvot+O6U1qRO7vPsBd4NgsgZ1VgP4/xUlAiEA6OWezwSzCOhCEAwa/FZLO7hZqNOl2a8vhOJn689v6Vo="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.75_1643735577608_0.912909196880267"},"_hasShrinkwrap":false},"2.4.3-beta.76":{"name":"ecsite-form-builder","version":"2.4.3-beta.76","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"a5d8a1c18c0b78fd56d04099b26cd199ca621c80","_id":"ecsite-form-builder@2.4.3-beta.76","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-jyVVX++Oj9Hf/mkCrb2U3S5WBGVq4DwMfjG2liiejGbHYBmD79jgBp0gCkTI2J2tOKXhMi4wkpRBkW/+VHnqLA==","shasum":"2271f556cca5e5df70bdff4f8e8ceeb463a99c2f","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.76.tgz","fileCount":105,"unpackedSize":4618826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+YH7CRA9TVsSAnZWagAA3rIP/149536uqcFCx2uNQe/Z\nrfzPf2HFut8bgj75qNLTAjquge2RVVZvRmucIfP6Zx4UWct/pZwJ0FnNyJHc\n1QTWJAEpnP+5vxUn4y/RtT0EzdD9GNUbA0aX4hMkhetGFAJ6GxeAyhqqIeKC\n/KCbKTm/D8JfZ167L42Z/dLPqI5I5F98+WP1JWHge1cWG7TT4hFmEWRBwyz6\nwpWVe8fyZPfAhOb17rqF4z5DlRVcBbUQLy52BaTPHQK4B5gY4Zz9KFyPkJyR\npBQHaxsQsVEnKnlI7GdRjXZ3OOX9h1Hny+9x4u+L/coHWQK5PsSBaTJ+qS3A\n3GDRT45S1OYY2JBiZJiOspWXP7FF7mnSO13gxigQJSZTEJx9Y9z1nTXCm8FO\nzUdT9ej2plo5t5xwxkrfsNtGHUG733O1nPCyHJqP+EzhN0OvV32KuYVvp3NQ\n8J9votkXTWc9YEQyVntFqjD+qjrT4a8NlX1gKeJ9kWcYVkjZ65/sW9DWm1QO\nvVgk9BXTVtvqsxlnfOs6zw7rMZi2efyon9BD4xM7+yGxErUZj2DTNldwQLW6\nEsf1VmvKgcSSPe0/sXbK+wvbtUeZT53OQLPGBieb+VM/YzWjRCvh/vgca4u+\nax773RNFFJp+hUZjRCasowG8D/jjWEv7xhY/v3zkOf6y91xoN38qCHhatQtS\nVSl6\r\n=8X4u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGFETHYDw0BTcCp1fhrOHvqPXra3ntsLCvPKK64TEstTAiEA6Pt3nOFWOI0RmEVPXFz9Gd1CkgihNYj1ujd9ySvrlrc="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.76_1643741691326_0.25629608973758145"},"_hasShrinkwrap":false},"2.4.3-beta.77":{"name":"ecsite-form-builder","version":"2.4.3-beta.77","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"a5d8a1c18c0b78fd56d04099b26cd199ca621c80","_id":"ecsite-form-builder@2.4.3-beta.77","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-qNXUE1E6cWtv6Zp7y+iCzcwqzRDbkQhXygpw6HQDRm2CXkz38B9Gk2x+I4eZqzD44kR6qpKLYNAgt44Fa64zgA==","shasum":"d8a9e6b3a4a40b6270988ae197fa6796d4f6cfe2","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.77.tgz","fileCount":105,"unpackedSize":4618826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+lbZCRA9TVsSAnZWagAAeAwP+wUqA5wU+CGHVbKCBBdL\nRwz38EqZbzjGX9qqBaxK9iFw+E/K1RCxxW2hNx+xOHR/m8y+bQb07v8xduRb\njBwEiBaZ9kyoRKPASKTJQJVp7LIcmCfhpyXEk9FcIn2QSFpAi7BndE52kj6z\nBV/sj/43wnADZtdtGvXlHMEOSRQDHttWy0SebLGjpFxTTaTM+53JamHXiJ2j\nlUG7ZPLgJLxAxdJtxBlJvZgPVgwO6VaHlGpoRxfitCc7Ttu8Fi1k44n+PqAo\neJt+v3CAV2x/wzbkJVMGBeb4T6FWfHpcAuFaA6ev3eP8IY/rtX5zU2vORro3\n+QoKYBiB8DI7LtXBsn0wh81HuyIouLe8C0/RqR46N4qwxMYqrzScUgvBrrdD\n9CopwSwN2DRiJdU8Q7noIVB3RIxUewkq8rD2c4JRbITAy9QMTObBuyggA9ao\nGDMmXmGvW/ONr19uLtxuAyzpj3Mot0Xts8iFLCALxRT8jsQAZA73TgomQDcM\nfmRYzd0dNbzR+G7/aJQdjsYW1QMwF5WuQjWxkJbg6cTThQViIhzGoQfuVUeN\nZKH8Dihj2CzBj/uK9YNGIXTRk6hf0SSSQZs8oUqvuOkYpr0c3s77hZ3QT/fY\nJXf2bhWx2YOLYMOdF4GfhZa1162vw7Pq1A26nNCzaZxHSkLmd/mVkpsHRXu6\nnwVG\r\n=IvCx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEW76I7Nqm9Nhzs20p8RWS5I8d1932Olj/eP5GxxTcorAiBec2geE/s7ISqrMfMULQLf4XcFttmKS1RwzowlME/3Bw=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.77_1643796184777_0.8117249836480436"},"_hasShrinkwrap":false},"2.4.3-beta.78":{"name":"ecsite-form-builder","version":"2.4.3-beta.78","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"d6c48de8bbf4bab5bc930b767053670e39c30031","_id":"ecsite-form-builder@2.4.3-beta.78","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-C7lKyne/4Q0ObLiiI2945/bLFNeRywJYxvNaerbp2r4zdztvaEjG93zWMSFPxVTCtPZHjRh+d6LoIa1Ic1rpQw==","shasum":"c1ed74f2669aa7b70902cfec55cab01e62cc2709","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.78.tgz","fileCount":110,"unpackedSize":4614853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+mmRCRA9TVsSAnZWagAANuAP/izAKwqO4f3UeJNIcULb\nIBsjd1PZ2uzSQp7PAtgdrnUwcm5rGBa81nh9mzawftLUPFuuHyviWRhKPy2i\nK0IqXd8liZpYc/yxRxgsX9Tczdix0n/ZXVBX7eKLwYPu/m3DJZSCAxQzOUy+\nPP4UGJDmfM2elkemXmfZ+J1abVrtc29oOm4NSxmMGSC+0raEdI91B058D0iw\n1OvFGNBIBIvCHZanI3+32eSzGjtYnegYdR5WNCkJ3i6tXiF8O0w7IN4tg51E\nT1fVwTII9EgVqDEJWhSyhN6DxgJlUSHb9msnu64m1tjUr7VANpyyUept060d\nGTm9W9YNjaozDJOh7I84wJe+ieBeWBQkkghpMbdlGuyFfhKSmkxcNYtOcomc\nFu2plSYcuZsX7IeCsziF45Q1HxnNFikv580fGWBT3IewZLjk5mqDWn0tTtw0\neM5bOcyaWQvC44urvC+sYvulzJ0C1ppOBAwc/Hv344lXq66sj5/vL61WyTCu\nIK1/HkyKwHsXNwV4XqHCbXOcSn6zJv6ROTtciph5fufH77UpNNA8inpk0lU4\n7+r88wRaJzDg/MTwR5KBkq53bYYCbJI2qdL2RXUvdfmtFNDYy9w0Zj1Afg+9\nVX0BAg9CwV9YhWemBm/RhjRwVkDlmS7gsZppTe4VMdlISLb9Ohhxuf28Xee0\ny5py\r\n=uQkC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9qNr/3KOW2qS8IJBj+559zuM1lgMv04uYDRhQnbv+PwIgFsw96BkV7F8kKtMH+y3DPS2fzTzcoqwy4Qgf2UP/mBs="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.78_1643800976720_0.4617018576106766"},"_hasShrinkwrap":false},"2.4.3-beta.79":{"name":"ecsite-form-builder","version":"2.4.3-beta.79","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"9eb6d9417ad7fd28f4db0f26da28b8514bfd4a38","_id":"ecsite-form-builder@2.4.3-beta.79","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-N/ykX9lr9V1MW4xdRfhkJdKcuGudGu2dOtBKhtHt+QDVf0YU9bO46qTufBDjKSV6eC8QDzBh1CiZ6F6MVEupfQ==","shasum":"2a6a69dcfd2b3bf24d320361079de5fd6c58465b","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.79.tgz","fileCount":105,"unpackedSize":4623690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+m2ICRA9TVsSAnZWagAAGmEP+QCLSIwcXy3MLCZ2Yq7a\nIcRSbhtxZuA29HMWSACqU/2Ln9wq/WndxdrfvjuCkZB8RjN1BhrgccmNJqwp\nDdjab8lyUXzPlK1gipvZl403UMRwHFVTAxQhCQyQcuO3RUe3g0JtzQawzQrx\nRiClZ/sOCq+pTo1EkdCeBmhXR7M5OeKOkbsU1n6RqhF2csq4g/RmMuB2BrRk\nrdMSARXweXNB9Lai8XdznLLdyuqYC+rHlqP+cMlOIzZWyeAZ1qOzdgnOxD34\ngXM4eaNA4wSJY13/NhnRCPHhqs1gp2QTaWKguTc5gzJmTGNxYg+az8djijTL\nXs/PDiuKqJs7JrGt2pMKGfWkdiOeiib/vzYW1h5aNisTF5Hf0N/af2ALnKcW\nicfiHZMiYSY31YTHrprRxuV3C3WCAiJx4RYE13bw4ovj/Nu2GJY+z69bEX1j\nezDZi0JqSoHrM8dMA3y/FEAb0MSROSsTWNFjUqOsEBgtC7lyCgDY5pjORBoY\nXbpmJkbrgcXkgKVyB6wPeJ10nunZXOTRsAO4VZ4Qor6JwFQvxwZoEzhujkih\n5LEmGgbI16oEvmOO1sOyS6uUKaHCWOKoIWX4CV6C/owebD2Fqdcs8SE5MpXU\nAlexeNQk3EkhngwMBv8+r9u0+btsQD/8+6RVI41bZijVVtFhislunB1u26Bk\n8VD0\r\n=9jUm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHQ6D6NmE0LUaJdm4GNYZXWr79nUHuhY8oewsyFD5UsiAiBgGnL4Xwa5ocr0frasYZfPM5r2FegYtR0TkNxqwfq2kw=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.79_1643801991936_0.8255966668607768"},"_hasShrinkwrap":false},"2.4.3-beta.80":{"name":"ecsite-form-builder","version":"2.4.3-beta.80","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"d6c48de8bbf4bab5bc930b767053670e39c30031","_id":"ecsite-form-builder@2.4.3-beta.80","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-nd5a23i55byOmnbL0j8ONiz3tl9hZ7iDkVUbe7Sq/rFSoluxvnsJ/y2mdFDR/75ZB3SAJnFAYRH9jt0OoHOrxw==","shasum":"41cdde2b26d6f0467b2b12d191f79826c40e527b","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.80.tgz","fileCount":110,"unpackedSize":4614591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+nHKCRA9TVsSAnZWagAAtkgQAJ7OpYf+VOj7AXLs3Sgq\n+hxUDqwjpDR41LNgy8o4HguupVPZK24JH2MAgt0JtfundRBDRMWzam1UWKLP\nIJO/EWtRbISe9p4eYTm2hV0BMzyjFCN6+v1acFaZatNrGdnF7UZFer6hTqWU\nOVFerQDiFPNg/wSh1WbZ2LGUw9wtqpy52x6/8vkuV3vVEncDzs8vNlRA0Qcp\nfH4hsPNVfzJoJVu1bkmD+lBMpDY7C1OYH8U9mkqMHJvaOErLv3D8vDR/q5Ql\nQkG1kvqomKZTmxwPzKNQ9eflm5YuTGkT2+rO0uAu5KIGyp0eMpvyXR9P1Mfe\n8dRLm/gx/5CykZWlmIErRjXPkF+FgIiiB8k/CIkTrslRFicYSeMGVdHR7VlR\n0G04VcW07TTX6DrIHbewYnp0ZYsNvfhSfNnEPDyG98BBtA3hDDUWcWFgKhPq\n/zLlHLk10qnSBaBoIoeCoTLs3WEvJSJ7futBHS0NwHg30Ieh8Jix6uMZs/C3\nPY05+X4tK13nYFJUDXHh2P/GAYSRIMefhuy0mHinEEw9JHhY8hCq/1RNb272\n8jHmTaW6w8CNl+ltgFlPALfvKK4jiw2H+zbwSJRd8yQjDWS8pXJMaHkoXW1T\nqjX6scr5MdYmIzsg3hK+lP/aKLSF3f2gpX1ItTrFWMwYftfETdo9T2KjjQTY\n/ah0\r\n=VTZh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzv35Sywbe8P+h7cWxl5Fcqm3pGRnHthQEpZAwbYiYowIhALrLK8cuCMpB5onGDCZXw3XVfiKSKHdcWSuDe/fh3MVX"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.80_1643803082717_0.020998091639777616"},"_hasShrinkwrap":false},"2.4.3-beta.81":{"name":"ecsite-form-builder","version":"2.4.3-beta.81","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"e117d9b4fa7409990e2e5b4d69a3428b1e9ed68c","_id":"ecsite-form-builder@2.4.3-beta.81","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-zDYbu/AdDfQ1mSiIYeDs/ZpSO/Ah+Z2OZdQ8ivwElOSUb0lHPleAqO/phwPtRrAhAcorMp9FVe7d2EmVLbx7Xw==","shasum":"9a0a187b399f91b2fc5291392c57145d4afce566","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.81.tgz","fileCount":105,"unpackedSize":4624010,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+nTfCRA9TVsSAnZWagAASiAP/2N2xqygPA3WsuarD5Wd\ni3KaeFf+88Lb1RrmO84ydy/fSqP/WPZnsCmkN9+iNYck3SQC1LJG+hxVyi9g\n1tdThoHWggI0nM+j0wo/updXLL1vyEggGgtHKUJ0/EvY9gEf/Y4lOtaSdVmn\n4p5k+vArhK0ko5xHOgumw2QvbdN1CSuvkVLe2JccwhVAMt5+2T+IJNdr34fL\nPtMvClJs/Q0budRpZpNdRozatdUGy3IrvcIw/diQ72B4OjI1SBZHzk+ultCH\njT1re+UMLbgIC0m7wbUNJoY0ZqYYk5BjMubenwEcxg/IsQmGm1kIuC6KB+n/\nylZXLuBdNc/qdHyjsF7egiQJTqC74kJkNmqVyVzo4oaA7DQY0RQHVFpLOvC9\nFxQvhtHaLFrkI7JN+Sh4buyMGT0d79BQHaUpypga5ODYPPxG5UPiskmGChqy\nRFEQj5hp1ulIswn+XcZSStYk7ug+9IK44MnHMjAzNNKBjNcbteyj8Uw7c6Ut\ncjzYLQJktCa0YRCe6gU2o8b5XAEeIi9PdiSOl/vjPWnuW3/YbMGqG3l4FxUr\nQbKq3Bp5fcUp+AQttuO3PBU+1nTq7YZ6sZ9gLe+Hkegfy7GnGXlnWsxV6jsH\nh7tbcGMNZ4M4x9EiPuIZPDhanIkz/580oJJ35YLMKh5uXuTEP+/USnEQfeKi\nP4HN\r\n=pQNZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEojmYSOXHhBnqfspXAQmm9i23LqPAsWlQcn3gS6HCrVAiAOEZ/nsagn6FLpkODlp8jXtIDbYUGUWp7RTbIj3cn/wg=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.81_1643803870932_0.6288537961441347"},"_hasShrinkwrap":false},"2.4.3-beta.82":{"name":"ecsite-form-builder","version":"2.4.3-beta.82","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"b2c8f77091224264f26ae8b953e2e9355f4866dd","_id":"ecsite-form-builder@2.4.3-beta.82","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Zdraln9cx6MToMAhIbYDQkukOeX2oH8/t5lGVag1Hdtau92+IMz0qD1ElEHn32xAcpN/tlpKzQr/OYQczTc81g==","shasum":"c5f58de6c9b20a1205523f1490a07170404252f3","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.82.tgz","fileCount":105,"unpackedSize":4624284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+nm3CRA9TVsSAnZWagAADHkP/24O+QrOsg2PmeVdqt4h\n9w5jI7NiLrdK9NVWdUVCWcqShZhDpJguZhCSmob4dAFtw27N+Q8739eHrq7/\niArI5XB/Nm7TOQJLlzxpNtnjzcJlClkvghIxrNxfur0NM5o/Nr0imFx4OExa\ncway70omQ95jlK8yBmfb9nQg0UqGEkUontoW2METsXIfIN+J4FqOTiPBaL0w\n6/LnNx049XxoKDPcrQjOzck5CA0Db1NvwTeZhKlmy7LEjmK749t4LWtvOMRr\ntqqg7aNEJloTPeVleZqMJl+jnuB3GbG+746qSm9NYDbkbq5vcvhTg+CJqf5t\nGgaOt9axhFr08iD2YnQNfS2Iwx7bylnetwO3k1BIMiD4y9+Z6UmS5w3YNC3R\nv1Ucz7BbUvpqSaa5udeiSCT+xtbync9uoRvz+dhoaHpKlbvDsW60IJ6IOQ05\nMc0dfGaWKM4PnqSn7oaCDkMI7uWfQf/V+MQGAqOt8hOsvPXaaqNq0/Ylx72b\nYW3fGvaKRzP7c2aUKFb6kOC99wHNTe5a7zq+l05g8/er7733F2r6ZQ1uLj3P\nPwIiYXcYkguepG2lQg2hVcHdNcaE3X3TLBnwjG9UaRQxM4fPEHyXXDn6SMjJ\nnBLp+O9IEikrZzYhwMZbr+EIR8w/59l4eBmIl4mnfwC4jjWDfuqhTQEsjkFS\n1uiF\r\n=89/V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID5foHVe6WK0m8xn5KeNvwgDnIQc6nubkjrAtuQhhwW0AiALyFgesYzHo7tD7uXDjtAqvztBqYAg7HXfwhM/dawUbQ=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.82_1643805111251_0.013027660755557058"},"_hasShrinkwrap":false},"2.4.3-beta.83":{"name":"ecsite-form-builder","version":"2.4.3-beta.83","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"2505b213795b3dc24e82765ef10f19d6f92758c9","_id":"ecsite-form-builder@2.4.3-beta.83","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-fYd3VgICz3Jn5kjFBuKKSuRBFoGo2y9eaPWeRJBt4jBV6rnGRh7acV/tj5mLmuHtSI/a8JghElQymMjZFc7Ung==","shasum":"f059adef56cebf718ac81ad222145daac8414454","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.83.tgz","fileCount":105,"unpackedSize":4625563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+oK1CRA9TVsSAnZWagAA0tMQAII/vKyQGb80TC/0LVxn\njxaTg2rhM+nu9RzBWgUTaCzOn7VvOejAnn7X37Qg3OCsuf/436PKV+UKRL/k\n2xZcCLgynNO12c7ovfrPbxw27czOTsfbWkFSHP5z/qxxQMKF9kabkhwocQjM\nlBcL3RDLTdbWH2UHUkQjb0toyEO/BIZjnouy628gX+oT2yVNG7ZH+GBY7ZR4\n8lw8TCl1mPjXizEBr51cabDT2DNKq8I2o29+Zq3IDawntzmZp+a6wBlgnaSM\nV8+Sw+sUrmCpC7pcrwWg6PwY3Nz0afKcpcPvr45BAI2KHORmL9i1T2Qv5MG6\nKX9nlYq94I4RDCssM5lyf/TxyO3KTodZtvMaPks1ERAk5ZTwAgzFLqE4CBm/\nN/uAUwXfdwruSKul9ul5rT6lCpskJho6ot26fptFAFavAQIsgMSfM+S1N/06\nHhd0GAlzzzHqglG761YjobzlNnLU/JXRMtYw0rH/idGFt1QS3/mZpcspkEW3\nTGEcpDY9+PQTwbFQ5afiBWojisoOqDYvxIQ+cnKFpi1BFokO9PD165uKhved\nca5Nti2JGx8BwwRyzLaEl2gDCA4XGGkl7oM4W+XEsbvlFdAX8JBlsOYl0ys4\nL8cZgo//3WlaH4GFtCN9kU0k2CbEjTHIlINdBWmGnny41EH9nBFPlpna0OeI\nmaFw\r\n=tHoZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLnioihrP4QRLCZ1kAUjTcX5jtBX2YZIK2wzypN3LOsAIhALdYYAC3BbubEls9IfjqQcy+26DhBa4FkskpEpiNaihi"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.83_1643807413296_0.6008235899726051"},"_hasShrinkwrap":false},"2.4.3-beta.84":{"name":"ecsite-form-builder","version":"2.4.3-beta.84","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"3ce414817224d61819a79acd29cd708d502125cb","_id":"ecsite-form-builder@2.4.3-beta.84","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-IN1NjhRQuhdB3Ir1YNBO+x3BR6tqX7oWgAi0xTBL70+kRQpjOCcbmRl46iPzPhqM63fCbgiwZvbTc7sGxEh8Qw==","shasum":"f462af5e705e8369208f4a8a58b2e1d785ad1f52","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.84.tgz","fileCount":110,"unpackedSize":4621084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+3BICRA9TVsSAnZWagAAvVsP/1XhENYmiLbuvZsialpx\n4usoMHhnQH3scQk/Lwurc/IQwt8XEX/33ph70ogGNRwb58MsgT8KT9ujmLxc\nDgdi3RvBUtGvXn53JHF5p8+gl0pjtxpg4dHLG6+KB6NT8p2juMC7hZlrNHXv\nD3CecOPDNfZuslXP7OgaPHi7VaYYpKbF4zfARpze3PBng/Wwj5bDM/nnc+yE\niAdXYSsVaYb/paRO6JPQ/0MPHTocvUYHhwVZXcCkSZyDbZ9gl2NQb5Lm4LXa\nk8s6ZCb9FrPEK7qQw63bLlPvejmfkBVHbNVa3D/spnl9gWosXzljPsDCpwe6\nJma2V4RG3UM3HXvBdMtja4XYO+WqoPLzW+MejqkHwK7NItivDwzjPO2CHVpF\nKoUrWiixEXcWfYDyCZ60h2s4Lg+klm5FqY99yfmWmLgqDfr78sbI5z5gJLFk\n6ujBdEbmRmfr8FIUL6me5UIT5XEoJ8we4z1uw728uhX8bRCPG5jK1e0q1mCu\ncPjusUfjZccKM2Z+enQErmV2laDgsOBWeYE7LqIa8DWUBBvb9Ev6aVgZPKT8\n/uypj/MJkZL00zScjDKEvtJUd1ZOwng6ZbNmgH/3VJPhfSeuhBSV06w8bFNR\nEJdccId/uVj75vkfUzZd9bCWg7qOzf5zfV5uC3XrOAR+3n6FlRrVXw9qPUvD\nJfi3\r\n=Y479\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGOrO4j9o/c5fodE1l5c2lkI0e2TaNKXteDbFX7PlgnrAiEAzxWej2jRP3b2PNmA9krIbXDoqgrRTtJi3g1I1XeEOuQ="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.84_1643868232612_0.6332463199570635"},"_hasShrinkwrap":false},"2.4.3-beta.85":{"name":"ecsite-form-builder","version":"2.4.3-beta.85","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"3ce414817224d61819a79acd29cd708d502125cb","_id":"ecsite-form-builder@2.4.3-beta.85","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-6cYwnx9zjI4Vw470Rv2Fo1t+Ur0Tpwh4C6N8euioxI0Adpt+TSW/VSKlRgZ3QlLWzsDbXQlHz1GL533e2xxl7g==","shasum":"e0136d5a10e48ee33c86a5e5e10315f7145881a1","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.85.tgz","fileCount":111,"unpackedSize":4622674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+4jZCRA9TVsSAnZWagAAZ20P/3B7yJ8GbUs6fzEibKrU\ns1e+WvoqXtKnelwg9ozeLDhXHpXDqIGnjRrd61kltjdY/xgafYRCFGngPYZ8\nTFVVcel3Cf4Z9LW1CqjB20xr9TU8qs8HoxWEHNGOIHkUP9BeuOOjl7K2QDTN\nBFkD+y6AvYVVxCSx2ime8l4iyMS32lPzzRIR2G0CyVG6fS1FgSWWqaGnZCnj\nvvvkJBsty65ddaxoqfQ1SJVMhyA3gZIT5pj1GXHtLItrBWOqAINfiD1HNIp3\nhvzIxskkXUzyj+ecV8n4vPJmbLCcHGxR5mHC2Hm0uRxRbqUeJcAGMvbTN7d9\nTiPA+OgKNRtW1mO4F89SDfNY1bcOKQY6ZRXGkWKCDKDTnEzsnqfORYxjIRET\nqVTDjE0hkKfUejPBPbGTrQlRAQmjbRzy2q6AP8mKyEGeiMi9JdxILoLpx//L\nA1Mprl+0ThBTvBWZE+xnREV0ry5cb8bMMy/O4xkcIZaWP1pAHMI/HsFuaykT\n9zKpCJXOHNNBxHHAbpGC4QqEKb2vdcdMzCFIykBz68/sIuLcVmymRlW+gfQr\nkqkoa3tc86iYeVN8sAsdq6DjPHWajCM12a7YCl9Q9a3H56KCs2XTSXrZEYXT\n5/ZhSkhWD5+21/UtWmvtMyiosRy5o8m46Vc2c4Rr87tAIlsf3LOXFlNvjCBJ\nJUo4\r\n=Wf3q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4dx5vkVFCF4m9TFUMGGP4/Qa/k+079exutK0yzUTrkQIgNHQC16h06CtvsKv8JWzZE2vSUi50i1JUeolk31PqAeA="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.85_1643874521306_0.3160651572025437"},"_hasShrinkwrap":false},"2.4.3-beta.86":{"name":"ecsite-form-builder","version":"2.4.3-beta.86","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"ba4038643a9ea658862681629e5b3587a0548786","_id":"ecsite-form-builder@2.4.3-beta.86","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-l26D1k5zhKuQc80Tc+hly3rEPnrF7FchoOe+4AoN+9YoAzT3v516SRZ4S4Tk/s3FiObYe2HrAD6/i/j8vcn3lg==","shasum":"66172522f27a11c94007aba1d2e40fa294e5ef3a","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.86.tgz","fileCount":105,"unpackedSize":4589839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+7MiCRA9TVsSAnZWagAAiKIP/jQSad8ji+pNud/E9+sc\nM/T0gtmkyVxyAj5rzkiTNlGJ96AZ5imoEQ58dsSy/ThQM0wkIgXKQeDMFGPb\n1SzzIHfAA6/DJ+F72MPRFsmXPKcctbQwB8/nbgP7a07hqqGuGvXSH2BOD8SM\nbM31e3KERepIuoTIDWjzKzSwjDTAfTk3lgCfuN4QFTtB4oewvdNOdidGI/ky\n+cCoh1KAIa4bIQ8xaeCSYld/hOymHem0Eb7q519QwO53fy7N4vi5DwZ4S9kd\npOfYIN775/DSH4f4mLFYov2HMZDAB+jfn9Wjt9/MfbjfUZfNZrMO2NUI02N6\nmPQjlw4nx8j0x3BtX/eSenYIvw7jLtoB/u+FpTy4afkw79DZUZPjOEhKQqwM\n+ZkeH3ZU2N5mK7SjdJI7to9NPZwByjvnf8EMXFEKu6JSsqPo2Kq0u75qRv9H\nx7rG4EixJvG54IlXi2JkRmLp1seWbebE8kNj2chzp2FToLq7tLUcsVCVNPDp\nAdXL5h1RKLaV21soC5NE0MF/Kz4Bju0H0/3nQn9w4UolkVpb8jU39bG5lK+R\nsahLpNey6EbRC0AsfCsHDU1gsoMxzVuO9zBgqdFr7K3zjTmRR52xIHNBWCWQ\nCapkGVrsEHtFr5X73XtqwOw33lsFQE3jAUO90+XAD5PFYtjYGZIdypjUbh4F\nrmDm\r\n=GL1D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDy36IOFf6U/YpzDNLORcBQlwEnhZYQ/7N1nsZ00EtsqQIhAKjGz9Y5ziQcaa8AG9SjwhhJgjUFXXE6DHLyhCHbFL0V"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.86_1643885345931_0.19709865599375842"},"_hasShrinkwrap":false},"2.4.3-beta.87":{"name":"ecsite-form-builder","version":"2.4.3-beta.87","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"cdb1edfa7542dff232c7733e320256b2b3ab96c6","_id":"ecsite-form-builder@2.4.3-beta.87","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-f/Pt71R+L2Y4dxUOxt0lSfWrG3V//BtfDq/HUKeMUEHYHuG/RtPtI8erjw03K4xCREroB8QMYe5ku3YLjKpD/Q==","shasum":"5aa6c365926d3c12f68b4340153ee935f836ea8d","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.87.tgz","fileCount":109,"unpackedSize":4585625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+8YZCRA9TVsSAnZWagAA5mwQAJ0SOywzS8O/xUVGckpb\n0n6hua6s2HnK3BSj0kA5jFe4X6jm9hfMCO25AamIHHVJ2YTqAysA3eMf5AJh\n7mTUrAW9gi2hhhMi9qS7/pnGEFUVZ5oMjR5dQ9lloK5mhkrOIbSvnKJ38q5T\nx6Y8FQLV5uB9c6nGPU1sSCdUaFu1NMx06/Gof7NiTrThLwlnUWHoaS+YQb0O\nmYUshtz+70K8yA8PH/hzMalQbPUh2okG9jR9BLf3vegJnsoziqvWabK79YRZ\n6QkRtktXxDppOeYls11F7gDmJbQhMhHhLkhxsoYjFAVMf+COInHqF12Jhl5w\nOJpJHmdauSD/GL9wIl77P933a1zKhxm2z0tizgfoOVK9xiszkfwmzlToh8uG\nZmA1qqiUoVYKHPKW845x9RJMpA2Cs4pvTpz3xz8S1Q9hXKQtEKwX9ZTvP1iO\n7pJY5u3gyOCrMna1FnkPWI5VQtskIkRUiwHx2eGeJHhNHbkzUsTy75rkPaKV\nl/m1Y2JCGpQXqdFJOT4WqkHD3Qi9K/Ev7Ww/ecOmCSXMRmnaq4Jcj7FPk71e\nQPdLnwiTQuwFZsMS33xdElrgDZjRCUygJ144n8AIu9ZrQZnttOQF+HhIXvbC\ns7QJ9u/HhOZxyri+2mOV1xH9sObbchpK3b8+zLrhp5ms89U96A1DHBopnX6L\nbggk\r\n=3zfj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDUpw/Y6o/Q8OKbpIsOG0Wzw4ygnoa4ngH+2q13J1YlhAiEAlfxlbzBxoT9XsOv3IIwuzlHDf0470PRCTIVj3Jo8CVk="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.87_1643890200713_0.7266305088172182"},"_hasShrinkwrap":false},"2.4.3-beta.88":{"name":"ecsite-form-builder","version":"2.4.3-beta.88","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"51bd46182e64592a51f19040647d38f7a59e174f","_id":"ecsite-form-builder@2.4.3-beta.88","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-QigOj5tjjX/FBujY5Tg/pvDNwFnAmVKpQtk5PZx6y++zu/p0Xf0rv8X/JcM14yDlOgAFWvjEnffNhwJ3SSoJ4A==","shasum":"66a9d136926348d9f660ab109fc6b3e7d822e6a0","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.88.tgz","fileCount":109,"unpackedSize":4585620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+8u1CRA9TVsSAnZWagAAAQUQAKP9LwmrZYGrwkPt1NbA\nS+IECMrugDAp2s0BGCAOmCCcfqQq7aNnSdcLOA4hQVhtudiIpTrmhOlxqidt\nbjK4xO2D3rlLtXfWRMogrJ4kg5gE3Lg3TOrPbjMr16pnbdw3UiY1WjJMKeUM\nr83UqNsCS+LUE5bdHqOiFJScYLsPjJ72WAvlYdfx30Z+jOZj8OHumDEGveyl\nKt/LOmQrxJZT7FYtcwE2EJ36jLHYO95WHHVCkapI0+gYIkszEv7X/sPyPhYY\na8uWg3Fp7V7csDZ4HPq+7eWgsUcBIiuiazZ3pIXgwe10NfW2fDKcWkVNukLP\nhvsr2nzClEh71M78AHq5c1+ziswrSCR82YRfuDckbMwwcBfFvm8ERISft9LH\nvhWiXHZwow7qQwFjMa+7KoKSIyO1XQ2E+pbmbZUzQXK5eX3lX/0KgsoQqaTZ\n8YSnVWxYiFnRdqwGwpEUS1jIE5F3/XyfXweWfJcRp4joBrPbhM9TMhA0NykG\nShhYhq5OVzTx5/b1uV3WuRWknTl/vBE+6YpRB0wmL2yEtfLFuJMABQfxdXJk\nXSFYPQSXfgqvhNlmkbmMq5mL0jfU2er1+mWN8ctVAPt8ypgNSZXqfZOPf4+0\nZdyhGz18ItTRVHOzdAi1nFQrcu43Yrb6BBt15j93yF/BLaCyQYPbmFoPMeQi\njywV\r\n=fadT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFOkHmbj2CebEaJIbItC5hrn7dPkhFLXAar3SddfHnlaAiBScqvDfxX23tHynrI+A+O4rPo8WX5kokK3W6d3F8m/cw=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.88_1643891636745_0.6592193176431349"},"_hasShrinkwrap":false},"2.4.3-beta.89":{"name":"ecsite-form-builder","version":"2.4.3-beta.89","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"188971fc5045ed41f33b0a7b7f0c24dfc93f6540","_id":"ecsite-form-builder@2.4.3-beta.89","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-InWyjJ4lfP7BpuJfbn14tFQwtpfIx27a6nN7OZxV83PayxWuKRB1LwhSAvRSSNe72lG0U2Ii1v4ZZCgCSvb0uw==","shasum":"61268d5522f741e8b5e69535d267be21da15cf21","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.89.tgz","fileCount":109,"unpackedSize":4585882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/MHYCRA9TVsSAnZWagAAfT0P/30OYicdswPIt3f+xHQ+\n07Z4ukUlfUBfyaWFHUYdb7IwreVG7efg22D/C87+lPgp8LA4Lvi1JY0SjuVO\ne6eOzK1BHyI+mZToy3abWyDAz1i1N9tJEQzJ0xAhoRWi99OTzqs9rT8+qlNC\nJHB6K1iTqbchWXp3bcDF0BGl8zFexLcqiJcDs+V2M0QsMqOlpGAmMBHWQUIJ\n2NS0Blg0rXr1XMX1pkBw3gKk6Q+Al0pU2bzn6LXpiEPwvXn8YrgebFEeC8ez\nZrsRgaCPrMhErfwQ0OgRJeJQkm42A55ZMUO2JrADbPihaR3DyxT+yB0tOTRg\nx0nP+l+KSsc4RIPRQ4KDRkqOfETx9bGYrYP2tMUOAivzzApgwOq0lkGLMiL6\n50/IUejWoDD44g6bSj7+ztbUCI4YC/VK4jjPG8r3N8otpTb4LGJkMMIOSEAH\nNWFG5T/o9V4m9/bBH4oRUY3h8NB6m3aWQ3xXnWqn0qbuJnjZccf5IhR4lYsL\n6bHhlBU+elzYcej8JjnGHCZJkltYKTfqtJlZGIlHkCoMwglFUgU8jXEZS+l8\nM0epfQTUv4U6gum3zHLPFJYiI0cWb6qO/823TReP6mivl9Ao8HUWBzNOfaJa\nFL9FaUJiXf85ixyxc2mokE8vKlVhEo+0qat052NUiH+MD2QQqLGoRxdCpkBb\nO70h\r\n=258s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgQ+iWJy4YLuGKxD5WRCHnXC6Q34tKLQn/zggIAK+3KgIgM+6Lh80/Z+HE6W7MZyn4+EixobBad5uULodD24rHSPM="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.89_1643954647850_0.3575895892584069"},"_hasShrinkwrap":false},"2.4.3-beta.90":{"name":"ecsite-form-builder","version":"2.4.3-beta.90","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"4bd373fef123d0837a355a2f023156fa28ed0d07","_id":"ecsite-form-builder@2.4.3-beta.90","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-cs/w/DhpjAqBbjqHgYhGABmRpxw/RttoPXzf9+wYr1lFFa0jDsb4/M2EIn9TDswDVxKcGS+jXpVIkg2F/Vsu+A==","shasum":"1673da1a8a32a9f36b6c569b14b91b48f713b274","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.90.tgz","fileCount":111,"unpackedSize":4612665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/TsOCRA9TVsSAnZWagAAqNwQAIDBzNtmMvn//ES49KuL\n3MmJdL+Pm0kMfrqECnwO0eoGqHcQuF2ckZdBHdDHheq3LCDxV204MnIqKnp5\nlRm9/jnnkQQAo2w61zVDhb6Vz9bZ8FcMzJBhtr2GxZgr+fisuy1qUsQGmQwN\nQd6hMjKD/oycC3SiTBegeixALR106nZ0LLTCYL/MVyfrxIBgd3Kcb0cZJ8qg\nNm9pOwEdogYb18hWkHKDp/2bKNDUTwHHfF/OxacCs06ZHbY+aGoNggsmRB6O\ndjyStSgVe5NqFPVrFivFyI2UuGIvCOgJQyQR+ZNOJ/n+G1g9LRWarEqoyKwa\nryifwffdNSY11re6AfRIwY4awtWKiAvHVDnA9xWGvau81iF5yqDXKe+Bkrp5\nVOxrfguq5nQBYSShMm+/GQ3grnjoBccGp+4YrxnFb07Ljar3dTx+NIf91y2n\np/5Ee9pVMyZEeV3L9FwUgp1GlmTQaKu9UG7WbCEj67u3MDggdL2r0PZVEIBP\nHr0xQBq8RN0zsn4K0D5jU2O2fKsxbpo+Gw6gbYxP5o5fhKjagVQ8K7IipBZt\nRYUAwH0G9V3FNPr6FIjeBq9KxPwVmZ8dllW52zDNgfEbFuyauFMqO1xHVRPj\nfY43LRcRCFiYerIPKX/EdNqmZKn8OVyw0DMPxdYjzisPC051S47/0jGRBF/h\n+qzm\r\n=ZMRc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCaWHNDycVSohxGhEqzGExtzaGmn6dh9PXFNZuIBQ5W1wIhAJJBVMgsgB+qc+C7HCT1Pnno3DURQSZ0vHznOPFCENpg"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.90_1643985678097_0.8573734394038999"},"_hasShrinkwrap":false},"2.4.3-beta.91":{"name":"ecsite-form-builder","version":"2.4.3-beta.91","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"1ba49668d9e48a88c8eeb57af9f700c6ee888d6d","_id":"ecsite-form-builder@2.4.3-beta.91","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-/8CN1UNxY+GC+hZP71YzU48wFw7/T5pt6NZ+q/gT1j+4oIAXdIkiQ6rEzIpRxVbm7tYUmQS0jYytot1huPmX+w==","shasum":"1ec8b7863fbbc03d4f1a6d8b6a61874cdaf0e29d","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.91.tgz","fileCount":109,"unpackedSize":4585912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/T7QCRA9TVsSAnZWagAADcUP/3h1EFwUxjA2B2thwNSF\nEkgl3FlGy/jKC+58dE8MNPO4ooHmNfWN+qarMtA8v25QBhVWo9/CuR4+x/c5\nrqxhMxLPZzUp+gSzmdQ0jyw4AofoyBipV53PYzrdYIFNuJmUYFLn/ZYxrPyE\n8t1w7PkOaAoKy3U+P/yH/HeElWbO+PzelBVeASklw6sjJyJ1x8wbDdV+dc7u\nn6MSZu09BQDF5Wf6lfpt3cVWqnyOU50ZdL58w7nXlNerp3X7rqQ3Bc28HhXw\n4GNtkN8jMsBnsGMhysVdm7Xm0haNzCwcIINUcRY19Sh3at8axn8dNy4K9oJK\nyf+VWtlMEtp6KDEqhyqCrlbPBpO1lRhv81ECwiW94bEshA0ohVXfN4ubta2E\nvR6IuMOOjYtqcB0Hfd2nA7R2IEQ7rSRuzizz1CLDU+6YatNJ18hDg56E3Vws\nvE/MfWuroBSV/ZblpfJ4lzynUas3N3KqclNE7M1un5neqTKSmjqm6eAWPgZA\ngxPqzqYItdnJwD2JhxHn4wVx2WN2Ix8ufz7vpvKHOGdaCV+/5eFx3APiqBDU\na+gaCZO7W5pscQpnNU9nzNXfGbNHOeZPC9ehQ2emFFGVsfy2J31BXojPoR6X\nh23uMzaT35T3MK+w+Yjfr433dbUcNgrGf9e0rauRcVrnbkpNd+gJgFSugaF8\nWxd4\r\n=emfk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzazTtBh5oq3oBEuAm7iGRIis5nQ/498gy3iaAQw2FzAIhAOLgj2urPjT9UiORcOmrHbVXa2haY6+8YmujHMyoKPzR"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.91_1643986639988_0.9443980174490361"},"_hasShrinkwrap":false},"2.4.3-beta.92":{"name":"ecsite-form-builder","version":"2.4.3-beta.92","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"35146d01dbe4a4b45d8d40694b053a3c8f339303","_id":"ecsite-form-builder@2.4.3-beta.92","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-w+mbGdal4Dp941V2A1IU3nafGe95xaOqtMMmWm1vfygqERGvZbWk+swJlWPTIUyMbiEJLYlJg5kOd7BMZ0A/IA==","shasum":"5f05f35221f76966d3c7fbd5289c4d67b3876237","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.92.tgz","fileCount":109,"unpackedSize":4584082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAR0eCRA9TVsSAnZWagAAkq0P/1OxfKijV+dGJphTjn9Q\no4p04rNQlbKTbLlPKscVNQSmpbmjESJSUr9J0bvDaQ98qqMk9/q4VvTEhtTM\nfN3oaHslKIO1TkCPyXmbganpOropX/CKGwzr6MLRwRPG7Q8RbHTzD6VOZU+2\nUTRE5B6semMgkduLmTB7Xd1IhgdLT8OM+XMLmnpf2Th9QUz3T7FSg5fkNyzC\n2nB0bpEmdkL2y55B9GbnknAL2Be+8jweSeBv+lcfK8FTfE+kXqSVoRl6elTn\nSQn3bv0B9D8nLzdJtqyG/WXGFeb/V8dsQfP+17ron7bl7SL4h+O71Ds1Haew\nMt+fGK6US42qxFWNxWMmb7obBIxeTlfrdZcEbyG1fUTWDkqRdkX2nBg62Pla\nTUePf0ceTOOQXBjEb+GuygHOYR3uftaK3Jm5xEYpXParSiW7d5VJiJH7hwyJ\nArTnhYiWuW95KpSyqpz7tH3ki/MN6xepJoWlQM44SEpQg2IP8df8EtkRt42b\npKd+gE7E9vCD4cgKwUOB+4DxHQ8GQtu71C0EYoCkUj0RnHu67KzSSpJCfQA+\n3pAzeNVfOFIk32gezsyZdRbSFZUicXBTfFQWhoqdPge62DjNaAIJTEtt9NUs\neeRMztFGY4L0opNe39+vsmpprKOHmF+1xHFQ35mDnBtbGPks01lzR4WUA4wd\n5Eww\r\n=V09I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqrJF0eDyiJL3Q8ujfjWjJMv40PCtU/cTKfUBcYcInSgIgek5TN1RxM6x35Zo+maolsyCH1LVYHWFRGN8vtq8UUfA="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.92_1644240157873_0.1616948785563712"},"_hasShrinkwrap":false},"2.4.3-beta.93":{"name":"ecsite-form-builder","version":"2.4.3-beta.93","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"4d45b1771aedf6d15ba11afe2c3bd5ef8dade0fb","_id":"ecsite-form-builder@2.4.3-beta.93","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-fzRDs7ClrVeZYUxFt6vpCgSYOwLRy1Z7+dtTUqYJLRf/9GLjrpu8PTH7POXGjUn0D6PCQJHifcLdq41QF2IrAg==","shasum":"4ae27adb4d53117968552cb91b624d01252e63fc","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.93.tgz","fileCount":109,"unpackedSize":4584101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiASNeCRA9TVsSAnZWagAAo0gP/0YTRZ6AsQMTcrPYHroU\nCtTN9Ib7Euv86jz7kXOw0yuqsCMUpyJz5lkzRKrYAp0Uz8QuaXCIXo+OYaym\nXxd3NYa63dJ6B3CGHTYnUmJKuJjgOnuVRaEbDAdaFRFbl8lZfGsMrRwraH53\nNCrm58lz7iduTLSp4MnrZoiGqtMNBz0Rp2u0It4PKcMp22pS47UoI4UlrEkz\njl7w1sxkwIlHTb3ElSK5ca6/6lg4sZjrAjkMyH9SuZQaIE+mM9xfgUHeNT+n\n56nYKw8xeQBiYHShAJZ9c8qMECzR9tsrSMnt8kUG4NC3/HTB4IARxNS7nc1e\nKwkKxt6GfSIiZ6L8TiMK0WkbVMo7nDIQyd0Azvs0rgzEtnHYsXw+QDziTCLs\nV7nf1TRwvEbTlFhGRb9rMnnQfsJCsqtwh9q/6GjIXJZ2a1wNhQ5JJTDQkKxB\nJ8RlCkC1vVdZyWDuafjpA8IdhhW0CCeyEEX1I7zH1tQ8PgJj0R/KYvjKi5rR\nQPmdbxZXEvFE+5f1gr2V9x6pyoFLTHmhBSa902ZiU5B7CrEduqogKKmAmq5s\n1UBFOA7vLc3UF+lObyVxzv5rJjFNxtmKF5nW8OgrCCEF/B9Ko8PPj3UmfsTp\n02PSrkRbT2ZVJtSYDVOClzWWuAzbkG6pfxXJz/4cPJL37EeWpE+8JUArJHCs\nDZto\r\n=ECcd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCo/4s5ftW73UbYVJ3CvLl5gNxAXSpZAEKm6bzR4egPLAIgGUxf7jnMqwjQJOtjrWulH2WbqjD1giEWjYN9d1s9vbE="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.93_1644241758333_0.44060842361477714"},"_hasShrinkwrap":false},"2.4.3-beta.94":{"name":"ecsite-form-builder","version":"2.4.3-beta.94","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"4d45b1771aedf6d15ba11afe2c3bd5ef8dade0fb","_id":"ecsite-form-builder@2.4.3-beta.94","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-RBWEZyhg2wn2zM4wkiHjG8jE8F8ktJK2/QqMo2tHy0FBWDID+mxPsehJAmw2X1QSVRiGihIIyu4JiDfS27Y01Q==","shasum":"a24bea8b4e1b3ab60433fe67c2ba3960011077b4","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.94.tgz","fileCount":109,"unpackedSize":4586941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiASc9CRA9TVsSAnZWagAApmIQAJzDIaiZTBrgJUksHb2w\n/XWoOMAe+7U/ObnCBgIMMoP8W5IAzh0qYfyyGQk275GPG+ZI2HjZcTTIVKo7\neRnGTVo/VJIviZn38C+yvf3IENyuKqb5S8vbt8m012XPTpzBfYaMaApKlv+M\nUgxcHwZBAy52QiXtpjIPxvw/EBSS16WuNjaQA4V5pFzzA/POfLz0sfoIvV//\ncBMSa8uPBpLUFt1+JoErK+GWrAig8+9sRkMA/ro2cWYYfXANNupOKqs0Qxrl\n5p7EtOem9T0HnGuGXhxgFWhftQCCa2xfMWyyKaNPvaoqxjaD0z/mwc2HU2K7\nCYrz6+xV6Q50SkYQseBsRNumEmIDmIrqXW5y7UrgYBa4UQvzF9sPnUYAr2Xf\nPl6I9XU3cCpaYyl8FNfRjZu6CwR8sRdTHZLwWNVtxgWzd8Olvu9ZH7C8RMPK\ni5mHk1uwQtQ3oXoWLHSTP6JmKcuaAD3CFH2+Y4Xlt6CZn26YE8/qUrHlbF/P\nKntVM+LRTLPctz3OrM1avd5asfGaZHaDkCFvF4SqRRA2ZIk3weHZI9FchbG7\notll+GtkQeAzkvnFdtdQUQVUVqbfEca3sIWOUyZiqYPr6RxACdAO/e42P8fc\n2GHfVQ6+w7Dw7E/LAYflbeGjX7XyVgHecwU88lvvEz31X1U4FmUmkuQ5huzt\nKRWS\r\n=7Tlk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbupFk2D8k/Ix1+HkET+uSVRdgWj6mu+BlsHyLmRtuLgIgTZbJZzOwcRzdyNKXQqty21gHiJkXFmJQkMOiddKE6c4="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.94_1644242749159_0.44445481146552956"},"_hasShrinkwrap":false},"2.4.3-beta.95":{"name":"ecsite-form-builder","version":"2.4.3-beta.95","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"4bd373fef123d0837a355a2f023156fa28ed0d07","_id":"ecsite-form-builder@2.4.3-beta.95","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-3drt72xrx+3CwE7AWh1Qp9XLvL4AXO6qSwJcjyV50CqSYvGnmG1Vmay0Q+V6UDzTEfC9u+a/l/JCDzdAe1VxzA==","shasum":"51bb6ed65f48b8433d06630b85d1926f25329e21","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.95.tgz","fileCount":111,"unpackedSize":4612799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiATJ4CRA9TVsSAnZWagAAJKkP+wVPbc9RyLofSJ7BuJ4E\nNAHPWOS325uHOWE/EuVU9XDSPSMNaQGdRdxdON9TmskGAaVsuj1VuF/zr8L0\nA4pT5KyELJ7bGKwfl7LqlA1RYxXkXQ7SxpFZVdHv9BSWabVn0ZSmm+Td9LoR\nuWmglqt/fCepWjmpuDSirIT8JeTEgDWriqldigAekYkw5h2uHF2uhYTtVRxO\nOwsHh09/bNe8yvs4qo31G+przqrh5bP7UZFAeWb4Fq4/GqQaTOPv/dyXRUmQ\nGZq56zHNpVsXFr4mRqovs1d4GIioRA9PfSbhBrQs3BvEdkXw7nVFMc7cAQBe\nRzoLHsfnBlXp3PSUlqFdjJSwuXSBekUw2OMtC3J5GzVOrpeOQdOhyxLv3VM7\nnwxm3A2fDDS7faSGeH6TeylDT2vXkvUjJnWfqhA/79fyyUxXuRTjRo/jpAcL\nXvXcDR7t7KkROkXDG6vsg1mTJkkTiB07Uc2WXRlu6X2xrfk57zFvzTv+upAf\ns737v60vl2j/M+wwVfPC3VHsWk4yyFChodbkNjRJh7AuJb7r4ucF9B9UeUVU\nYPLszyTXdVauEIm21gR+tt5pEAaX2wSm8esObmqQJpJH6oykIEAa+mRct6vz\ndPtjv2I2D2eWo4OgLi6Q/Ob/RPWIEhi5GjnhqG03O6T6s4pRVRVYb/LxnJrp\nRyVo\r\n=9cuz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID1JECHJrXObhZTitgXdQCqz8QpBKbynaCXZT0Of38MJAiAs3zi3XqvJEMQUs+ijohrY3Eu/9BTpF0/bfGQU6NOzWw=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.95_1644245624124_0.8636219635677633"},"_hasShrinkwrap":false},"2.4.3-beta.96":{"name":"ecsite-form-builder","version":"2.4.3-beta.96","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"975aebe1ccb7026f2bd7e220eee1b401a8c2c20f","_id":"ecsite-form-builder@2.4.3-beta.96","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-pKyQb7yZk7CU/yO/PcmUQoeRhzH0wUIdTvbDlyDwwBJ5JlndUgQ4sCdocG02Kh8Lzo6ZwKTEmjLyk712cwlw1Q==","shasum":"c13a65cac3c6a34a894ffa79091559526eaefe89","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.96.tgz","fileCount":109,"unpackedSize":4589026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAjDcCRA9TVsSAnZWagAAMXsP/3T3aijNDWu5QYcR0T2g\nloPKiHNcJx01YzHbQicZkpYzxUmi6FwRrjBao9WOkgO2ZAPCMEMniWOUiQU5\n7QkoiSYVzvuxgw6upomBudl5Rur8VFOvXHkc+HE15fDNxV8oTPC3YOUFjZ0K\nzKs9QLkJwRnRzL/t8z1x8795xaonEOl7HrfFJrr3kLvLaaRkz73ataAEvd60\nIH2t5g7BRn2kz/gg3zUvjykSd0SbjOXoHP1WxqoBBVBDBf2INMkAXuukBS13\ndm2pHRplruN3s54l1iJ1+ygbQJSQnzd5srJwa0bZfCxk5vqDUqWG4BjeKzlo\ntn6LD8G4c646keKFdToexVz/MxWrOE4rjkH0TFw4ZWj1VSix8zMFj5Hs5iAN\nfWMelUQsjx2hHvE5JtHHsVJ2YOpFXHrEWq6YdPv7TxplhIQkZiOuktjbFImY\nvE1mubX0DlUugEFS6a3Q8UEilEMMLuUMI2s9z41NoKyzPdrtzO5NPgkugy9B\npgwdm0xX9HRxpf6hqN5Mr31J7tqsNHFiNGunVcRaJ2uvWfhp9BcyrI1COH2V\n2Sactqhk0i0xB85QMjE7bS+LXLSME0kSUJceF92PEZFslz5O+BSXUTW2lmI/\niFBE+UBzbNSz2oBImTdXUg72xwScIsIL/xgIw4+5LpokpddRqWQHf0ZG9imK\nOinC\r\n=WrPR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBJrYG69Ya7zpCSSZk8eusziFKW376EvQK55BLWutMqcAiBKG57KE78/pOPIgfJbAfSRXmgpDFwjPJU5xWhFoOc6MA=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.96_1644310747860_0.4537126629234425"},"_hasShrinkwrap":false},"2.4.3-beta.97":{"name":"ecsite-form-builder","version":"2.4.3-beta.97","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"gitHead":"eea898a575dfef2010a9dce9a18f361cfecc51ce","readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","_id":"ecsite-form-builder@2.4.3-beta.97","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-LhHFC8A3BAIZEQR+gFLvyaRZrBlVHmU2jMMsLQpwBbRwQ08mYyter/crBPLElkITsL9LuZjZIvmUuuOXnAtNDw==","shasum":"f724378f6207cc11d70502077abae444f98469e9","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.97.tgz","fileCount":109,"unpackedSize":4586897,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAmFZCRA9TVsSAnZWagAAyb0P/0PAO0Pnag3BWwrO7a9G\nyjG0z1EHUT4WUA8FgwS7J91zrBtzWwvP9cBxuFV0ysuIpLHe2Esq1KDJhGkA\naPaGn4B7wABBO2IF7laYkeEeAmk5E8iknG9efLDlfBgKLKm+/MlaH6n0nL5V\ny3KqI4aj/E+xL35w7m/Gje5AuoiLs5Ir3Twl9Sk1wKhHQJI+wlWnO+uh6lFA\ncg5vNHyDDcbr10Q1dwri8BDDtu8FNW8TmGZ3Jyv3XNhJIX84g2geMN1vs42h\nIVDhrI4dSM5v8n4o3p9gUlVF1LOF2+jIIKxr4jEWiHYy55f2im8RpTkOtE1w\nIxDMRic38eK7pSj+tzAyAiaZWF3ejgvacPuh9s/6ih67apc+t3z3wUUX5tpD\nIP0+4Ibj4uo9mTVIiOBlYYqyZ2zUeKPxLzg6m5xlDOXAwpVIdc0FfAppxklR\nYphY2bwHJEvkZaBBXP/jFCkIr5Z+2nQHRikCst2Dh+izu+YCYE6EsV4E40eb\n7ARm74/PBfLflN7bG74Io/pJUPiFW6Al1Sf+eLgnC1JY3WhGfElIP5dXLuM6\nTliGyMJ8pnwryNyFdF/gViw86fsLHt7us4dxDBooYsYbeqxlZZ36PTy5tkJE\ntnDSVYRclIQbv0uwkWRYA8y2qQgevePBFEC8flcn9doWfMe2FlRaXAiqOojn\n7QLS\r\n=KvhQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIESr0uNaCz3PccEO4FANxFIfCvi+C5lQpz/bMKpGjP/7AiEA122jTfgNrcFXdV2E1iN6IHfA19WDzCkUg66Pd0oey7k="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.97_1644323161486_0.45851935851145886"},"_hasShrinkwrap":false},"2.4.3-beta.98":{"name":"ecsite-form-builder","version":"2.4.3-beta.98","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"eea898a575dfef2010a9dce9a18f361cfecc51ce","_id":"ecsite-form-builder@2.4.3-beta.98","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-jqsH2dEOFww24TxMApnUVQDq3/lQRKSUVHHfZgH6SyIG10HSsrfGYyCggLZKTozmyJKj0kkQqGdFvhuuYJhOEQ==","shasum":"182609638684aeca5092512d567e251ac99ba681","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.98.tgz","fileCount":109,"unpackedSize":4586897,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAov1CRA9TVsSAnZWagAAE1AQAJfEcvWAuGhtmtLLI+H3\nC9cfCwpuSUWpgyLZZkCFF0sOEWW5vIaeOoyWA1SxrCf0MWfY1VXV9ch9YjBg\nT64cpejsYTYVu6C/+gPUPsi7H9RqYPRoVUbtSYz0TtYQiTCIhlpPaKTegz6y\n2aVxqzQfMgfNnDe+whIDpLVZxzoWa1gO8cMkts/tnPUPC+Q+BIEJsrUMXAv0\nxEyPwCd/Og09ZJvWjlLt+DoPEUgGdHFqJg7xAjCdVDhay+j6N1+PVoOvB6dh\nbnPVDQC0HRnSpVw0rGBJ/coGvu3vaIZr9udlFgK25CY5jbCh6vieJewGK9LZ\n4veW71EXLHk9nN68HMTGi5ldkwDyte5rA1k8WSHNmSXpIJEsvRdz6oBmUmnh\nZOFrMEzjIS3mSoOHlQ+UdpvZZAF41XoFQR+YcZK0ZuRp8A6hO2sKC31A9irl\nPIuWdp5l+r7lRxpD6ewbPZvXIJprGW+yp5Q7lmgeuQMzkvIveWdoOrTJYZ7t\ni5ovS6L8X7ClzUawLrNHIQbdm/PAXoUUZG1V8j+d8I6EOpWQlrzsz654p8B3\nFATvT41YULiagKZeS/PRGG1np4jkWOVd+u22X0MfYw3WqsT7AfcEIWEMled/\nXDGtWwjuY5oeoZMoFEEKXyYtmU3Da3Iv/Gr41nkinxhMYOYtIjL01FZpz7+w\nC1ey\r\n=h/+m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcG67QS8gdOREv9+OJ8cHdH+qNkY1ZvHMqniRhCB2guwIhALDysiotrW8Tiiq0NrswCOqk29yHJe+VAEtAjk+QrabZ"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.98_1644334068970_0.5326951860569258"},"_hasShrinkwrap":false},"2.4.3-beta.99":{"name":"ecsite-form-builder","version":"2.4.3-beta.99","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"4bd373fef123d0837a355a2f023156fa28ed0d07","_id":"ecsite-form-builder@2.4.3-beta.99","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-l4ESspKmVnRVxB5D6D816Y4W1pD6huoullSUqilAHvhVFhiaXnkEU40Sgz/IOowe2x2+WDaoAhLdnicXYTeTCg==","shasum":"f3b3bc09f9ac96d4b57955f725c6a690f1309f8f","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.99.tgz","fileCount":111,"unpackedSize":4615284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA9UBCRA9TVsSAnZWagAAOawP+gN1Rw/xU9TJZM5bRMrq\n5GpU49N2qXD9PqyWe6IG2qtgtlszdZ9i1dlJqpqxj+Rd1VVvSZHH1dHYwaf5\ndSg/K6h3jP891pnYiPmstsCVc+ocIxEJxPAgbRcDflYgfr87aqAjtdZFm0YQ\neNZuliYnfizh+dW8dPbxc4uuJIwGT2jIFuxIWkmqKAgRd15ngFW40UuO1vYJ\nCjPa676RJVAWO15LJEHVayWc2nmJ+HQ5gcXhvpaWteZlFuewH9c6d1BMrAKz\nWUqdkmuybhk0dacOLf5aPEwJlvIjp2a3oEx4jchR+Br5I7tcE33/SVxYrEdo\nESaN1vItpUukXbolOxSv3GRn/HwmkIuwbuUOCPFQoZ2+6ss5Z3SdS/e+WeBQ\nNkkZ6+LWsnJU62IBIUeaZqZQqnT9FNcKRMRJtvFWh6L1Y08dXA4JECqdb7bR\nLEukhWMMQX9VGIzPo2ihnpckdinPrgscVbd9ae8BVT3CrjbKZjdbOWr8u23G\nssik2sYBlSCRmwWdUyKkoDB5Wu7J/Wb11Tn/Hg3+vzEuj+wmVXOCIbMY9/ov\ntMw/6DHekeW+a8FfPStRvvj0PT1WloowlKNN3gvzNOI/EySAiI48yOz+yc/8\nN0FFfYNa5mDY04DTQPAam3PHSpnhc7lYXSKoTqOT3f11MTD2pyT7bi5Iy7UT\nLPi0\r\n=Egtf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9MiqrdU36zaspfFdNBbCfpzkbGhTVMGVzx2GbpS4cQgIhAKNO8Z7d3GltJlu4dW+H6k/qAsMVOZee7BnOHe+fR0Qc"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.99_1644418305691_0.7923765208755298"},"_hasShrinkwrap":false},"2.4.4-beta.1":{"name":"ecsite-form-builder","version":"2.4.4-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"4bd373fef123d0837a355a2f023156fa28ed0d07","_id":"ecsite-form-builder@2.4.4-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-MukzvbXJvmYvhtM26cLS1xZOkPXvHINQQ1EjPgiFUoV9DuwPzW8ApGV8Ss4akC2mbPJDfTLyUxPDR5BLeETehw==","shasum":"b9c6d28e96e2ab5edbe1d8c3ea4c3a2fa0cf24d0","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.4-beta.1.tgz","fileCount":111,"unpackedSize":4615234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA/tTCRA9TVsSAnZWagAAP0MP/17iZySWIZHUvQC9Scwn\nvo5TFgQZFlyXAL7WhX9Zo9kzdHMUYO+LSe0bKAM+jhvnTUeNPbtljWjiSvVQ\n8rQeBKfPsvAMpMNajkB95cV2b8SVijJtf/e3myBKzhF+6tyfw+zpoOV6GwXX\ng4hCUxfdIEs/sAUsTvP0VBAN6scrEouIPndLJLAD+0GhmoPdswRNZ9YClrDO\n+GEaDudgjpyfENkgOMZxsaQgg0BY96DEtTza/4thSoyMhsIrYwFyLsV3qXiw\nwMcZARmOcTMbqXNjpnH7E3ZVzXNSM9yRVGFe8JdDhe/ZCawvsMYsU5MWCnbP\nIqrBzREkd2EM5Fm4T7DSe+UuEnHXHsYzfA6YB/YjfBFPOQOUC1bLBgypfEc6\nc4WiuN5aNjMfRZj8z3W+iS8nxtPPrWPFc2rXHs4hUdlZgUcb6mgPC7Aysf8N\n8u9aH274sS5P0rq/59GfylY+Lx4JPXRyJAQvDi8x/xUdq0XQKs7iXyf5cC7n\nUTdKn2AqZBs6VPAQFDZ2GX1tHKFOZFM34OuVvENzc+ozFwQxVtrcKqXwgzQy\n2Mg09R2NajkOOXcOZYPz2xxyDrvoNGwHpQmyPScCdLHM3ZfSTiZqIIK0QlIb\nyEj+YIW+Yqul2bqDdIm6neA8VTnSdpUSd5wBztpNf+X0Y5jkDZacpZPL8RN0\nIFrr\r\n=82l6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZj9x2zJc7Z4/k6MpJblpIyc6Jov4L/gsGp0UdcUMW4wIhAN6FTerMhJ0IC1GQIp39ATiLKjFmQ4rOK6AofpT2SywS"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.4-beta.1_1644428115417_0.24731594876946472"},"_hasShrinkwrap":false},"2.4.4-beta.2":{"name":"ecsite-form-builder","version":"2.4.4-beta.2","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"b2b8be011b8714376408940b4b05aca4e4d980a0","_id":"ecsite-form-builder@2.4.4-beta.2","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-CwOiBonnOFtSYfqlJk6Yz8wrfkB1KcxKQh4QVbyEewfwNcmAtj9oPUCNoTu5BmmzTllT/0gk9ta0dy6jQusacg==","shasum":"f42ccb3ce318cc486660c840a4e42dd0a2f14f05","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.4-beta.2.tgz","fileCount":111,"unpackedSize":4616395,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBMFmCRA9TVsSAnZWagAA5ooP/1nfdrWH7nNyQ8q3MwVk\nn7uV37IZbYmQDYzcMmySburX26jp/J0Lvfa0UJS+DqDoGJHiBDfGMCOCrUxU\noW5fJ79mElEwQQT6yD2aW3HxdxnnqtGp6d06+Hk29MfiunFYy/VUUiN+9/li\nnT2MtIwU6Q2My2kiSvGrKGJg7jkNRamaosDvSbafwODYTnYF6IW4R+8YRiak\n6cXb26hnTpN+eTOExdNZCy9fl8QMjfz+nPvryLwQ6KV2VJZwKxJngEYZTSKf\nCEHcNAy0XdZ8ZMLlgWYnLDtR8UQwji3lkaX77vOpEfvVvu0EHR4uljS0HdUJ\njyTEJt2aQ6qW6IYjgEm0V/SwzeTRCsrAZNPRE9zQQzuUPkAwWoqHeYRHFQ08\n9aFW8DV9wgRLy2ga7N6MTnkUSjF/ggxhdSSFnGZI3JEK31kkT01/NZcjNLgy\nDzagFj+xRo/fnv7NnJ3VWUDTPhmngHZ639Vj7ZsacumPzAE7dUGXWnAOb9cw\nJJ2vKBWVm/s5IJ+eyEMX/jM0yGPBYByPno3yVZ7o5/QuXmfZfxLodvUJi1k7\n3uXnzNGSNS+gIkpgI8mjdPwU26jv+/sLsfEA9zUQhF/eo2aQ4POlbVcMBzRs\n5c+Ahzgtcu7oF0tUukzkctN0M5+G7fqDpyJndNWqpXQuOybfOm5a/aaDA0r5\n2Ugv\r\n=gEEc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHK2dWlJq3YqEiXvdnZe6enPaInPHgWsjIsCmHGpk5e+AiBEoRzEG+/ibCWYwaUJSRUY+mpskjO/Rmawdl/OeTBzCA=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.4-beta.2_1644478821752_0.8940107147389202"},"_hasShrinkwrap":false},"2.4.4-beta.3":{"name":"ecsite-form-builder","version":"2.4.4-beta.3","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"b2b8be011b8714376408940b4b05aca4e4d980a0","_id":"ecsite-form-builder@2.4.4-beta.3","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-H2GOS+z55qWKGla2Q8xrNUDigWhRgCssxRJ7efT+pS5pkFtfQcvVwcqLf4Otj3FtVKhsPY9xLPim1k4vmY/+Ng==","shasum":"dfcad9a3969b44e23de89c2e4c47552b8feac96d","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.4-beta.3.tgz","fileCount":111,"unpackedSize":4644455,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBUOYCRA9TVsSAnZWagAA9AAP/055uq3x+q2NcVtB+eh7\nMFu+y6PTx8CXxqrEMN/RDDYXHLto0SOs/IQIee1OUGWZ8zBLnbxzPrRfUvaA\nDhungzaPT7rTKmfuq6PupUXJsJW4NNOEoVOZQC7RV+SOk2bPwmwwoaZxCH/b\nJGXEtrmo4ifk4y+Q86+4YVs/SsqvZQEpkU5/cLOf0XcE4R5RUlFECrkj5JdH\nZ1ZuZ9F1N1GyxCO+JAbPt84zDvImb4hBOuUc4dFVGt4oaCXegcKI+5Nd6d1T\nOu/hSl7VXrIiSd0MGF7Tn5q0Lz8XJOsOxZGgPwqm4BDaiwjL0ppMOc9AaWsB\nazBPBaA3n3FxbC0lbUAQk2Zi8jSuknDgkW/CLjmTwA2j5nAXxaGzojARyobU\n/OfZTSjmGr9sWx+bjJzqqUYtobnrEzuUMAP0a9PNbyRxTyaWnxzLleSavs0+\nfqNPkDvhtC2wBT2b1iUhPZX3ATO0Og/bSJI2SRIi0d/c75d2xawFHOrUzFuL\nyEK9EclFUeD/y2FWCRtLmybIKqpQags24HiCVFwJiyfjsLY/UWx3ifYDdxkl\nwGUUd+gcglMy6DaftbH2Noc2bPK/q2CdC8CiSOoO+gsbGPGvk6wwFA2Lltgj\nh+hkuUzQI+IEsl5Jdjgf9cbElZiBzrMbpR2brSpseITfH3kOBZUE+wAl3jBa\nw5ks\r\n=bAuz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhm0KAHdNoURcnQKiKf8GPO0bIwdOXUuUFD18JTJ6nLgIhANRPQhYVt7353TdQ4McEn+ih7ead7aGN1TiwD15f99lv"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.4-beta.3_1644512152018_0.4419758204018105"},"_hasShrinkwrap":false},"2.4.5-beta.1":{"name":"ecsite-form-builder","version":"2.4.5-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"59b9e076861094fde86f31f2993a27262f7eea0c","_id":"ecsite-form-builder@2.4.5-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-TekRPT1gTrbHy/Yb2AmlXhFTeDiX23HqVdgfu05F+Iv8pnD5Qg8O9HNXbnkLo9NWgD269V9cx/i+VeTn24cZ0Q==","shasum":"f04e6ab91f25bdc7edcd4456928e3682be879946","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.1.tgz","fileCount":109,"unpackedSize":4597458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBUjuCRA9TVsSAnZWagAAX7IP/12NKWukTzSLFpIEblw5\nG9/86J4JZhjLB6gNyXs5SEy+kTl3krgIomkTpsPQNyjcN8D2oH872AAsewBb\nkt1r5w45g2WcZwAhDZ9frx+psoJnvBXzLfbuIPfax6+eZUMPy/nRmg2pxGqs\nwyjzuS+N/P0/UyV2rjgrbttWRcy1IdKClk8a5VZdghHz2UZVYLrXpIDalIe/\nFXoFDSvFtlULss+pJre/RCnsxhLjwTnxa33CQHjsJtpoWxeJyeWPNolBJ5So\n0Rrk8QOepbgmbcRYrUpmEyUOBM8hjAvKHXBtaxe6RNTuIGdLfXI23hEjbtE4\n6LTaS8VkOQSGYo36VIvPnn/xkZqeqkLBSqBuyG/fBWzbW7WIP9n86H/tAo9y\nPKRu8CcN3824vC8pFrhIRHzIf5F6ozaPmwwm8DQSInOFoIT/jbHuFKr9b1s6\nckW0kscctwkN/rrzlajgcsbDhOmJe7c/Hh2N9HwTq54lWIVMKqyiFbVzen+5\nAFFSv/Dj0b8JZFHxQhRBZQ3dqjNsBkF8eF3KlZHau2F8enxIQDDUTS5F0NR9\neHon8H7ChDfoMUbxvQwCvD5O1nsEmJveuP4Or5tqsxiPAn6xCUDh9W4rvzaF\nXDCFlDk94bTfY0RarIOUPBnkSkvTNw0LOPyO3/ns61+xJvF88VFvRfJrZe83\ncqYV\r\n=MgmA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBFFuaOvL2OvKO2uRTStiTByUSTn5KX/51FrYKvP1xSuAiEApZSQwZmL1nv+JIH4fQhsqSHf7QCKI48VMLrReZtNd/g="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.1_1644513518645_0.8737046519014282"},"_hasShrinkwrap":false},"2.4.5-beta.2":{"name":"ecsite-form-builder","version":"2.4.5-beta.2","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"2da5ff774b8289e81e0dbd0a18322e50a61275cb","_id":"ecsite-form-builder@2.4.5-beta.2","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-iyzZarneE2Y44DJOlgAlA69uLEqolcp2QGtsps50KTj5MpdSAtynXRgZPG6kl98ktInU50ytb4C3H1zX5TRBZQ==","shasum":"b485bbf733b3b9d3d6bf2bb127c1b071e81bcdad","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.2.tgz","fileCount":109,"unpackedSize":4625460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBWvwCRA9TVsSAnZWagAAU4sP/0uzPjvqkVfVuNuUqSpq\nrUUUgbjje67sPjs4ZFx4/tso2hbdMkVQMFoFVlVl237G6RdauItCqQeyhFZA\nq67v/esZ4lg5Hfs+YmwoVxzY9Qo/t2KP1OqmnARlY641AyQvIac5pEgwBIr7\nNDZkNFQ0zkZ8W4igY3Bu8i3oSK/efLsHUioAcMnWzQeqhP7XRMEX0Vd4orf0\nZpg31aB2O2qBT26qcyTfe6LKL8jWj3IDg7VBx9FFT+Yy+JxjNzD2U2sfsz4O\n15BvYHDmqzLoLtVp3sz3IxSuvyJ8B75L0zFA7Z1aBl9vGn7217s3YnAJFGqF\niQkRbLwhd8FvkIXhE2q20oihSArvUf5pc7H3qEpBf8rMHLftO5CfFpfb615n\noKsuxIU7GCTVeQg50h0Wmei9lNDIEYqELyfZJolH1fnR+AP9tj+NfUr8DJij\n3GlPSdDi9g2uG89iRQ805lNVaX6xsWBWwIKGNoKdN6lhGcHY90C8iV8m7Frv\nz+Pfp+C12JgrqTfiKUUN/MIJzt5m4B7sjLxayUnZZ5BnOvwLMTbVewehLBoR\nKpd0jECmyBE2HYm/uKzEyrb2bW/P+m1brLdLG93ZzObK5YysGWVTiIkL1L3v\npkJySFrkuDBmohUFh/dWVuk0h6HNEYq4AAOtsvT4bqnFFf7EJVCZyZK8/1jw\nT8NI\r\n=YFkV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA3C+KKQBlSp7tGP2BSSGshzbYjT5rclv+36qBoHwXIgAiEAvoQBdbuokZBT+ClGswK+leFsPAFYXyqqgoxPyp7vXEU="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.2_1644522480423_0.7912930654036072"},"_hasShrinkwrap":false},"2.4.4-beta.4":{"name":"ecsite-form-builder","version":"2.4.4-beta.4","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"022d63e44b6bd92ee8e13dc8a1b2e83f026fb13d","_id":"ecsite-form-builder@2.4.4-beta.4","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-BRKWYaFVzScJ33srkJZVLFEKqnWdbfqWrCW0IYgTuEfthjf53FbgvQnCBqVkSo5JzrGpjufoz7pEXqpZI/prxA==","shasum":"d9c7dc975352a42a996597207f006f2aba98e119","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.4-beta.4.tgz","fileCount":111,"unpackedSize":4657476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBi7ZCRA9TVsSAnZWagAAYfwQAJaWljjQMbM4ms8BmN4Y\n8vAbDlyQxad2AClW11P9bl2qbIqrMzrcmJjZfSkQ4NmilFmpQeRcFMCfWEoh\nsug3SXmdB0aBXKeR/H6Bl4wHMcidtctfGvYNPpJdaqPNusJWefy7sCMMwNcx\nV0qurRMnSUdN8EEYthqd2nDpP+rlbdUNBeH2OQAAN9n7Qx8TtDK4LlQmCNbq\nYltH0kbJzS+5lOxTJI9aQhVOu5iiVmPt7k80VWQm3xtHDRRgLCRGL1a4wxy/\n+kAG2AXZGuMaKLZlOl8bdS4QpcmxHoMILLGesH7rs5oYFlQXz3tcJLPaw9sB\nfH459YG9hGaDCKiQZIsz/5t9GrH0IHBncyJR38nkr67Gyxs6CltPbmVQp+ma\nEc6qJI9p4umZBcNZmBL0AuoEpL9qcxHpqhtsQBCZ40d8JTFP1ds2Y7MNVuzV\naPIAq/dxVbwtTlHksoYsl2lfL05k7pK3lRUkcYAn2mBMXLL4j3DbCfWR/T4z\nuy5G+4yqKZpgo5EE5Z6ZC2vQ7Z7aEG4OuCgteXDZMThsHzJAnOvlXMB5bnFR\njblQoY2LNobyJxnCOezT2IsV/SFyUihRpPwlCFP/LYIx4rH4FocvT7cFWbCZ\nD9s8OtaNeP7XiusIYx0IU/bDXuGNnoESTAVarzkisRWYHhgo77KszS4B8RVu\nf6xn\r\n=5tS3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHOQm56p76h+0xPnRspXOJU3FIdz7nSnFWCEHEP8rICgIgQS7BXKEREbdXg6halD1XiPVMAheTgIkMbIWZBiTgyMs="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.4-beta.4_1644572377139_0.06356410994544515"},"_hasShrinkwrap":false},"2.4.5-beta.3":{"name":"ecsite-form-builder","version":"2.4.5-beta.3","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"b9c2ac526b44205b30304ec2cb00593e8ccc9c51","_id":"ecsite-form-builder@2.4.5-beta.3","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-TcrjO6ZaK6cFSrsT3sbU9uG7TuoufWEQIRAdvDTmrGnNgnc29sbY2ioX//CG4hxiWmSqglSQ8HMZLkDiOQN7lw==","shasum":"7524abc2e8a987f1b7e5fd3f9f03bc72ff3b963b","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.3.tgz","fileCount":109,"unpackedSize":4598083,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBkd0CRA9TVsSAnZWagAAiu8P/RuARIfK70H9YxlBYylB\nPHFPdt7FEwj4Oqs+F0+ZWteRKbUEFuQ6JWZ3hAwahugrOJscP1Stq9ezfvto\nCE6sDXaoOETCf6ePAbckhAkFxGzJnjYDIABGThcMoBwGHVUacBMgRH1Kd6nH\nSoSalcNsOKGHGUlp+/OZWCTjnSk88UsbL13w5xGhEepwOcHKnEtKqBj4B4RV\n7ZrLgJEyG8lkZILEa1UZf6mDOwOJgu1N9YxoLx9rV9k3lSzeZI2ZnhIklGyD\nUFDJEvfquWFVC/L/3jwEN8wcZs+Qt0a6lqs06e5knKEIJsw0QwhnQq7btWYx\neFmoMcu7nLpSerm2GtSIycf0WFETjNk5K0Sv5uEufH6jQDkbTduWqtoEr0mf\nz7Ll++Rx65rF/r9iHjjKtYD4vywIlKTYmubZi+l14iVDMZacq7lE6t6D1Stm\n1lNgqv5BOKUyiOjDieqAzCZ2aPcNq63iZDWm6P8QA/NwkRaXdf+blqAJLFOO\njEpEICe/9Ral00EOSJkc0swoN4vbJoy1rHNWiSGNTxz5P45RyBa/JaGOCWMB\nnsS9pht9ALNRqjHvixgIMrmllZk23iH6Wp1+OLLrRQ2xn6wcvwUe+GfKb0bL\n7A7pdunWJCUB8/KHExmU4byEreKkR6tgRzzGofPhwv18mZEuGA5hRjhJNgcl\nsgp2\r\n=X6gp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGjZmZbFyFdOS9QfajfMsBNayVDGyh2QpW/XhZnEFQ62AiEA/OOz6dN9W5znIcO9gdN5ZQBPjNL7KiNAe5uisG5QaEc="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.3_1644578675793_0.4583532274434148"},"_hasShrinkwrap":false},"2.4.4-beta.5":{"name":"ecsite-form-builder","version":"2.4.4-beta.5","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"022d63e44b6bd92ee8e13dc8a1b2e83f026fb13d","_id":"ecsite-form-builder@2.4.4-beta.5","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-8RJPum9JbDlXfvxLncYw+QPTNoIqJNZiKIRfQQ/eBq6AfKYoTamhgrDquEzU4nzRbMfKHNJSLtt9HKu4j0kKrg==","shasum":"abf3bf5eac8a13a2fc223cdf94b22be328bcb43f","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.4-beta.5.tgz","fileCount":111,"unpackedSize":4657625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBk5FCRA9TVsSAnZWagAAb0wQAIzlnaq48yxQnwpovaWm\nPOpnYsTPbitM4cWZhTYJNYTIbVl3Cs1Vb2oC6liv65399my5NauundaqgDgS\n30vp8uCDM6KxFPszAE7ft5zr+qYf9onvzu6+POEJpm+o7Jro6TMF17sy3Ebv\nN8FoJWYahF0i6B6X+IBtUMwPLuCGpBkwyrelXDj+kuT4hbeXqmXInqQ8LNVe\nXRO4dI9vBGubm/lqObzU9cUL+L5C+RxVS5J+ZVEnll+2WaxIFsXyMHuWHET6\nzJEAbx6yLI0lco0SAXJICEuTBJWlXvFq0my2b/P3ogRsVmk2bqzb4XHiefcw\nKH412tOf5YVMSxxHbTgvUL0h0qeQco9QLjiI6Ha+nPVCF2YEkgFkZ+qRVlg7\n1nxgYUvm29YBSUsbxzmzRVFR0TwB1l90ZZhuldui5pWueEKgouztQTcF4HDy\nvRGgKpjyLIiK9TICHAAiXXg2Ff7s8TiQR7ltUE87e4n9ADm5DBb3KJRfuRU2\nTbyG4KEV+d+9+z8yFb7vLGAhQz1xVYzRB3ZbEdTMLmPyCrx93VkLnj1WSEXC\nhIslKy23wy21O0uLacnTttkqeczCR3mEj3WkVAgDHCiBSGgl4v+Qda10wsQZ\nwplskS/wErd5iK01ZaBU7EZhdgFYsOlyLFE5D3p/Y4ScC/+8CNvkqRrU0Y+C\nPKA1\r\n=MZfK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCquT0XY3mKCHBgZCxOn4yXUS51JcUXU/B2qWDSCRkn3QIhAPrAJyUTygm0fZQPX7ORn7mwhaPw7HI8f5FHJAheahsN"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.4-beta.5_1644580421585_0.5985907845139495"},"_hasShrinkwrap":false},"2.4.5-beta.4":{"name":"ecsite-form-builder","version":"2.4.5-beta.4","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"cb7be91f92a439ec6acafefc5ae4a5d87be973ef","_id":"ecsite-form-builder@2.4.5-beta.4","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-MiWQYlA1+wtD3syKKpga3keMYTRC0IYAeXeluHMJFaiqZMZPKNY9+0h/5/P9NbdsjQ3+gVqbNG2t0hDtAUuwbg==","shasum":"4f8acf50539fd06873b6fd15a30840532ac1a92e","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.4.tgz","fileCount":109,"unpackedSize":4626337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBk5jCRA9TVsSAnZWagAAPdsP/RK2srreViuG3P4dQ49q\ntEfcN6RausHH6cweoGQI3NwbcwLggyEd/TztzHjrmNadP1v1chLeKssVhZV0\nRRE9YuLEOHGuKkxsU2cEynqdDwvMqPkbHXCiQpfTD3+yCjA40EiYnmSw7W22\nGRwBjGn7Twk7tNQdyXWQOaGLJawK+7kHsGRO5KkmeqZJ0tnk2zC/lqtlnnp2\nL0e+DTPXMa7UT9aUPfymIa4S3wBIgrZ9YTyuMzlqsDWAjfT9IZCeBvarI4Nf\nQ0oP9SZlG06/weAC7v9FaaCMwaMBK0FHfGiuUkQttc1tvwcKXRm6FRArS8jf\nmAlsZQE6o/Q+q2ORczk59QOKeSXAv3t/nFZvztTI+iWrTLF4B9BpJ2slxPsi\ntJ8NxbZpb8SwK3ikK7aI82qUDgiVEQ7Oka0kwAjyIebtVBhs/RRJZUXvjovP\nmhu1cVIZ8SDNX1f95/564dpvI3cklg830SkeFta/j+WPFNsDeUHELJm191WL\nZ+OVHG1dspV0ZBrXSREzFGprnjgdzqp9AhwOqqudVXbfY2PbC75UNVSRs+7R\norti0m1Ab5V/7mtN61RsEbMd6Q/TppSuonf/MbNRI9dTZfS48QJD4SOjPq5X\ne1v5wZWT69+/tSik2vd4RBJH47ojB2eWn2iQJ/hHw9Pc625QaxTN7U84ABm0\nSEy7\r\n=rJqp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDIDkBMZvhPuoYp8zR6miwWf4P7y4fIjzEgXQ1CwXg+aAIgCL8tJEqpwW1pY08X4SW7FbvqL0Otw/eb6rnB1QqNP2Y="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.4_1644580451100_0.10818840788281414"},"_hasShrinkwrap":false},"2.4.5-beta.5":{"name":"ecsite-form-builder","version":"2.4.5-beta.5","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"cb7be91f92a439ec6acafefc5ae4a5d87be973ef","_id":"ecsite-form-builder@2.4.5-beta.5","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-vLWuYWmjxUbylcBBeNdR8rvLsveTulSwbsOjZjilHwNb+c8bruLYbzCrVtiC/p/gR8ejOoroB6gKKoaL6Gnifg==","shasum":"bce0788a8e7780a76dd59b4447c24b343653322c","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.5.tgz","fileCount":109,"unpackedSize":4626014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBlvUCRA9TVsSAnZWagAAbkUP/RCs5HiIj2XSuBTN18wF\nPi4qMwfCI2Kp+cAfPAZJdYbWr5S216ei8YA5OUxM3N/cO73In8B/Sz1Mebza\nnzgDDegN+rS3gRG9EIvlpTTfotN9Qivi9hsJBziaolLMrgu/0hEJh5FpNvr5\n4gEmwsblZMePopSTzrmPFDfCFuwrAzLzSbRLoFnlJdzKn51icx0BOdEQUJTn\nvsoWQO80DvNSVF09UVg9omRVa3fnroQyvhnG8FaLNkZDr2ujAZNEURqSIFX6\na+y4G7Yw9KF+Ye45d0r6X0vVM84JI4aqrCaTL+Jak1ImVii+Kicr6SLSBfFt\nSjsFhI3aSfZt82Y5867rlYmaTlDSrkwSHZYadkol39YLcPE0WYlp0VyVOnaf\nlI7fGjEyOg8ivNA2whlKolMjlIm1NovacxNgD60BwQbt/1wH6YWaRxl7gCmp\nl9TD/QPnyqofZDuvYs2FMjyRmz4OEYg9Z6uZkg9J2GWXczDtt2YdlMmWZYAH\n5djd86wayRIlrbKfjen3EqQKiospCWJYCZ+sIQaZCA96kA7sZs08ul/JUgo7\nKR0gkKE8Fm/MM2uVQ4szopsba6zIiG85zJPNBlCllonurHDRndHYckw6gZQz\nkcPOawyEzA3r/eFhDjBtAwGeC92Dhaznb3k+/H7d6+2w+yZmRZEWpD5CeoZE\ng8Jx\r\n=sXR1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXRNCD/bLMx4GC8ZU2Tzd4co/0eQKqmkNv0KcAeBoFAAIhAPGAr3RwUQszUD0+TOpmRw2JvEAmtPnDIZwEPYnTR6WJ"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.5_1644583892366_0.6701025474367264"},"_hasShrinkwrap":false},"2.4.5-beta.7":{"name":"ecsite-form-builder","version":"2.4.5-beta.7","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"cb7be91f92a439ec6acafefc5ae4a5d87be973ef","_id":"ecsite-form-builder@2.4.5-beta.7","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-8AX84/CjjSFm3NvpFZLLzmBycSixJsRGdDFShRkaSyoLUBmpRlldmAakdxiq+803nPbr6/iA4gIQ4CyFLdtZpg==","shasum":"341d6b5200ac9a12686bda3c3c30c03d06d81aec","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.7.tgz","fileCount":109,"unpackedSize":4626168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBmxOCRA9TVsSAnZWagAA8qcP/iNL2WMB/BhyVkkiPWs+\n08xpSSEat7a6Zfis6UotB5uObfjA5OSUTUbBrqh2NvJFEOylc1QNlCRhkUI/\ngRFHgpnY78P+0/j5Lq94ERrKaAYBW3wzM7TCYQ+wFuY3WfXh8t+mF8efZ8wh\nXS8ZFgJRr/xMjM0ENnlqTvwHfzYx5s9V06pzekipG2CgbECZ6au/YPIWuRaV\nxP7g9A18/zYotgVMqb7kXjVTu0LJ3M2NsaOovlirpS0aiswS9VXFUcmzBAXU\neU0mJHOnB7Ipia6ZQ61SYUOQN2/w53S5H9X6L0/As3bmcW83RNEwnJkqrPHZ\nG1UY/Y+QTeqcTgLdRouscYCiWMG/z7DOG3vlraU76tsAwjffGKItBLTsse0+\nCBb8DNKz0KIcnC4PbLdoh5P8THd4g8h5fKfGqNoVdX7zEYLHDC0ZsPvJMkdD\nzOKmygd5HKmaWYGJa7Zs9MN96El8YUD4zgwBqHwhAg4SeIF7z/YDr+k/86hl\n2esIbL3zoNzBhzecKmzOK4k7CZ0+vZQnbTxr8xR3ZtLA1CVuG4+50U0S7c3K\no4A4ho8B1svWhjR/09KlyvEdr1qk9z4gJZUWISe4rldvWLJeXbVXtFgvYWak\n1EcCPY6GRtCCzKceX09P99A9tsksCGsfbhq1Uz3pwO+3R3QFs6ag+Tu0xFV0\nH0tg\r\n=Qo5h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoqldpWIT48fLLVPpepvdAiOsGIcjtjzYO6BqXVzzfPwIgcKV0sGWrnS/wSJXIt+IzbkFytSq6eJ6z+BGgGXPMdxg="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.7_1644588110664_0.8579904842159143"},"_hasShrinkwrap":false},"2.4.5-beta.8":{"name":"ecsite-form-builder","version":"2.4.5-beta.8","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"cb7be91f92a439ec6acafefc5ae4a5d87be973ef","_id":"ecsite-form-builder@2.4.5-beta.8","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-sfWZ6WsNv7JxhG5ULLL7I/UCoYN9oniiyWI8iqsIiiR0v4UszPPvV767bhyq3/AfMkM1/5WWqMrlItYOKmrn8A==","shasum":"a706f74dc50d906f9775ba35a9de48448ae24766","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.8.tgz","fileCount":109,"unpackedSize":4626361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBnmlCRA9TVsSAnZWagAAXwEP/3QocvD5sEY0RRhGdgf3\noE2N1toLIRjs5YyhEizQE1fYs3iWfMyh4GprsRJ4MxqO+yvJJY7pHlGy7HsX\nYgnUP/mrb+IMEg3dqQ/416+9+VqIwOadC+5wuxHG528WSUiX99/eHVEpf9ei\nLLl2nLN2od7l45lgjZje3jRjGlP9GMldwOnDc5Z/reIjNxmy7FsFxehqRIbO\npNutFX5lXMVwa5s6ZrPWvisK0VUPKUb12P3rrEInWpeimlnififNlFN5IJkZ\nuWaAZFisoP7BRW2bjAforIo7j0X2pzf+7Mx1uX12QZwLkkgsKe0lTmyuOyGZ\n5zUwr8rH6bOJ7jGgRpKbhSLXZBe99/oUuRygAWtOiwjFmePMaZMJ3urftpLx\ntqMUHJxIdwM8ZeH1s01lTs4Sr3FkElGGSP1Vg73VKay8eqoxcQwf6FBqP+0q\n6ubuhRtNSqpvb0MS5X3aF0NAYWMpOSs/Yougn7dKyZW72rGjP644meY83B+a\nxDyoJ7io23um0FIgPj12miUXw0Ea0+wfkDpL6HuUKMcz7djylANGrayiyXXO\nprgMefErqmWKdoRVqQonTCD13q11sjP7CFsxx0vhrDcLkHmth2cKDcKIjpMo\nR0JpcPTXlCXH5UjJYQR6KMsXaIjVgwhmkXycZWvoLS/KDTvsrZPy1ZMKsvVn\nwCH9\r\n=LrHG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCKCeDAvzhL7ZQ8bwQNzOG0wTYMbJOo8zXTIUmMykGcgIhAIf6wVbUIdDO2CHjvOML3TtT6gOJ3dE4fAvWBKok6MGh"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.8_1644591524953_0.8164930557510917"},"_hasShrinkwrap":false},"2.4.5-beta.9":{"name":"ecsite-form-builder","version":"2.4.5-beta.9","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"cb7be91f92a439ec6acafefc5ae4a5d87be973ef","_id":"ecsite-form-builder@2.4.5-beta.9","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-8CtvjlTfzwTAXv1KkqfFv18bqhDbBuDKjgIi28gxJUWfPwaJichMbIEtI0J91dBUNneQFXZBrnVpvZhkDio1bA==","shasum":"48b03ab62d3bd86c2c43a944257714ce2901bdad","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.9.tgz","fileCount":109,"unpackedSize":4626359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBn5GCRA9TVsSAnZWagAAIZcP/0RsudIlqttcumxnPpbB\nK90jAuIBqvD80NVRHjs/H0bM/drr36F0egpXjdC156OP1DQqY+XDAyjhVypT\ntUvv3EliZ92pwiK07Tvb4T4EyM2P+I0oJk8qKUt4z7grUQR3GZ3cmla2UPd0\nxNGPKdFc9PGRa9bkPrl39C+1xABui7djqmpImFalEnUsKqINMtuNot7sD77x\n8XISnAxYDIS6GnciVXNdooj0JimbUWRREqK6/0i+0ct8cb++CyvF3eWgp6XC\nANuGOzv61eFaeqqHgdQyoeiLnGlfyNtAkzI394ke6fMCeeWZUujloby3zvtD\nmbpdLPH8W8SYZdwGelayICxJ3kTGEgwBGWAjCIyjJCNSk9XMfpQsw+18t+B8\n8OOle1sFRm8xuIRMw7M9r8esCu2l0yUDQku5g3pJQWbhaVsTORE4GZKHmdwx\naxif6fB8R+1IXK5KplNONT88swBKdyFeQH1wP6GmgUVq0uYbYBYZX3iNuGhh\ndNJI7CsTHrp7ttf0PINyE4NjK0wGgoMlrQ5ZiTqyVIviTfWa92uVtiPEi3RD\nmT5vG+8xu7kxNbwUwP8ZhIz4Y1nqQwBGana+DzCpz91becQLIOSOBsNUJPSk\niSxz6ps6VZFqpVYPjAj+YqMnbUrBWDQbllynFhjSjDiZ/4p1rY2Day0sg0IB\nRoR9\r\n=QYfH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF5Vw93u2g6sCZnYe8NuXlX4YHT961lO2RexVzZVBmcQAiEA6PkijnyypsfaL1sKXMcrjqs44tErlfNcVnixYig9OVU="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.9_1644592710428_0.01820726674196549"},"_hasShrinkwrap":false},"2.4.4-beta.6":{"name":"ecsite-form-builder","version":"2.4.4-beta.6","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"8b5cc0e53728d5c37063e74a9903a2bdec93dced","_id":"ecsite-form-builder@2.4.4-beta.6","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-34vnJEmzaGn4ci9wAQPYI1OJn5GmrG7HVY5NEY+gmZS5vaKIAus93Qo3SrZRdAl2Z5VUG20itaSp6lYuUn1psw==","shasum":"51ec3920950f0735fa75279a714887ce277eba32","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.4-beta.6.tgz","fileCount":111,"unpackedSize":4657421,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBpJBCRA9TVsSAnZWagAAtJUP/1wH9A4oPycETpvYf/dR\nlfT9RVvSmKkRFI5Yh3brSuqDo/L8Ao7fhlgdKfBgn8v0zRVfHdqHFhKK1pQv\nSbYW8ZDhsTdSnZ+T0ji8suZP42iw6O57T1qJJkJtVva6cqCchPjGn7FkOWO3\neSzkHoAi5r/lWwTIxHMWEa2Nh9QGYECZTK0JuGXnq4u2fNia7etjzWV1a01H\nQ/06o59ypCrww5eJQMdoRpMR57jUp6VB95o7UDMRl4vMxzzvsOT/f8g5NkgD\nd9zWpgiwDB7edOxvJamWhWAwx/P2QM9dQofF3d+LFXkso1R79P2fChDX8/62\nh3grzRw70+fzz9ii7w+gk6sO0nUG9oISiqS7n9AGEwHkB0APBrLMjWuFoS4p\nq0JrToAULtinTlIWcy/asXpPavOj2oGSF0zEEQk+EIznjBoEaaHxLp945Gt6\nYF9VNWad395xvv0UT9LREf13RwBZf9C+pFsWsiZiAhOfA8ghGvh6JEdKCWEN\nQpP9ByI5yDquN3vrTtkTNWen9+1AUfbuc4pYso0ihTwsmgswGB9njcX4WUt7\njoX2rqt3OQgx9T2iP+ftV5YelthAG/XVQYZgEOelRnRUsBAionlAVP0fGKMr\nHgJXCfYNQl4dsxeXBaEqMKJronego6XNUgDX3XoMePTQR/UsVZqXalpH8Osd\naa/Y\r\n=dj2Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH/O3qt0wJX5x51W6ZZxvvlKBPNXWVUhkjWsQRfCtWMYAiEAqa5qO0PMY3a9aBvQ8EN2Q9dO9g6MrYHGRPlns0KgAXM="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.4-beta.6_1644597825514_0.4939733156311299"},"_hasShrinkwrap":false},"2.4.3-beta.100":{"name":"ecsite-form-builder","version":"2.4.3-beta.100","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"cb7be91f92a439ec6acafefc5ae4a5d87be973ef","_id":"ecsite-form-builder@2.4.3-beta.100","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-6WtsCgbpUC5r6SkPlrZq6ZzzKvO+2O94JntxwKVucOq1/KIBw/dclrsBkmCjy9bzTMXw0R2uOJBsZAU8t1z5nw==","shasum":"0d88688c97373ca11d5e7d9f9529de3f7a8c4970","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.100.tgz","fileCount":109,"unpackedSize":4627378,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiB7SZCRA9TVsSAnZWagAAMj8QAIXr1xO+J2Jw0PFvjCCl\nakBPwoEMMOwTq18ruAfbHwA3CxQICTWBZ9EjAhC2l6xBY5sIUSrnT5UrWxw5\nM505Nm7f26V8tsnwTY/ZJGnWkqtVnhunC4KtKEUD2O8LkhaWipY0Ur4CKPx5\ntUuFvAO4gfWNZW7K2tD9+PgpNRhTCVxj1Mk2G5Q3jpAOEXtwuComOD/Ed1VO\nf36bYVsiiG5NoRAK+jpASXwwGTKkD60wKpsdl5xAWH/qFqjS9Hx9kNi0955D\nNWye/fww7JrUw/Ux8bn/EYgbGSNSt/ft3kdjuQjvZxdw+glZmDtNKeGFvBN2\nVPDiUs8WM7GtfjHIVVqEjQkb28exJUNaZC9VwR+baRkV9FScyGuqValsP4Wq\nIhQh7Hm9D8wjFrq/mCLVUJBEQ6MDZZbqsflFjo6XzEOUnMjsOZ7YlXMdALXZ\nQeIUz5fHaDlRQro3rgVqrWqzeDaSvjhWGOFewyQIBqINcWEm9QyZFBVWlRi7\nkqZMrijcFMycXEWPn7zOIft0tuqd37SLc44+Su2B+CsKIfc7OU8KeG38Ah3n\nEOX3aC1rDD76BrLQFq0NZgXrX+AXlchtnYthU2O0jOWWlHv9U3jYbrO48Urv\n0JXOn2ulkimYK8gjLgqYVj69Rbc5/yXyPDkJgoIKh7rDNVr2tvLKOzRtwC9S\ncDbR\r\n=JZci\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSusB8Ese/ef5OrijrBsAiufhv5D8hWJM5lf/9T906tQIgROg2+GYz18NE3x73CpQwzZsxbSVVhgK6pLo+ygiBWWo="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.100_1644672152852_0.8718185183418898"},"_hasShrinkwrap":false},"2.4.3-beta.101":{"name":"ecsite-form-builder","version":"2.4.3-beta.101","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"cb7be91f92a439ec6acafefc5ae4a5d87be973ef","_id":"ecsite-form-builder@2.4.3-beta.101","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-HVnYFodHKPisLcg88P9YtVbBoDaMyAWyGVShrw+E9i0bwQzJhhQgkX1i/5NdLLAB7z0H9Y4aZYSRTcJPAfP02g==","shasum":"d774bf9d7367c1b866d87db70f5e2234ef433de4","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.101.tgz","fileCount":109,"unpackedSize":4626854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiB7jYCRA9TVsSAnZWagAAjvQP/0FKkx7ThgMKTVLuc5x4\nC/gJ3T/33rMznBuWikC2eimu8Mosf+Y2v+JAsM+O5A5Ml8CfNz0NapifuCV0\nv8Bdm4dEbBrqfQr7NmVrW2xVbZoKKnm98DRyDWNV7gqRuOCC5vJHeLSP41D1\nKxrTlyN8H6ufOuLp5GOOAwFYdq7MF4nL1pX1GaTropH2h2bHjqteib0/5wGz\n14hFQ59DLYizGvScJRV7a1FWShXsq/1dQC6jjx7Cg1L9Pq2tqmHmI7LpTQu7\n4NUUek+ocv3zjcEkiC8nE+Os3RKD1dADWvcdUjhBmNqLg2PaPtulyCac4hJ9\nOvqchY4FVtaEhhxj1qy04WOdPeAOoN662ZXs4D/C5CoHoJFgMpiiOSrFU9fC\nfaotp0LvdR/nPA5JqIrGi78cb8dGePaeZKYpm9+vC9nfTi63k5O7jYwxit9A\n98bujd9/bMUfEJ/LjwrD5yA7W4xK+meYnhZ5MJ+0fjIHPn76ASt/LBxfPfYn\nI9og8xZfCChNf9Z2Aca78KcOv9ml81vQse5y+Q5jYsGJGgKVSQgQT7V6iKDo\nxRFCZqlvc/xN5MlGf7Na76LQMoOxB64fFNrKaTNbZ+/PlE3AkZLwLxfhuMgD\nmupZxc7x7qQhD4qAcsuWiwWGjF59K/rYaNUdKpMENfOmiH44Z43Dp4/LCu8G\nKd1G\r\n=9Pe0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1GfjBqG2Bw7HWGCvXonyZ4zWJjM9lTs5EtjufTXVowAIgLAjLagMwXejc3nqlNFEUx4REHJVV0jYwr0A18sQVbTY="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.101_1644673239819_0.48727445398276603"},"_hasShrinkwrap":false},"2.4.3-beta.102":{"name":"ecsite-form-builder","version":"2.4.3-beta.102","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"cb7be91f92a439ec6acafefc5ae4a5d87be973ef","_id":"ecsite-form-builder@2.4.3-beta.102","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-uxVwRmW2hJtD3AOXwPm3xR9CVzfKwEU1OQkNH4WlJ74j58/WMBRr7MCBXnL8KATjoUS3EXspg3yzQkRj0yWAWg==","shasum":"69f7158a57278229171416936952ac6e66f574cd","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.102.tgz","fileCount":109,"unpackedSize":4626864,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiB7v8CRA9TVsSAnZWagAAnQcP/A2wwVAu49Ata6ZC169J\nf3wat862oAaEnwVuZpvjkVtrzQ+gZC7GPkssPXyk7HdBH+HGUDBdVwjbdSQr\n+6f9LHvTp2qbQ206tzVhh/Qlld0AVA3a5Ubpr3A9XCTcsIUG30irTUXJcpgT\neUKU3QyYCcLse/w6vDglA7vRbHW/M6eSHCvGRozdQT5XfGupDEOwF8N7JIp7\nWSdEJKIn5hOGwQLsuScUT/qXOWce7YFa/+37w8fGV48fXc+LWFqIT8qBN9ga\nP6rIgzh+CwvzKnqSfSGXp1wgpztQ/ZQ59KQfaRbPwGdCxmXspUVPmhscXcGo\nnTFAuWblExEm810PkOSYaVHLvoEyhqmdz4vxIg/yJ8rVKxv+hTxbuYLT8dF5\noDOyYHpEWwqAlIBCIAg0nI7Lg0JD+nI/uaH8brXyoGUPqgMU5TE/HTaL1f3e\n3NBCguZxp+cu3ktfLmLXu/ON0n74+IXa8rArfftyIQgm9k73EmCk+IwDJ23P\nfCCzuWpGGme8fdTyWbJ5m2VuIyZNTHOWzuu2utM/floE9Iw+I1j3Qh40NpUT\n6OngUiWC1Q+VZSYC7w6Y3F7wfKMoDmsad1EswJwI7749Qlv+u9lnd815q2Dn\nb4GOUilab2/BJX76NeG8LQQ7TGIxCEm2cuO+/1I2+1rRE3ZvUvyRGGvOM6yi\nc/ik\r\n=VrP9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDIJ4yOARD/0P1YVDvYY1VdsNHxG8iVpHa2QtUAhyaNjgIgBSO+oJQrJKfKMoWMsZVy8BChfzHxU8tyREduKm9MBf4="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.102_1644674043882_0.9898482921320659"},"_hasShrinkwrap":false},"2.4.5-beta.11":{"name":"ecsite-form-builder","version":"2.4.5-beta.11","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"8bd1d607280e6352f454170474065a90fa3a95dd","_id":"ecsite-form-builder@2.4.5-beta.11","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-BiaQMNtI9xhaQH+PZxRjLBTBEii86Vg+nZ5JIksvGGnrrNTDLWCUZDyYPMHezwUZvyeCxT9sI5r+3Qk174FndA==","shasum":"1270dc3da5dd36662bdaf972a2c467e65fb01d98","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.11.tgz","fileCount":109,"unpackedSize":4632230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiCjy+CRA9TVsSAnZWagAAUisP/0JTn30OCK1Vlg+AiaBE\nkQ5evCBtmF81PX6h4hrhLoh0EkBBmZzvc/sYtHrl+DJUikZtB34Jes4LZlrf\nYD1x2CVBOpmLWq9e2wFIJ96aGqIL1hrjau589bQdJbNBtUcnZOGtMfmJx6ZA\nTqSFc8C3v9H9OoPjLe1kpmNUZQEr+TQRS4LCL0nLhmpCnx7f/jJCiNCrHsYk\nqdrMBnhtPhOYtiCQuhFw2OjnLi45anhyH+2HI2Xh4x51393wXVl/E11zUMfD\n+04DfPjMlD7cX6qvMzQ9k0KFdF4iHVc4M1qYNHpdeVJRiGFqW/CVJG1eFrZ1\nUzvcaUuRpt4CBgGq6d1oEuPb5zoXitB6XyEItR5n75QXY9nk0vjiSGD+aa5A\nLUfimF3LMsRuf8MQo1UEvgAimndJo+EJzfiH3sdnJLoO6jIxeOjQUeAYIm0M\n+THf4HcuVYyhA/rbZNZjxFyzFj4QPulelCxeJXIBvaIjRw6qpU3Plr4SX1qe\nNddK0Q5IqxBjTzUmGZUgRRBvV1zhGP3Fft4ChAoTfN0sadrZk9jO30fkSJOw\ndI++XVASOrDEt7mpmsfH0clgKS/wEoBiy01iJtNIhyo9cl45STsSAx+evRWx\n3mDBhePlSi3P66ZDuxf9AgsOwuAjyWZus6WmJA7xkevYuHi+/gcV/cqsGpZP\n+DK1\r\n=bYZA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAnagNpfhS2bzG5yebsMX4X3M0q7KjBUfPlBxfiP/QXwIhAKqav0FHtzAiYY2Fz5cEXOD7krefB7aIMm+9KRJ6LW3c"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.11_1644838078659_0.9826081851759425"},"_hasShrinkwrap":false},"2.4.5-beta.12":{"name":"ecsite-form-builder","version":"2.4.5-beta.12","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"409932a73009d7a5218edc017793f43778151e6d","_id":"ecsite-form-builder@2.4.5-beta.12","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-P0PYjtQFZ39RG/h/YnMtHKh5uRYuTNAusVcxVN1Nua0McyBHfIVt/RHZVWvSQPqSkzJo0uMuEtviSaczs9RGlg==","shasum":"592a31a4c3b45d4e6913f87808f6710247168882","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.12.tgz","fileCount":109,"unpackedSize":4659039,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC1sICRA9TVsSAnZWagAA72MP/0okC3VvHymDWJkY8Y0B\nTbVPIVxkb/zt6xs2SxOsfGrS+uq9LfkxdLp8x+GAmxKVdMpPj3EGZEJo2iv7\n4oY6K9aG7wV6mIvoWSM+556tQn8JzQYmFsZTRMpDcjqspPJf8KV2o20bRnUn\njzIalxfvcAtMidmC/mI1wMmq1aR8z5nJofnUADVQKVp2k+5DCdGxH3XAvg+8\n/gH8xfppGEVPFw5osBcy9TGz4zY5UTOxp2eC5qdkAEoUlZpAFC4h8HP+68gU\nfSfK65Jxr6DQPVdKbzudMASxT8hujNcSjcs9FhRtqtSGFl8+Bd6oq0LSTlRn\nUDhq0kHYLhJy9JcCzjDXQpy0abELD1WRJl+d7kgmVdrhIE4wn5k5P4i9NlAf\nQyOF+Z6lEl5+S0ISl3LB2VSlZdd/4sh9QoaVT7kVn9kDDkdCto/wZJwm9ShN\n+w7uFBlP5VxNNLbzikqIWEMg5X7xY1z1QSz35vQqPYYWsLPv7AZmty+EWaRu\nexTkwrDHK98NH+fbToibzvyKQNaiG3jjvZxJkaFp442yrCIWp1BaDJnmsoo9\ngERx8CdMwbY8StS47SetwzTRb2ntM7sYHU3AoSVjCGxffkV4K4IeQIThXYc2\nB8r+2PSiKyJPAeERMVT+K3RRX6b7q/fOQEzObfR8+AHriYBd6PY/d+zEvqza\naWmz\r\n=tObC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCs3i26ctJGL9/S+pCwi1FhXrMX7HouIeqmxg1mpzHclAIgdgQekGT6SXc82gHI0jIwdryi9x45peSX20wx/dtltDc="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.12_1644911368217_0.2877667015648697"},"_hasShrinkwrap":false},"2.4.4-beta.7":{"name":"ecsite-form-builder","version":"2.4.4-beta.7","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"a34f7e9157187de9f36c0b5ea59549d10fb26811","_id":"ecsite-form-builder@2.4.4-beta.7","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-/OOlysqujbr3i6uNbWagKhwZLdSCY/zVdPH+KyqeH1jmaO5dOAKsIL3jL3LJE9+8CsG3kLfui1+dxG9tVlEB6Q==","shasum":"292ef98213be0278ae53d73c7a4028cdf32163c4","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.4-beta.7.tgz","fileCount":111,"unpackedSize":4629096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC2vsCRA9TVsSAnZWagAAV1YP/iSU3ZnG4Qf2UjQYbXr0\n7l3rNepJ5l28Tref/OUPmDu/fexp7mNhn4F5ztywhhOJtDL9qbWn3dp+DjSj\nx1ZJMl0eJcruYvaNlMcag5fQfkrKLwZarE2NauTVQ1YbsLPKaNuQq7JF3qnV\nu1MYYF36Nl1QHgu+Ytorb2zQrIRqOkb0UZmnq6ktmiGbOndbsK5uvz1Mc6a6\nxaukGvur/P6l128MwbF2cDe2+cdcLS1kG0hUbWzRVmchM3QrS/r7UsLx9cP2\ntlDcH/Dm4QnOo0n+DfNN+7XU9nI/iCjUbrqiZGJU8szdcPIvT3qyt8meTpdq\n0seoOhjGxJ/+CC+vJYUV1os/e5s7ZJIZ4wPIvsazWyTYnaMw6kwcvf51S59p\n0KuwfHMTey/UoYSQaIK/zc5JJu5SVefoM6ec8+C/7DWou/M/fEmuePmiIfX2\nZk5qSfH2ON1AEscXh1SX86+maR+2hMKVv8HjjgUwN2NSNEvVch2N7ospw/6d\n/YL0VnWio+ilEg49XGTvkEj8stW3u7KoAaKaNbMUpRzvNeUB8ykHswP6qF0f\nFvjXEh50dwusaQ10VfclRvEJlmnRfUSOMom2LH6S6ftPwvrvBZT7QH05WfvU\nkBXBImrj0M9lrLfDeNfo6gUxv6H1gQAmaV7NgiCv+R0qX8+CUugkJnYM5ySZ\nVNPw\r\n=+wT3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLbvvMd/iADYK7nQPN4bKMqKSrplwYpLdD6dhyREkLqAIgUX5Td+86F6T1Or7avlQo1qMu3+xE2Lh7yUKkV9Fn7HQ="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.4-beta.7_1644915691907_0.8642340015900105"},"_hasShrinkwrap":false},"2.4.5-beta.13":{"name":"ecsite-form-builder","version":"2.4.5-beta.13","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"2d10f4c6a052ca50b4d680c3b58f826b0f26d4ea","_id":"ecsite-form-builder@2.4.5-beta.13","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-d8sfarL4f7nuoUriUEaqQNbq8J+JZopksf3mOTfb8/+lqPnRZZVQF8t9nq8kjZyMaopQCrYzoNC0d6MOdqLqhw==","shasum":"7cdfa365a1c976f1918bd9f57dc3c465915976ac","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.13.tgz","fileCount":111,"unpackedSize":4662464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC3/SCRA9TVsSAnZWagAAQnoP/A1o9LQht6ZCcopiarba\njs8o7kubnSdXJnrNvobbNy57K//Tlc5X88lhxUGzNW42EG12H8Dkd8QgjzNh\nrY2YesTlVVoEm1dXwrNR1Vs1h0RN+OPkkyitH+Myn3/oLA7JeQ8rOeOS3DHS\nxeGv/7azBJVDjdb9EKsV37xprfXO5OSLMdU+MbP8kwHF0xX6WwHjwNCsZoJ+\njnWAVScRMpatiAxoTEyyysTtECIIAWSwCwaONffU7xjuxWut5xeDLG+gEiZK\n5objmH+z49GRuE6xf0JvGxss9qHtE650uzkF52mJxv9mObCynRN52EdHYPY/\nA8iIokXrvQKKygV6VYVIUrYoHgtJDUxA4BBUSIQ0QhomoN59yuUKBbxM/25v\nbUCfQm1+3ea+83gGPBhYhI9CIdYtcmUtNLvLBbtl7NK3lWGV4a80RDaUQ+1b\nWH1m/GKpSncu6xm3rY11Eyq8m3oTXX93nxlvsw9CmgLO+0eC+9E/d8a2xSeE\nag3dh5GI7gnXq0bmghg3FbiyqspFeWnwIwqT+gqMor5UoN1XB/FgY2SRstic\ntncJiMDwMAMW1SiR12mj75IUkk64PZs0uQANLaJb+SS5dJvsjqwUPvDjn6yH\nJlJzz/BuNv3YnWHxGp5ChpFVygcrwKJ0gaRmoqjuMK5hRWFnx83utffw+QAk\n+VBp\r\n=h/S8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSDHeVbWEcRZpmt3XvEjUcxsdUeFD2SeZEWUEu+9HPkAIhAJkDuIULq8h22yuKBOEuR8U04GtFopbwznEzC+AmPrYY"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.13_1644920785964_0.09061355433974061"},"_hasShrinkwrap":false},"2.4.5-beta.14":{"name":"ecsite-form-builder","version":"2.4.5-beta.14","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"adf632afd05a0b79162b9555134f6902bbb6b008","_id":"ecsite-form-builder@2.4.5-beta.14","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-wjTU7QHBOyWAetiMQqpMH+BON9nU2bVMBM7Fc1/ZfOaKvp8fCldX5Q/LruPPdQAF+f6XRSVWvjV2nFzLPzi2FA==","shasum":"0d6aba513f537b7908e499302246a47beb713c97","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.14.tgz","fileCount":109,"unpackedSize":4661331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC4v8CRA9TVsSAnZWagAAxQMP/2d5TxjY10xgIs0CYpBd\nz0ymmOe+MN2jrxSwJDU8yWC1kpTdY8mL8MYH7qJEp5kt4jICShqhZzhvW+tg\nl+UHnVjA77qwFz233eDh1QKgLVOe1iiB1JUpHQbjOzkudHWmCthi1ggysqqh\n4yrzGTOhNnuO68Ge/O1k7ZwcY7EuIxeTTBhliUlGXy668nnJ0/Na/5aESPPq\ny2WQOGbwbqZHwIMwZdFmbkMFqvrdHMWzbLigjJBfF7n9WPa1vVpKsz3pxt17\nbyZA4K1rKi+WLrd78N3I0lMWfhI8VznvzN/N+gdwsFWt9lLPLS2qkXuFjExw\n1OoPk/wdJKvF1ZCGE2cH00EqQFhImM/qp2T9SQOKsD1v9QsmJ40y+frZ4h5y\nZwVBtDpP3cEcv4WSW2pLrRHahqSoCHDeLqBxhpurYaJqc620NIS4+g4W4Lev\nBcRO/yGkd73BwcM/CTiQffkzAiN+l40TKfTlPzbUBfpNQMDABc6PKsfl2XJv\nb4Ae1aGV893YTS8KTpYW0zJcCaUOFraeXTu0gqbPtppP+FWJ3h7lePclbIPk\n4WaPdjqwQNAqCdO/p8LiLBLYCBXw/0Uat+FlhCmyuazLSiS0ojMaBz48k2I3\nVSjthHfBTgyBLMSlNhUwrFKdxcADgti5+cOe08NmMlCMM6b1KRJ8ixcK/f2M\nqrjM\r\n=frOr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGIfLHjncb/FmRnN15Q6MFOnzX2R9JlLdmWPbRkrn33sAiA8nG4Etx0BFCGBKDi5etAHn7cYSwfx2nHcBGUwyjS3jQ=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.14_1644923899768_0.4893788616247885"},"_hasShrinkwrap":false},"2.4.5-beta.15":{"name":"ecsite-form-builder","version":"2.4.5-beta.15","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"96827ca22fc6dd0b0a7b3422123ffa895cf48711","_id":"ecsite-form-builder@2.4.5-beta.15","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-lSWjmfm4so1TiORGl1Lo2nhMuAab1ita8i6NimPiCCaBA3l7uOfzgE3zxMI50h1j63JlVajFZ5pwKfZdbX5sXw==","shasum":"d1bf14c3eb98de847f6ea6be149524b0a53041f8","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.15.tgz","fileCount":109,"unpackedSize":4661331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC4zvCRA9TVsSAnZWagAAHT4P/R2Z8NZohrx/L5+VPTsr\nPBoDLdkrfUFj+GqJvP8T1PlVrLMorDGAG20Vg5oLCX73jqEYmaH16BjYX/jN\n+aVmlfsi+yQqbcfnW6OuqCibpJjZ/0aHpeMtFSGNI/YWbKlJXVnjQhfQmri5\naQryeY0Z0VIU7np58/N5UUo6ougile1D43IYRfj4QI28XMr9OvNgloA5GkDf\nYjezMMQXfY830KYm6prUTS5c6trO0UEczCOD7SflGJl1npGtSgn6vcX3bVgE\nuI+XaXBcqesYs1QXHTMinSbv5yjThPFDEVkdf9xqTcglr/IpnHos+q8dc1ak\n/GHibvy8JSgbc+4TI38/XQvJuEl6y7qTN5RQzqbND37ItZDRET2ryaMWlJgQ\nWj82FS1z3PvE+W9FufP2CzY8VfzyjDVf3wlqfaEq9KxF/2c+wMGRIHLVxaYX\n2VZKx6TQLgZJ28iA6QvfRlK+yc/TanLnxKyL3tEIIpl47Y9LleJlMySQIpWo\nIQAOmPM7gxUtKAB3z20sElbvCJ/TUb/oO4HVeac2y9mxE0t6oL/4Jp5iviJw\nI7VwZim/L51wLBjbRd4b0QWLSKw+DTRUPXnOeM9I1RIXTI47JaYm7NzR1nou\njxq1t9cECZ+QkoaUkS2oxFo6psgz03CXz74qAyVPdlHPYtptkqUa3SLAw4+Q\nRW0E\r\n=9YfA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDh49NfUUTlsBXOBkY3vhkfb5udU2+9MwLBjbqQzhjjSQIhAMAAzwq/3dWP6nJJKOwo72CxWgDqEv/ZOyB4iwy3Miqp"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.15_1644924143438_0.9498830319367455"},"_hasShrinkwrap":false},"2.4.5-beta.16":{"name":"ecsite-form-builder","version":"2.4.5-beta.16","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"96827ca22fc6dd0b0a7b3422123ffa895cf48711","_id":"ecsite-form-builder@2.4.5-beta.16","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-7ra/U0kd31G95t1A4c1sGog4AoUSWmXaKlfbLFnfT/mEwZAIn24nznGnDmih2x6FCTavooohy2LDyMUUy6d07w==","shasum":"99a4f5580231c8c1740a78a72d98a06c05a9bb2c","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.16.tgz","fileCount":109,"unpackedSize":4661331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC5NeCRA9TVsSAnZWagAAl0wP/im6MLyG1cc0oG6wDK9A\nLstrek/UMggsq3O6PTMgkPIU5fAD+6Ni3TZ3/aNRt2BiStVrbeHwbdjQIVQa\nkvrZc5bFGdTkZQUsWn2mLkeZ/TiiYEZlK4DHm5t3Ervei5eL7mcWfDyyH9wT\njD3EI2+r/fZYcPHIwL6MvOTYj4hREKQd9ldLC2ddcHApavry5w+0K0ywR+/G\nnfz0LVcrqXCYDmjGqb05jTmqLHMueV/hj+rJ39imv9XavdZPExk3r7YB/hTJ\nCYV1gkQHdcwf9Txec22UvCgPCsd17gU3EVDR+Fsy7NwV5CZ9Deg8jKWxpzhn\n4g1zbvUnf+j4ipnQL/IFPgC9tVSNHZXkK3r4FWVz8rid2A+03s8enGdYJVAv\nJRQ45sF7xje2KTiLi1UTmVpk34kqRGRG5mPqUt4EHnQYriMnobW29BUOtEIi\nx9plCy47hc/FhS4Y74wsJYeX20XLf9mE4n2xS/WTavECM1hvUmD/4D+QfYrC\nLs0EF47ZWE8CD7J/IkxSi4eyNDVLddTGH98STadB40SYSwRcuijJNZPdmGM6\nLNuSovhm6GatSbmyQoUGkLIYqCx0zbcIrtJSw9SUPtEOEF7JncH8QS+1wHUK\nTK+RJHViGkYLjrAzvyh9n7dGPI9F+ugretGUvayAyHUkMm8POlyheSDYk4uL\n51gU\r\n=/3X0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXX5A37PO00utxopq7oAxzEFBlhcd04nph0uLBzzWnzAIgPUe3r86Enzd9rZbPQewJim1fUwVX34KgexKFOsUSJLg="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.16_1644925789906_0.956909023255746"},"_hasShrinkwrap":false},"2.4.5-beta.17":{"name":"ecsite-form-builder","version":"2.4.5-beta.17","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"b9974428c64df32e396904251c1aa7a19ce58a12","_id":"ecsite-form-builder@2.4.5-beta.17","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-jGhjrz4+0AgHYWmEV0ZBRJJosopTxmwIxI9YFfocQFIgV5igADlcU6++4cS1dNd867hP7KPM0wnyztK7Ta8Luw==","shasum":"0b6da5aa76a72a2fac9a7a5ac5d1c0fd934c9834","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.17.tgz","fileCount":109,"unpackedSize":4661331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC5UWCRA9TVsSAnZWagAA2J8QAIoFzxGrtptxd/VlnWTu\n5VFCHfqnzYr/hDq8v9wfSFnDLZCyofV+p3CTChzqvz1lMX4M3J+EEx9J4qeW\nWP0A0sTNM0234Pz90C6wZmqNEH74wHXgqkSGNHUJjoazdaVEDAywF/yW0GET\nZPDsLrDc0oiti2kKt3vnBeoKk8rIOFHn5z3LDOSD52mpWb6Nwq6j0P2OmaYk\nbJJu404E+ymaUtQ54HyQ05SjuCZD+EzJJcgfrtkm433NJXGV5cggmEoMcJt+\nskM5UfeCIlUJe1mb0c1Z3mDfX0hzThJp2i3nTsO8xM+vV0Rl1gdwGSI8tn6f\n9ddOFl4usCz1EaRXHrWuE46IAVTbvmL7MoRPZWqGCb5F56otrj0rh9mBCuc/\nLervr/ZaMH/6tIPNxauU44c9ddy/XZZCJdhR0h/qjE45VS1g8yY4nwnu2Tv4\nYtOPs8XV7BgnpTzppStIfWjFfNiGE54Bx3wAPYrFbaCo8413b2dC7VeE4GvO\nafZCPB+sZR2XrXJD4y8KUljKU7Y14iu16R5pa/pS+An0qQ3sk56yTeSpoxaZ\nZXq5ZgWEWwLdeRPOKP9EIiCh9UAJI8F4OyoWM1XI96wgubQp2+Xa4xq9uyI9\n0JzbzO6MPbs0NHiae22/3dXhKgMVefrQcSHIZW8vO3qoGkcZfIebTg6m5D1P\nZasQ\r\n=DV26\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0pEjfUd1Z54kBeCjQQZcS3rYuFzEz3dLKcSMnYn3foQIgCDzyI+wOZDxTFwLDQgIYVErChSH1mEuTrJJKvnw/fiQ="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.17_1644926230562_0.6080649125940907"},"_hasShrinkwrap":false},"2.4.5-beta.18":{"name":"ecsite-form-builder","version":"2.4.5-beta.18","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"b9c7e9ffba6787f4d84f5322643cfceb47a21842","_id":"ecsite-form-builder@2.4.5-beta.18","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-0AsXge/1uitcDL2JwSskgGF8e/yx/VtXZ2R2lWJZuMwHxm4pKvxKZ7qhl8/XJ2F2uV4vfDdCKAmf+CivPrvI9Q==","shasum":"3cfcd25df81b8b70da3ee4720977d022e6f1fd11","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.18.tgz","fileCount":111,"unpackedSize":4662878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDK8fCRA9TVsSAnZWagAA98IP/AhPLctsANqWcyNnuUw0\ne8IdBc+oDZ8UMvGtIQLfmlaVHkFNSE4N5sgLoCR6oiFyfSLMcXr4d8ld+stn\nKzhQNmqb9yvpYWrZIj9qUIeOnMDeF2wq63wTm0+gaSUuox7S8Fy6yj9FKC/j\nHr4egINoHBnfGEBGnIE+6HjHnpeFgYWiwHvf5sXTifgN/C2YAcuhHEhfQ1vM\nqpVaAaTX4OhB+/sbnKW9WgNGRBb6aOHVBR6mN/1wVd2PaAQa5qpM5R9bmkI6\nJ/Px1Fmh13ADMkT4UeNBqLVUB2LbSwKlwJx5KdYfQAA+Upv23hdGDw+yacC4\nwSYOaFqGjB9YQM3tPWEJri8TxP5oM3MgtveIYTS+FKP0lkXnYuREM0H00jny\noZty4F+jgylQh2urRxjBq4ur9j1THjmgjvbXlIAEd+X7CRPHNqGt5Mxnv2TX\n1fcTjHNzSKmRNvuFmFH3R3mF+wS5i6AIQvwm8oZ/n4fFbfVh9aPcpzrpR0TN\nb4cSHHb7n1ZjABOv1t4HJg9S1LRUmpkD5KQMOEQHmrev/XyDfVyP3mICsCpb\niH2CUdYSeL12QvYdU4qlA1Rb/Y2ZiNSrsROvqVINShjingj7CwqqZXbmHaAE\nq4UBwCNIBAW7yiX8rjMa/Ix/oalymhWK5ij7qioG+RvaiwZ/xUdJ28GGQZtO\nn5Js\r\n=CRyX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDq0SgFO2RPJBTpcwI4oQOsfNdy+GK0+c0PXg2B87v3KgIgf1xy55keRrDjI60RMeC2Wc5zOJFPut34Vwe1mzMeplY="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.18_1644998430987_0.5985360011849743"},"_hasShrinkwrap":false},"2.4.3-beta.104":{"name":"ecsite-form-builder","version":"2.4.3-beta.104","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"77f9d7e33ad4cfd991332860cc4fb0146f7f42e9","_id":"ecsite-form-builder@2.4.3-beta.104","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-xZflsB2YHA0UIYnYoIgJFNby5L7R3h6Yl8sBDP5v8rK2JkRNtCHiLNCY4sds+rZXdIR2GJK0ntl6niBN4c7H9A==","shasum":"ba937339b849e078ec624ce0f2b9c8e8e29986ef","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.104.tgz","fileCount":109,"unpackedSize":4662940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDhlKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrekRAApBqcwg3nD43iEKkQTCp8c44NTiWpXf/nAeBTMfbhjuZhkZH7\r\nBnOy5WHsNrIUAaDhHZd5/ENfYLru8PSRNEsBa3caTtB20DWAxgnO7RquOccK\r\nDVRRPhs/uWoHnLt2COTsRrPFKreROkBhKAPXybqgKleGrWP+oP1/R23zMkhE\r\nvoG03iA6GanTCHZdW5/ErshPotRqaFTrjnt3qxTiOnGQxMHdR3B6Xwz0ahxL\r\nD3k/lc85Tdt2SAWxeCa1tXryBBGOX8bum83mtraXCQoh0zwY1WzO2b7bgdR/\r\nYn4fIYR/juIofoY53b5tYWdd6j0XtaOw2Xy1ylIRpj+/94hhEmDnsMOUMoqx\r\nmOR1rzVZaSjz5SZ/77h7Ue3iTyOJUeOZGTYemlL6ZMjeUkYyoFtjDyboX/xA\r\nu9boTjgSkeswF7DgyvX/VcgI4fmFlYEcarvgNWqjo93sDzzqZteGjnmtlUhT\r\naF+g2ofodQw710TgLSAvlW9LVMqYS6ppxL9q6fdFsdwdOLCg63ZMOBkhyeKo\r\neM5MiFcJ0dTakdfEjEbhcgE7VwRrHXNLh/sNwD8arnpQKY+7pcmfGHY6V5tH\r\neLyNNzvFx5Ae2QzQSesHsdTzOXSz3nq9W2y6sTvJrZj6ISZjnqe0tNhjZ6Ze\r\n8LQk8td3+RUwiny214tbUFC602zHgdRZrVE=\r\n=LE3e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD45O4lk322O57+1s3mo4ry7QpAtsBil6mbvi9wkt2hIAIhAKY5sybsDoebNvPtFzzKS9qoA6/uDCpDViddcoRpRbhk"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.104_1645091145905_0.0187722290840171"},"_hasShrinkwrap":false},"2.4.3-beta.105":{"name":"ecsite-form-builder","version":"2.4.3-beta.105","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"77f9d7e33ad4cfd991332860cc4fb0146f7f42e9","_id":"ecsite-form-builder@2.4.3-beta.105","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-1VkQpHChq2lHH9cHDR6qmyRItillss6TfHnAKjJ2cvY/R1mHSA+jrYZVWb+XfGAGfyPnrIhghKpNn4jdpTB4eg==","shasum":"c4ac23b3f4587e1081ed9c81012ce6e152714144","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.105.tgz","fileCount":109,"unpackedSize":4663014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDihqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmowug/7BaLB7ErLaRA8h9/Oaq6ICLBi/b7mQI9wabCuVvbSZgMtR8bZ\r\nzbmLxLhNmAeV4PR9OCflvkbJfM6xYutDEFwan+DqWJnjzBq+tMJZexsVPwRr\r\n7p1dlSuLVHdC3G8AO3/9hnsOumkVLErDrzM6uCbh9QYeCMklRzkJhfjNOcvx\r\nDGA03GRJh0CyIn4ant9a71nUpnYWZBYTi7eYAtVStXRUCf2njrCZ0wGcAfeV\r\nyz035n2mL4+Bkrc1dHFroUaBO81pEc4/8KIL4+TnPFMovZYk8vKr6fzPAele\r\nXeSqfLbj1jEoX3MINN5VrYUFr7BfbHsxY1g1uiweXG0NZOokLMcfzE+oH+W9\r\nqJ2yAvHuGC/pCroprlFgi+b3/4CBZrraEj+mvRgJCDEbGjA0ll1x8epUajgO\r\noQwGp8s0AGZYMlOr5PM/zgWvGaCw+XDXKZZyBpNobVS8+ayjH5kMOnhDvBRn\r\nzzhP/Q7NS1yPVTAJdePfFC2UhYlIOEFvh58ijjA+He+Ifl0cIo3mUcAmeas+\r\nHE8RuI9KUFKunxGzoemkN1uQBXjyHzYbnivFRvesBNRhaXe5KjUihfZ9qCu+\r\nMtz0ht2StwmULh2DWNNBUlwxrv435uxcDGg2BhchTy5bPKddemSyVATAMIAy\r\n1a6gL0lXmbrAnAsdelzuY4CUy4+F1BdiMRM=\r\n=lzPO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDW5XTCvGQpNVQ+Xyq0qjXLS3dbOssurUtREXvaQeo6KwIgdyn6+9ISUf7hkEOwCIVCDZ8UVLrRBOLXfzsVVxnlUig="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.105_1645095018538_0.8058891803705248"},"_hasShrinkwrap":false},"2.4.5-beta.19":{"name":"ecsite-form-builder","version":"2.4.5-beta.19","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"f85573c3ad4d71a6bd3de26f20717dbefee6b46d","_id":"ecsite-form-builder@2.4.5-beta.19","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-aKafm3f6pXX3X7rbXOSRWHcgWcEkAG5NSvdI9SQ2U3XgxOaoo1JfGOQPDq5ktw/ir+mQXrOiIn3IjusynjzW1Q==","shasum":"bf04d0dbfbb6187c67a468e61eea8a93f53c0568","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.19.tgz","fileCount":109,"unpackedSize":4663459,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDjAxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmom3w//URsR4bM981DqY8gnXwTjLh0AmSu6Pe9Tuc58xLGuyuaOSDGO\r\n8aA4cGJFhymJSNmHBz5iQzLgZy52I8xVSxglyR+gBY/L3IuA52/ymnJvgnEn\r\nSYcIEnwmIDJBjvPsbwFEQSzJr8rZ1W6Y4MLZWCHWTWOW8yhK1vwN/NuGKnB6\r\nK6ZcAqT7s8wgslja/P+JEbltYx47UyEHqIDhfT/4bGCYTFfksP7SNJKQjc52\r\n9xo7QVD4I0piiRHhrynDYNZsTkPAErX8HEK8XSR6fG+ELVXaRHHmilpWVD8P\r\nBXN1FBx0buclr1fVXhWYcS2qpjOnxY1cbfSa4enYVQvjp8PfL83ul0oN9F1N\r\nQM2LDNK0MgqkfA81eV5Ii66+0OIz3Q/zz7c80NU/6j+LIoYKupNi0LpbvmI3\r\nCgD8ubYzz3O9DRJ6NHkyXWpTlSRMroUjvT//l+RTeqI9LdIfZM7nW+3rrkUi\r\nYFKcpdKx1PWK4L6O4Kx76Owmsf7yyk8pljjQpr+nUrirvS+GU5RiurO+jk0G\r\n5bveRTQHSsNxgquGEMrDf3fs9Cq44NKREnd2XHkcgy+yx443SnbVO8o9splJ\r\nNrSV4rfvve/yZs4hMjJ+/SNB1ImGyrRM1kB09dyLVJEiJKD1gIpFC06IBNh3\r\nyZfVrSV1drziUksZG7a5a/jedWHc3hQbLIA=\r\n=6LSF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD455LZp3boRibEeUBAcfuzzvU4NZMJUo+9OkTqW7eVBQIhAOQ8wZcwd9ZAyNQ7NSBkqsusHuSDr9fgXUJcgE8AmhL9"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.19_1645097009736_0.9263508609977635"},"_hasShrinkwrap":false},"2.4.4-beta.8":{"name":"ecsite-form-builder","version":"2.4.4-beta.8","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"6f3a04c8209dda8272832a29199f87be851f19ae","_id":"ecsite-form-builder@2.4.4-beta.8","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-qdczDIO8uxtdN1+kEtGe63yVcSxtFh9Nr07Vmq5k7BGWQ+u0Rn99qo+zLGtk82P0gNkNZcu/9dfy+ljxVa1XfQ==","shasum":"1693517615a9461122f8bcd7dd037f0cd95e06f9","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.4-beta.8.tgz","fileCount":111,"unpackedSize":4631062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDoCsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2ohAAmvTuMtJnIp+4CdgcenYpY+BBxah5qsihulUGhOkP6ujGJqeW\r\n/Usx89fLWZigeFxLaNohn1fPmWgs147S86Eko1R/gTQU3i6YXqoX27jsUlBv\r\nfmfvRrfb6YEYFqGHJ83sNtpjgKJYqWTY1JLEOSDiROWsC4KuLZwUD5IfUwin\r\n3kchkZEU6UHF5/D1mCr/6hngr1Ei73xY+/ezcITVEAeGZZoMU4SBwkpxrHiZ\r\ng+eELH10RFXg/0RwNZJDDfZQQiegEk2/OOgbpXV/GBCu/dlzJaBiJ9LXCALO\r\nAXBG9e+84xeVb7wlacvW5DOtaowKYmHj9sXw2D7V4IZqWviId/hLXeJfh1tm\r\nyBusx/ngaPVp/K+gKw3YXHKv0/M6W4AEsD+p3EWXKj5wlK9G7hEd+N7rrlE6\r\nG+wOVmzEcsQOOv0syDSjA7P8nqNbUKmdliwj8LeHyQbsxrAUKaecXuw5OW5N\r\n8C4Q96k8Axot8ttTK1DlyrZmXa5JfN/ZLIIXTcFnkKtvyVBcfjGnQjekRh4p\r\nGTyMcTbizaiLi3zr09xTn1FXYb/qPC5Eeq6E+1xi1KYNQZhdDWe/qGxcDzNk\r\nV+2xSpjVFlQ78DcWYamAZZgrymYP5ZwLgLkfXxaAlQ+JZtMOf5mial8gSHux\r\n83dSSfNq2zx1nhERqIgOFP08Yl2/51x6Ha4=\r\n=oXXF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDJK2wi7GroG2VvK41aLcHkUDUMbw5o9Ib7+i2ZxEF+NAiA6dCKdEDA0FB3pIkPEdave5ikBET8bS7SX41mSKudr9w=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.4-beta.8_1645117612596_0.822074160854547"},"_hasShrinkwrap":false},"2.4.3-beta.106":{"name":"ecsite-form-builder","version":"2.4.3-beta.106","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"6f3a04c8209dda8272832a29199f87be851f19ae","_id":"ecsite-form-builder@2.4.3-beta.106","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-CtbJVcCCN9bJLmTtcrhYMNTOwVZ5GwI/EULcmHQexDWcu2QCM2S8pNO6iUC/YWiIWWJ5FDZy7jj6Hq0fJ+sX/Q==","shasum":"48ca6978a85698429b2b9968028d934a6290df3c","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.106.tgz","fileCount":109,"unpackedSize":4631647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD1tFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJKQ/9FNu5vxJhEhfOMNE4LvVIawHp8LJnivCQEl2YiU2FfIQDMatI\r\nC3UPQemizpqdQp5TFjSqIXVG1BugXW73YzmK1BkH5ZUnhYRHRsZ7Orj0DyVs\r\nl7dJX1+EWyu2KvHaEnV1kpJ/pZzODI36JICLuyxLsblWdjAKSlfm9pjkce4u\r\n8mWGOvtLHvWM7YURG/ZoMyxZSeT1Hf+GcyDtc60AmdiIgqC7Gu4tSM0KqVh/\r\n4fOCDIUWHOLMOnDYDOJHiDyjPCaIg2Vu9VUyh0LNK7SlpLvgLO8zcom54nBj\r\nXFmSPPGDHbq1abHT+bfZNfITpUVF2xS8DdAHhCkodrQ4X8o8WUR/LIXQxoR/\r\nBOxDguVf+KbLw1fUhMOr6h/lAHQU4fHvXNAto7rLtcXeTE08tXZ8Y9iUu/ct\r\nxaR/4vb8AJwUp5d75QkrJRGOhrl0LJn433sXlz707+H63x4zaQiK5LUVgjq2\r\nVthuUq6QMTXnTO1cuKStu0Kld94sMFu3doLzQTLhccMPjHOK3Cv5gje9xSrh\r\nPJmWJiE+5yg3oAlz6fCX8VTuOw4Jsnc+gaL2l/IMD8N39e2kB5Q99+psrQz5\r\ncJ5vufKznmZw/NoI7hq3CwzcTk9hP73Or8nzgiL4yelqSbks9ZhQI8dSkXF1\r\nP22YRQ2E5c33bbqpnq2JPvW2WFxl0x6vjws=\r\n=NgrN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDvgf//lMU1uHtIbn0n0hhqnpBQtCSyUNj0eSf3UlFoUAiEAofyVieNN/jplzLnXgXxM8NH8fpckm8JPvzexGp6ZDI8="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.106_1645173573101_0.14133806271622307"},"_hasShrinkwrap":false},"2.4.5-beta.20":{"name":"ecsite-form-builder","version":"2.4.5-beta.20","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"f11b65578b509a326ce28b490853167a8a795585","_id":"ecsite-form-builder@2.4.5-beta.20","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-wBhlTcT98+XCINOQkIdrhTBp3r4KM7xkVGSOuvvr7LI8zNnTvtIaoW/JSB3d+KX6HGvvmUIP0lLWvN/+1k0ofw==","shasum":"1b3e98544b95559987cc296d4e9fd46c84c75f0e","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.20.tgz","fileCount":111,"unpackedSize":4631063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD2v4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqbRQ/+P7jue4811BKU1DEKwGWaP1lLPMU8iUTm99eRwELSc6PB+6jB\r\ngOI5wuvj2RHXrn0mWYFd1E/OvgJqgCEBPD1QflTGb6upn2ASicSNEebFmXPz\r\n+Ddl21EHbF1UZMcIXYNtmT2uXJ4tO6y8HLLlun+uXZO9D+EOIx6wk/ZevscA\r\n7pGq7ocU2uwoRHXqx83262YQHPpP2a7u4sG+fyRfjS0JoyBtCRCLDdHhHFml\r\nO9sMGfDiPRjiwcVx8JlALPphzdjFAfoo3GQ/5JWstql6dXpZcSzlSTMru8WD\r\nKaL/XHkOTYJp+FLheS0sfzxKzrqcyYqNLol3E743jNY4gdv0fB53p+c3oetw\r\n3qggukzyYdz6OvlSVoqFRzIGPOv7TQ4xvsLFF3Z4F/1cLpMVwCbob+ZSTA05\r\n3Wlkalwqva0swvRsmN2h235m++tf2Q+jEo1qj9A6G54vFTRg5O11tbKPatoz\r\nNlzXviipqfqj/Fe9R42/UxBXrCHeNPPmLE3vLUVSZVvHRWcuDA318N1KZ7zl\r\nQvjEVQJk2EfVh64Kle8ghSjDzfqB7T9FyJuRANqCm7YbmQN50AcP5S3xBcaq\r\n355R75dCraEgSd0RFnBoezRuTzm9FBo+GtxTIa+lH3Gyz/KXBA95Quu8PzFX\r\nM6qXkOL+4vF9ac1pGaNEfVS5oCZUC1NWFJA=\r\n=KzhD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDh49msLo4ZmlX2e1TYC0vfgLhUy9Xu8aO9BM09OsbRuAiAlqBd9yyKd92zXLwT4T32LXN4RAt/G5Q7sQfL/jjqNQg=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.20_1645177848633_0.03160031557566989"},"_hasShrinkwrap":false},"2.4.5-beta.21":{"name":"ecsite-form-builder","version":"2.4.5-beta.21","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"e6afea14ca567279d8dcededd081680c65f57373","_id":"ecsite-form-builder@2.4.5-beta.21","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-5T9jSEv/qzQPWpTqTIYjVptGgpMy2KXcyzgaHtp/JF+kjnpLBr9zm7w4n4iySOQAClHjaQdXnrePSX2EvvPFCQ==","shasum":"84916f405109d1bc85b424c871d656413b931df6","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.21.tgz","fileCount":110,"unpackedSize":4636307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD3S2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrgcg/+N8Kpo5AyIJDQfkMaWsEKMcOqOJPVlwdlHuaCzTmV06ZOMzVB\r\nGbjtrRRSq6GbgG53tqKmwI5FtgFLhPaF33FWN7lmf3idLcQ4TyB/qLBm1Huy\r\nQ78zbFUYy5lHK43Boyq8w32IqCBJQM5eC/IufocbdNAokR+pFpk66qLX21VG\r\nJ4PahXQXwGMhuMriIesk6YLqU9yG5dC1NGZGYNiZd313pM24T0ZvdD/85bVJ\r\nQeIhvcyW5RYELzbY21WDmApMJJcMWRt8TsnCyY5HwP66MFAesj9Cl2MDPggn\r\nDdnEg2hSKEP8LhcfUnWmeyd6siN6X7XRyXqfdr8FsW37Q7qSrlWFsyOPs50i\r\nCK29Hfu7N5gnDQo1gGMkPFHMNmAGTZojuVwfjtNa0W1HYHzsk7K+7h6Y2XsP\r\ny5Cs//HTRr1fwKKB1mm7fNhBmvUrEjgFcPS8MWxYqb8Epq8oRfMPLPRWvN9Z\r\nwG8bb7u96Su/1IHWqhDNNCCaQ5gM64cO3ARRiXWnIGEKPi0lwX9c1Iu9A/gK\r\nnUMYEJJXzgezWfp3LY39/BbrKl103+dbQN9gQ4fLM72OjpSN4uasy9XrO+Ra\r\nbXqtgQtVfc+20p/U4z5mIBR7UMt6ySiyMrSoy4gkpXQRqZXCyVfPy1WfHyx7\r\nA21PlMzfdJFsHMFsacB7QV6RmdTuvxoRwfw=\r\n=ipJL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJ5K7dn760J9OhPTogLL14IeiV26VxhHnIWQJp/nn0SQIgI9c2DPRsKifUQscmb7H1V9QOGKLH0/nne5NGlC1VcgU="}]},"_npmUser":{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.21_1645180086753_0.1908552647875421"},"_hasShrinkwrap":false},"2.4.3-beta.107":{"name":"ecsite-form-builder","version":"2.4.3-beta.107","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"6f3a04c8209dda8272832a29199f87be851f19ae","_id":"ecsite-form-builder@2.4.3-beta.107","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-T+R/5JWbyloyFbrr2zWcxKx0oh1wD5Cbt/fgxH7lcvdGNatyZsyq1hw7KuUAq8AZGofN6OEQ8uVNJgldJl8A2g==","shasum":"34806a1baf62ab4f0b7593a63e7aaafc94d76eed","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.107.tgz","fileCount":109,"unpackedSize":4632095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD4PJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6bQ/8D7DRqpWPYogePqyNiLA6Mv9LOCedrTpjjbRCMJ0qn6USxUKl\r\nt7AlBTeP9kjKD1V1zAf/O/P4MALbDc4aPdM3BZ626DtNo+gQJ2WOsCRUX4BW\r\nxnqfjiiBtTMwhCifAQI0xfcG1gWbSgEH4je/bEir+1ZrUSyGb5MdaPIEMgHf\r\nQz89hiQEZEaAf3TKKKH/hA/cPsu6NuRHG0DqzE15TyA/YhrhORqXwjl0bpvy\r\ntACY8Ils3vE/dLjrplMILA8Jq/vktfWNOL7n6euwXheOpkAMItZ76W4vxfWC\r\nigMnggQjnsWkTPMWF2VuaqBzp0UI6jQu0M+Seo9gwe1v0RynWnHHSbx3EMiF\r\neYjW5AvntlI+WUH4MyG903nIboC8PGA90TMHulEPGLpMiqR7Ruh5XGyNE57T\r\nlsJsyolxo1WsYAZN8Snf+4TJlc+/+UL4RiQiA23QBbZxdfZ1n5urf6S3/fs/\r\neJbPyAvRv1YW6EfZ5ETCOuU2P+aMfTSyBVI00jecnQQTBum3ASmuCpc2w0vJ\r\npvRJHe0ZuvFhHZTS2tIvaoJT0bD7wbjSdiEK94G4n8spuRYOm9OmKAYN3lX6\r\no5vkmNJew77zYQNZWQd0nSPNKvrGoM+oIKuWLqEYyrDBAkeT5g+wUOBDgnCQ\r\nQOxwlsfg5b9POyTp1RSA/O6j3HgOwRG8N1Y=\r\n=wmBf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDbWy86DL6I/NKCx180IwAhwV8IOBNMQpQj+mMwhQhyIAiEAh/0m7DqVQWS7K10lJYoM5i9SpG6wSyJj8eeq7Hk9zo8="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.107_1645183944888_0.5949431718909768"},"_hasShrinkwrap":false},"2.4.5-beta.22":{"name":"ecsite-form-builder","version":"2.4.5-beta.22","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"6b30c333d12d988dc019718f32b3beb31931d48b","_id":"ecsite-form-builder@2.4.5-beta.22","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-o+DhictSijgJAEa4WwtDqDbG5htnQGB5QH0VCh3s63HYe1KiNM6/Otxm9/DhafVqF163YnvtnNRYlymYmVZTEg==","shasum":"2e384a47e81a41e6c17104dee81b6d23d59beee5","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.22.tgz","fileCount":109,"unpackedSize":4664301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD5tpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmooiQ//UowSIkXacZfMbmTmOYI3UE8bgwkpsAk5PcF4gjIGUIfLh9Pl\r\nh4XTQZsDnM48roN5r3mbSuOevHMkO7YU2uN+GVxUlCeLDEXYnlsG640LBgSD\r\nKhLQKApRp9wiSwFcXPIhF0gHUmZ/PmqYSl6X8tWeb1FxZhFOLqMZenDNOQhR\r\nzwFTimkIlyRpnSXjMOAPJtODPFPJ5YKUb8yU8KURgyRrsc5L0F1iWXB4FsOe\r\nMo3fir/PXWR+VClTbxNzXzG81NoDrH+y3/zjSqHN7w/70qv1nU3aKrln9/OV\r\n1708LPCngH7RU/QFG0XnISy2TK32W4fIExWmogsui30Vzf4ql/z6AjdYhmqA\r\no1RzGYbsh/WCSMLhs3DTxr9qSeGhtYkUw+ksTgsjcrqEhBI/GFRogOb65xj3\r\nlK7CO/DiG8jKSLvSQmCYQjy4wThGClVKwnlu4g2mZdIVquGfpU6PJQKCx0yR\r\nHBoCwHtK48GP5SYoJVbSgCrVyb6En4eUi4i912S5KgoBwwtEuSTYIVUXH5km\r\nOIf5gVxsk7dAwXlM9IV/4TDIOLBEGVZXAT3aWKTuehM1C+B6MbPijGscsMY2\r\n2V+mqlQbTdKjKypdKbANlywWw/5WeQWNNkoFIj1DodBMnIqRDksG7NsaSoKt\r\nnzk42r/WSMJsDHOjmFhEfX8c/NqSbpVj9sI=\r\n=852o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8zeOQ/PrcPpLbmuA/9gef65o/FV/fJLponcBo3p2NiQIhAN6xsbcsWMxTGsi7Z/y9jjedNwo6jiD4g+BcOPAwJ/I7"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.22_1645189993529_0.3299108136041289"},"_hasShrinkwrap":false},"2.4.5-beta.23":{"name":"ecsite-form-builder","version":"2.4.5-beta.23","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"11816f6868db5d7f5e946157435c606f87106fb8","_id":"ecsite-form-builder@2.4.5-beta.23","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-RACxVO7i/KupGaMiGv3s9O8P6HpsUa0iLM3p8CC6wb/P3qXDSETI/9mAjeFmc2Xg8AFc5TRSN/pfPPXW5CK1zw==","shasum":"70fa82e7e8a7036fbb0eb815b5cd1c0a7ab78d53","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.23.tgz","fileCount":111,"unpackedSize":4665323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD6FeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6Sw//XqJUHwPWRUmfz4poDGdeJDLsJajn8d9Bp0jVYEtSfQKvqwCi\r\nnI+I1BTzviRYoCgj4hAaplQWDNaUsj+07RrPEbcfMG5fyeOS4DOCE06jy9uE\r\n51W+zoPvMQcFRIKQEKoGC2LUvAQLV+ntfIAHzEw4JaZ/afAh9LulAm5S/KoJ\r\nn20FcveWud1FO0zwOwB7W9xp1dTWn3A6vRluBx4NS3Lf8VXj7yr2Mg8z9T/A\r\nePrehOvkpdvxqKYQvdYzckLmNSkaATswH6AGiu6Cv5dTT9p+wusHhb9b4p0l\r\ne61dltNPuIibVTw6s2AN2Vd7lkxsJotyS7sWNKPw12E4J6/KpoAuwCaLWqpO\r\n0PKRhEN9H8RWCy3mS4aZbWukt4ZTreZvRP47MiQAoaUU/Yn2bpjk4Y51Yduo\r\nIA3jPHicygB+0D1J/nCbKijJlsCu6Bd6bBPdVsPrsQue5bitXxPvzJ28W1sG\r\n5JOATKcnjAY1weBsor6HEWMQ5/ChlDZ/qLClRKT45+flHxExf9lAUNpNT9HU\r\nDOJeV4GNEAu1fMzkZgNPmTzltGTgYFWGzwZj7yRqMe+kpkUsj3pWYP5l06DV\r\nJKlI+1PKxfgDkXIYvbkrcDafXrjC4+WZcqdwj/jd5IiLJP+BwRdR/VLS7ZYP\r\nIVKUrcdP3mK+SyhvwCfEcpg8xaGJ4C7Um5w=\r\n=flr7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZzij+rcBwyxLY7ywzsZzp/kOaZRQFph48QQ+xoFGnXgIhAM1kXfYrqcxH+jTtuHe9RjfAiEbq9gPOrzRhKJrLsRgN"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.23_1645191517942_0.23706722325013496"},"_hasShrinkwrap":false},"2.4.5-beta.24":{"name":"ecsite-form-builder","version":"2.4.5-beta.24","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"17ba2286b86eca6fb3e448c78998b5e243c5ee10","_id":"ecsite-form-builder@2.4.5-beta.24","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-3DvEGGAGoT8C7AZ5fHF4sJNGrfT8FQZoJNGLqloojgFBe/SdvQ8UK/7ssv69ZH010iwSMMlHMblZavAZIVz0kA==","shasum":"ed1b5eb20ccc18dbb46ffd09e9dc8af53a332e9b","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.24.tgz","fileCount":109,"unpackedSize":4664301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD6XFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpyyw//abtxYGY5xp9WQKLOzgXfhnSnsA71fyVWyJD06CkvAmfa5oYq\r\n5D96GfkVfxxx2LFCFTXNw0wvZaeWcOQEA0QpS2j417j6AqTaheSV/6LSeit3\r\ncs/R44FquFFCtmo0G3cz1zfBzzTyT8dcItwj6bjAgwPSyKje//sFGyY3st8l\r\nLQY8X4gMVBpzeH3BxFucWg/ioyOSCH+tdRVf67jR+Ob72GRGZwa3lwFNX7Tn\r\nGnJMvrWdtQwzxVXo66M3H0qC/gsVcjh2BvpL822ZXyJZeU2QCcJtB40YPbha\r\npquDrGab4Frd5Lr+0IoFJDgjN0HQOWCBDwYIDPm5WJleWUgwlsGvWfUceOcR\r\n2cAG82iIv2pCml9mfFdBmkWefScO1xAZtm0Xg7iM2zdNl6X/S6YPtW/KRdKU\r\np6+evCGy5kZs/gshSTev+NOFIGi3tmCmYF5hHxkREysKd/B+1jyJO5HTS4AP\r\nnAfuQxj5yRXwaoqK66YmI7hOjbS4CB+bk212tCUJEY3Ud5/lS6sKn2/R6Fll\r\nnid4SGE/goUKb51KFnvTnNEE6rkO+1obdnvQJiMiZ3zcVOLE2l6/Gy9XmP4x\r\n2n6daInQMpjyi9u5xzDgXWEOV/LKEdTulBBrW/oDlpNIdQhAMyfUmB59NC5T\r\nE4S2kNSfGGiS9D32NuNkHHkihFpGTsodHKc=\r\n=PxWL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqLoJ6tLzBi0lyv4nl/aJ92q8f4uLEwGDw/eqq/PX3mQIgDZ8QblVdMoTNg6ak0vhsq49LvoZFV/Z81KA5kyPmXuI="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.24_1645192645397_0.7536771787822036"},"_hasShrinkwrap":false},"2.4.5-beta.25":{"name":"ecsite-form-builder","version":"2.4.5-beta.25","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"93935c0f5fb95ddbec7d35126b0b22970f994323","_id":"ecsite-form-builder@2.4.5-beta.25","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-XbUmmYf4Gw122ZB9HUogXLOcKRAvnKpGy5iZmfgLg0nqWnY4PioPwGxDLuynTBHrBEbb1bcYEtHRsF7Wwtx3Dg==","shasum":"70563fd69c617910a95e0cdccd98a12779ef4b2f","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.25.tgz","fileCount":109,"unpackedSize":4664529,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD8wqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrkdg/+Kewh+lgOluSjlh1YrjU3uBxqeqM04jNI5LS0pCcLVUkqtnTK\r\nJUTtEK3WfuG/QP2saShHFQFOkceS4qWP8VcItmNMSuAaepe+3JfbJWxgxo2R\r\nckh2PPfMwmF4pIHL7+kKWUzjTK4pasICdWA84x8Qcw9GBKLwRlL+zhXjuxju\r\nr3xwEgot4F3L4T+6PETq+vQGJemU7KLGIjbcpkHSSJaxfngYgL8pSYL/9+jJ\r\n64zppwvn4b+mZcvtaz/rAQ2om5hIw8zGRKVY44rYe/ls66HDeF9P67yB3m4f\r\nwAOWLVmw4NrQU6MaXycZqvwlF+cea9v+8chmRcdkF7zz+ggcs/ESpq/xBlty\r\nL7YuIdRbINtUrXjDjerZngrkIbMl2dwI9ZTItLG81r67WgUJIzFm2GRQ14Mz\r\nzED8kqzOeyIFLeqg13AW4ZwkuOein2OGhnOXB1uZJZUAxhgviQg5RA8PJ34X\r\nLZEvzO9XOjqrdcZ8/gX+gYWW8na3Iv+BJGud0puibNY0yUr3dUIE/aclDR3i\r\n818/0w6OpJP+D9zY5ryZ9yWiaX7Px7aWGM6exJjN0t9KoYhd4w3Qs3GOjd62\r\nAf8EakUehbNK3mBwGkoKltZ960No+9R+SFYiYkS5FnFFFLzJJUh3ehz2bFc1\r\nE4vLNAo7aYUUIN1bOrqydrnbWpIAa1qzXt8=\r\n=IJju\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFjcM1h4wrDfhP63INW5JrhkIwBYy4KrppSgrW9x0JP5AiA/iWMu8qvUeNyRkcLdau/d6X8lIKUs7v0XU8GaYqsBDA=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.25_1645202474148_0.6721527955629054"},"_hasShrinkwrap":false},"2.4.5-beta.26":{"name":"ecsite-form-builder","version":"2.4.5-beta.26","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"93935c0f5fb95ddbec7d35126b0b22970f994323","_id":"ecsite-form-builder@2.4.5-beta.26","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-gaAEHqG+/BxtODtxmj3T4OihbAVhqaFZcSGKfJbvRpJGHl+Cl3O1G6AyF6qzEFWka02aaTXBTUW3ezIaRjwOmg==","shasum":"5d24a9eebf3093d096eb9f7452b41083ab744a5e","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.26.tgz","fileCount":109,"unpackedSize":4664575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiE2bCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqYgRAAh/ZIKi6leR8Twhea86KhfVNEsYt/poP1s0BIVWU4zy+Khnj1\r\nEdUnEiDDC0EO9a5owVBCk3Qnx//AV4bJd8LX3I03+8gte50Khnwqx4ueVH+n\r\nBagr8KJ5FuNX7GI1JRTKfuoBIXavtQIbZ9/YMVuUo89w9Q37mcLyuWMuBT+1\r\nbpV1hKe4ZOtXbL+UUjg2JQ14FIGpI1rokxCqTjBoTNgrRAVZCW8rIzPAd9kH\r\nyqXOlbAgfUvENl+sccEpieuYPeqRtcpXxnicsbID7zIq2Fx0r/aQW7tqZ0cm\r\nIvLP1+HHDEfaTM8E9FPUNfz0U9ulV7wl70MnTTKWXEvbTnn+uiTs4buYUY0J\r\n2uvGnmpJj6um4BJYxWTbkuFYVOQ0qx/xC5mrPGHUPALYPxbcyCVuw4QtOtQ4\r\nb3jpH4aWvASWOo49thDlaxAP/T2wyWRp9708IRPBXUfCEnWn9d+rCVWJ6WuD\r\nOeTBjNKk10D2YubohEfph2lkQ4pC5OcUdtc0OxmSXkqrW+dFhNpIKSOn7xav\r\nLpxS7S4SfUEd7rXUi5GivL3aXF2zPFVXWvNNX7nAKHLSfvNHzydYQhSvPWrC\r\nvf4bUZoZTJlCfPehrEfskFWx1tl0F+1uQMNBHvx6O8KbLELCEW8QWWQKQvCp\r\naD4gGmyNmjCB0ECbs8d0yV41pvAG9AkqTaA=\r\n=SvBv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGR7GB1lf3L9HRy3nhkzqjKyoR7cV8GoLDZNtf1jjXffAiBjSFMqCO7SNpMDxKrnA016+1uHAQYQs7bXIdTGV5gB/A=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.26_1645438658386_0.629376099252615"},"_hasShrinkwrap":false},"2.4.5-beta.27":{"name":"ecsite-form-builder","version":"2.4.5-beta.27","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"93935c0f5fb95ddbec7d35126b0b22970f994323","_id":"ecsite-form-builder@2.4.5-beta.27","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-ht94A46rLds3BNei7exP7qvHvoubQ2Bxj+LWMmxIpVYyriIy/t9GeNc8V2vx3/ACO1u/T57TDo9dE8GZqgzv1A==","shasum":"34c15cad4ff59a58b00fdfe8d2920bb98cdcb1df","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.27.tgz","fileCount":111,"unpackedSize":4665893,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiE2gtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXjw/+O0rT1R9B/MJU0v1ZQ6j3mOLVRbYtYmkJeQPjw8NgJrbo4OmY\r\nPraIhkuoxY1vEv3WQyzG6+frvsiXnb9bXpp3ZemeZmIQByad1S+8RfjZF5IM\r\n+u9nNZQMvNQmMPbYla/qRGAZWSEYDaTUb64KwaggaqnmOywyNbLBqxe55XJm\r\nm+0r8HYEAe9oDqe4FJslK8nWARktRwRIQWUbRrIlTX693te89AzonHro2ced\r\nWmxfiHQCsIlDrgck6dx9b2/tHjxdFsso4K/aXuXOxpndxbMqBL0THqGzCJD3\r\nKYKXfO+irV/fuc+DST2ci6hlT1kT3liXhftVy6hKdTbN7+eS+UR9YOdahNjT\r\n4yIryf2g24KzVbiK0XFuFTRGXh5OZDHN4DKk9jcLee13nJARQnUdgqfS48++\r\n9uWX1Tjq86B8SYxkavlxwovY4xLDfXCnIm11t4pa/DVU/JypwxoF0T5gT07c\r\nc+5zhpN59Gyoh66LCCMbkNg9Sag534YEG/4oh8gNOBS2cq8D/qtIEqIoXXi3\r\nI/bsNTNaI0hJjlY8fcHZtI3RAXGIRPrjc7itwqLLlPOBEoDyqW7A3+4GvElx\r\nr1xLQ4SNHGOxwLN426+6xQAbxOTr8GQN8pKoT2S+ovdoB5+bWnj2lKrfUPSr\r\nicm2SaysLkm7pR0dddvBtHEOJF21s2+Eu1w=\r\n=oMlu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7Xq4DYoQiN6ZTjVeiS9oDgzHU6UtP1isujtMS19LFzgIhAMEp5KoO30HGMM8gG7caQVzj8SAE5uK5Iffcp0Rb2NYZ"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.27_1645439020988_0.28429593544791265"},"_hasShrinkwrap":false},"2.4.5-beta.28":{"name":"ecsite-form-builder","version":"2.4.5-beta.28","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"b062bcdd6e3a32d648e7fdd0b5945a9ba320cb24","_id":"ecsite-form-builder@2.4.5-beta.28","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-94DFpZlPL70oVxsMm90jNOwo/F6xmTkZ1NKxxPWioaHZhwAFagJnra396EtyXReeFhos9EzlCNdn85riEYZCDQ==","shasum":"a69c3e6c056a7898a22ebf0f132156bd831886e8","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.28.tgz","fileCount":109,"unpackedSize":4664575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiE20/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+sw/+IntBQdJXVmN0SjufJgddfRHP4U2Z1rirqSWm83PXT4h2jKNB\r\n6w27nfKgwrHLqUcbv333V/gEieU2SfYXr+YhkHh6wch22apNrwL1G+neFkcJ\r\nCA2zkJm39UrGgY7XYOnmkIzEmf/Wccius2WcofB9s1THlRjuJKPTN0SIdDE5\r\nd9TToc0HsGZwFqfj05ffuKxGeA2TkkODy3ImC6BLHvyvCxOGtUe27nrYklKo\r\naRgQqWOqteiE6mZSu8pkBNDUP0NNcg8XnoND7eL8pzBGJjNbeYEfDJj4LcWS\r\ndY2CQ7RdgcZOVsDntnhkSApg4dQw3nIIMMpRODtR+HZCr3+gZe9VfJBhcSJz\r\nlrtzLQE6NPMkUBxq/GYcwMja0LTGGOd2Inv4eUrU5ZwouHDumygikEi4dVvl\r\nRVRrGekcST1Gboe9xdr1kHo+Al6d2AX+IrGgIwU+GcRuBw1TGfpm8FXKwZD+\r\nsl1XFqq23/ODrB7/h0ltGa0Crpv1yEuG3rqL4giSmvHrJMPE+c51Ggv5S4e2\r\n41TgpsdQroLUL2K7qpsL9iS44p4fo9Xipxh418QIJ0WpSx6hxYIWG+oOAqtP\r\ntmJJIuDTJNzcqOKZv2g6rVoU8pyguHkCVj3Q9OgCzvU0rmdU7h2jgi7BHYlX\r\nAHunoTVs6lT7op0mcZZBcM6X02q3Zj57Qf4=\r\n=oRQa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDi7y8A0XQlEVkgXcojJp5tuc08o9pV3+2Z6QpMVymssAiBq1XqeotkrcODCq3eeAn7lRq1sJwF9vFyYlRJzN9lCLw=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.28_1645440318953_0.6607093889685574"},"_hasShrinkwrap":false},"2.4.5-beta.29":{"name":"ecsite-form-builder","version":"2.4.5-beta.29","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"9d23b129756da9aaf10948c0d2cc1bf02d70214f","_id":"ecsite-form-builder@2.4.5-beta.29","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-RgAWnI7ijLZ/As3Ly1ezuXZ74jwojWxjhqsbUqxH48LOuLrp2MgevZztWruB5H3W+xmTjNEz+5rtjRL6Viysdg==","shasum":"60989c844563073c28753bde91fa340d5db15c08","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.29.tgz","fileCount":111,"unpackedSize":4667122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiE754ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9cw/+ISY8/0ZTAX1o8BCS11rJavQ/mZy9VtVBKK0bzSqUQ2BQyv9W\r\n5eh/0SxuBVewU2amGteOGdCm+4SZ30gd/xDBEemcJXfn05H9GkKcuXznlQkR\r\nQ9KeGMqxIlhu6CqCC7E/3xheCUm50zAE7Us0yyqN8gY2NgtLxTMfyfoV7OwA\r\nCZX5ClRYSvviD08hRjjP7eSVbRvrk8D9AZ35Pty9A/c8lcCwsk7q/zzPH/Q6\r\nxx3NUKDBFnWyRjieRS36WPV5MkFD2EtyWJv7GHwl5o3KjSb7SQRPj9kOZ6Yn\r\npvifVM95YG1ZBCwcV4FZl+vKQreqa8jObA4RZRIWtwlQQ1BLOp1no3zrLSR4\r\nKI4f4S5JfVfgYEuWhIrmnThRKSpLBdYr4xxUe8oBogQ2mPS6SJX4ozPb5ype\r\n0lU8KRWaUZGBIHX4rg1lv+4In6Ts4g3sEnjZ+Z3WLE4BFuywwEfxhL7SqhDG\r\nupUiUqu63YNr3IqIs2tRGpyjKc2/tK2nYa4xvz5P07hrE62OC2M0ei0oFmCi\r\nvxo9O1atdlzMOJ60nGAQzNxTHIoFLpShC1t4wjf6oPwSM8G1FkWeT5KNUVWT\r\nccAnlDnTyu7Sl6BnGbztk5q6n1JAy/HQ5sm9rhzu8rBhRTwBXv/W5gP+jBNd\r\n8wSP/WAthQmO3eAauSIAYuAXyF2hcOKQKjo=\r\n=wENq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyx0PhgXyCbUtuCt42As+aNduu+/n2BZmQ6Z1sFpmLBAIhALrB+SvHtO1cIV/GgUZvMvmgUZDUf3Ip4dmL3dxrw2b5"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.29_1645461112042_0.597365665512704"},"_hasShrinkwrap":false},"2.4.3-beta.110":{"name":"ecsite-form-builder","version":"2.4.3-beta.110","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"0438ff178f6a1bb8c3953472094525dec8e3f0d7","_id":"ecsite-form-builder@2.4.3-beta.110","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-W7pyzN4s3vXqwf9W9b52+lkwidCc+ECeP+ElbeyIjPDWiSTWFfWzRD99NgB09sstc+pwat1b8GoiqPLrtC8WwA==","shasum":"8f18bdb550fdb18677520c8deb960ca018294e17","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.110.tgz","fileCount":109,"unpackedSize":4634162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFPs4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrcqxAAneX8rribNvIzpOejk2COf36ngs+dv6ZYSvvcNM4yW1/TEjiy\r\nLaNhTcEWB+n/vSWjPYW7jxtpYlTCn6QDsWiHCB2UBF/i78CdbsuPq7PZSt5T\r\nI+1l5WL0Fkr1P9KK26BDrqr8vN6trV97HtwkkBDTHVPxznR6JbXJXtuFR/Fx\r\nksYoCDQVJ8RmIxtBwCaq1W722UganrEBxpy+bUBI9GVUMpx86JO7Cb8hZfai\r\nQcsXvjY0vJn1yWDLhi2EdBuu84009QA6wuoUzO2xz0Fs6iGjWmIO8obaD6pN\r\n0sLH7WDXfEfdMK2qwpxprcTAMqiTOzagJNZ8F2f+6R0C+HEiucTQcoX5yY4J\r\nBVAcMnOpOSrmDIrZDkDRYeBr9cFe3IhAGsYkmGkcpGLin2vCFg2Cz3wPiPBQ\r\nrkPXe9+86lg/YYHTKvg1IiRt3XdF4uZ05J01tm+t3L8OcK11tBx1GO5tRcac\r\nJx2rJcItQJ7CuT953bMD8F/KqRzgmZ0DU0lXWnDNUwvnp0pg17SukrNJff7i\r\n/yuo4Bc9l2ZF9wxjU9KEF6XzyBxZwtTL28SzWL3DLb6OWeCOmXUYS76MsOs3\r\npIiiHN6Syfnl5be05f4nMqRkZt3WppK+pY3IMOBLuHIBUahoFne/O9pvDxC0\r\n0p36Pv1aMIOTm308kU5JPwLVc2G7N/7Zecs=\r\n=Mi/4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEt7WuhBd/nG0dRovkCVGOrFREMrz99BG1BMOBJ1BubZAiEA6AeOc1Ry7xAPwwRrP4fo7baCdANpBsw/f0mU2pgg8Fc="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.110_1645542200236_0.03928810333294552"},"_hasShrinkwrap":false},"2.4.5-beta.30":{"name":"ecsite-form-builder","version":"2.4.5-beta.30","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"50f8ae43210da14ba012e9bc01933c93de709544","_id":"ecsite-form-builder@2.4.5-beta.30","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-h3JmolSND+OSIqVGpWr3OSut75tfm8toCjAiPv/iLfqyGUCv8ySVd2ojo6uDrYREeAHup8YifpJpQ3SYjHAiug==","shasum":"802486edb2cf4415a273cb8f4db05d6bf5cfe9ea","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.30.tgz","fileCount":111,"unpackedSize":4667758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFkm3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoiOBAAi0DN2wun9awtj+BzwIcSroTgROuHX6/ryg045pmOW2FRLYrY\r\nMPWvClK9WG355ZNJMsHKNrzY/1qH4Z43Zq+ScLCjcZ+5RZk8OE59CudPWQVV\r\nIKbjHkuEUZlPppvcbknyb4QsIfYBKnMCvXblqBLMsbkbFS0iADD8EpuIH2pU\r\nCdZpG3pTzwwbfhaLFCv7gKCsOfyYo9OVzDCO0fFSbEyT/V6vEMuo4RdKZiUw\r\nhvG2TqA3RJz+NSshnwktTacGKMm+wiCvx2LRMRuu6jFpg62nL7mCoW9HNlfc\r\nC+G+zWQWA/5xInmWteF3b3ErzRG9H9kCmP/H8tK/3i68Z++XJ07Ajq2ML1Bl\r\n6A4ESLObkV5lLWpMIeh2WrIemhV8rQIKZymmUpnqQ2jjYUreZHzPL4UpPEls\r\nVE2vBgaZfHxB9KAZQpV4TItw/JomI8xhOMnH9f5uxOHNkxNODajNmNvBhZiH\r\nm9RFXpgpwiRKG5Fcx6uF5Beq8o30icfpYUYiYQUVv6feCvQEjMXd14R70Gyf\r\nQetFvjln4mFINWQOtCSGEIi8MJ9lxohMcNDYZllEYS4o7rmnqR4Fw42NggPF\r\nyM/UPgmaMxr/GwP0uuwjsky2nYnlRXIL6IOcrjUSi6KEYZyId7S9HTnAcPEt\r\nAUKfSME8Zk9NbWp1sV+bqJpWQGkITdhD7xo=\r\n=v8A/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQim/NHS140E5/TKrIczKjzzZT7jt19Mw98piAPx7inAIhAK2NpHCLZo4f1jE4onNgZLNKBMFhiv6eH+t3eU6IX/Yz"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.30_1645627831257_0.20270575402689217"},"_hasShrinkwrap":false},"2.4.5-beta.31":{"name":"ecsite-form-builder","version":"2.4.5-beta.31","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"50f8ae43210da14ba012e9bc01933c93de709544","_id":"ecsite-form-builder@2.4.5-beta.31","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-OUkSyUATNRNgevDsqQQdaExjaI6neIicHYR/SPlDrP9Kgl9drkGSFEs2P0AceSQ3v/RQWiljZ/OQy5ROOT3XTQ==","shasum":"d607ea0bcbb856c39dbc04dac4b2d938775f59d9","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.31.tgz","fileCount":111,"unpackedSize":4667834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFmbZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzVBAAkV2gL/kJsUqQd/a09cCmRc221ffWVLz5pdDsoAbfMA5pgBzw\r\nXw+k7rVsYpDr2FlQ/4B9GONkNQyhWkJbXGPyIeIJHSPQZ2VLFjZXFW1ZoIG9\r\nmjB0fXYcOnKA6dXbz8XoSdtGSNbdtdP10wfi8uTJGmH9c+cJY1akM/hqjCEU\r\niOJ46aCjzcpYF4D/sqlPn+ulBKfzUcZ/cOFFqK5uL9/ImWWCval0/hawrkZ5\r\nN+MbNHA+nean3GDlXtdmTUBk8qTLdFFF1Rrv3csRiEgDiHR/nKXJRUrIwzZP\r\nXyBnVj0e0C5QvOCGv//iPOYZepD6jkAsJ2U0C+BrPnJuqJGbuAH/pxKsaQap\r\nd+NdxIUYU867NIda7GocpI58BTX5kZgK0whAoT5XVMZZHGGxzDm/dh5xlszk\r\nG3fcrUa77aUSKowEotU/4byNb2WKlPBMBJZkXMxWtNfJ8Q7GVo0lQitT7B76\r\nB4B7RJRRfCry5JJpclcsEGdGoGcvtprR31wC8pfcmqgzKBeu+W9CuZN5M6Sw\r\nWap0LZQiXyP8PxZCVAJlPuWInq0Kndm2O/B0VkuMrMVjAyR3UDfx/uIbhDPs\r\nFfyv5M9RmJUpbfHK0/yISDC7UGGn1nNj7MJQg46shqaUpuJnx3kjKL2u8hn8\r\nQapqGknWXdwMfVatTFZrn7cSCtii5vA0v2Y=\r\n=Qu/d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCP5J5GrRKIpFDzpaIj+xmtBmGJhceaen9fJYm1GFgybwIgHkelN/ZgMTLmpFAsWCfg70HBXxXGvDem8x7KAoPCvh8="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.31_1645635288767_0.804682725300371"},"_hasShrinkwrap":false},"2.4.3-beta.111":{"name":"ecsite-form-builder","version":"2.4.3-beta.111","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"7801fe9fc9d433915b075f7a360a8d1ca319910e","_id":"ecsite-form-builder@2.4.3-beta.111","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-dhU3Wua0NISOEp1u4XUFTNlIA2NZ605+Ni+bp896q5Fa2NIm9HGxT5/+n2kNY00IHrFGnaCCtDiC0dCB98SNUg==","shasum":"475bf67e15ab603fdefe9d35d17d6a0464c55add","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.111.tgz","fileCount":109,"unpackedSize":4608236,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF2e6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpkNg//RPenw1aAixe/HoRaqculWtfXNhD+vhLlDCoPuBbyfw0vEntv\r\n5NmjD41RX/WlRD/F9wLt8/sjjFldn7AHzz4u4604lNTGU87wTivecI1JhVEE\r\nlnjTAWWdnftJ1TnJWreQVX4i6aaO+wob9u9hXIBtDp3CxeZLDHPp0tU5btjY\r\nvqZpaIlXMTNDGVd9rjEsqMmIMkZkGefgQGG9SHZTV/ht9GWJJDysntIpVosU\r\nNa3lWd3kowiiY8MHgZMRxyY7ByEdwWxezv67m0JnltkpEAw6qN1feUDBzs1p\r\nBpWvpZSLWPr8JV86RgaMEOaREqGSonO5wDtPXwwRneu9iwM8gY7qBDAWh+Ff\r\n1Bsa/YQdPioIFnlcjkSMu3aPXVen+ooiLOqDSAqpR3BAHpeTF3thsl4aVIFO\r\ncZEKgs5VadDO7mcDCd1oPtz5ICwznwkQmF9UtkN6YwY9znA1EBdZ7UC2Q3xf\r\nlgmNZQfZB0E344q1DpvNGFdij7hh4eNbcE6XPyr9T1SLcTGrc8g8N06rYcGz\r\nmCN1+lOL1k4udqH8JkTW8PShXzbOLBPzFVaogaQppJEfsIdm016R+UXQe0CJ\r\nLkaxcznqfFYANwEpgZQHieN2wveXCSFDOcYdMkGau/7oxjdcDIRx6Z7SsZpI\r\nEbMaUX3/h3C87fPIsbj09QzIKHec5VIcn30=\r\n=4XSS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZYWEd73LmnLLU2boUtVytvx4FqvQckTsD1BZHpnOBWwIhAMUQf/0RO1kTcEDnz3ABLGiTDde6fn4lMaXp1BSfs9pk"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.111_1645701049440_0.048042178503943544"},"_hasShrinkwrap":false},"2.4.3-beta.112":{"name":"ecsite-form-builder","version":"2.4.3-beta.112","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"3081a706498525f165aa68ff43245bb5324b8859","_id":"ecsite-form-builder@2.4.3-beta.112","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-OXjbAz6h5aoSdxaYBTKpPEUM3NJw46TUhnrTtHaYoo6F/OOyVQ+U6E/ka9TBAk7cOq/FnATalg+AzxpELXPECw==","shasum":"c7672e04901da20573d956ed4016ddf83d954d06","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.112.tgz","fileCount":109,"unpackedSize":4608399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF3AEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpuTA//XXWR6NqZzx99wjbh+yop6rYNoxk+PR8xcKTsYZSNkSNx2Uih\r\nFYWHDnkmQJASkKTjPjeV5FvwsS/jd33c5x3jFUsmE7MUIJ4mMxvO1/FkBDIO\r\nANoQte6Bi78782uXZ6WjdMW8SEI16XpB6mYeD4Mr7ZT1Hk92mpklEpn6qD9O\r\ny+wWF+rWdFp7LbbGylW3PxIpLFxlfOxlImq6mKL4TM5zVpUh2zb7HdpF/71Y\r\nAHyu8ouZL37ikJ/8VGf8NCwGQMebEKthH68th0yYRqhKeN2ohvzCF8SBrmsD\r\nkHhwTx0LR0maa6X4LhiWMnzBKgTmolFFQAyTGti+GF3EhcnKiZkeSOES5jeg\r\n5Gb7dn+WINg9TW1wpwJScQYM1EtWYYZPZoQFx+DzUrZfkQEGw1ZbNXfmU4QP\r\nQxjZ3xmCenPsPBEmDeCpGBfKqpc5nWTPLeV4D66zF7YuSL4h/igno3szfzcc\r\nuU5d1XE9OPNV1rKi1rQrzH/lTVQQ2Tov2Osn+ozYHmHazBjYRQNquDv4KplD\r\nt+YbNnHRVrg+/vm/8k5fKcEEAmI8MdjagRF1k5uccmTejixfrg5j05ctUjel\r\nNv/BZQfM3k1NarM/7Y8UWBiathovn6smeqPg0mgyJiG9/1jofMteB2XV3slt\r\n3yixTGvtVuLFkPMxiSfUi9nwezXrrvG3YZI=\r\n=lcF2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNitpyv509c6mUJwJygVAqumnk7HM1hioIN9TzNO3H6gIgWlHYDjeixpr/ok/ByJxgJODxhbYgnzUN6Bi4B98SoZg="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.112_1645703171918_0.5278034949449726"},"_hasShrinkwrap":false},"2.4.3-beta.113":{"name":"ecsite-form-builder","version":"2.4.3-beta.113","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"3081a706498525f165aa68ff43245bb5324b8859","_id":"ecsite-form-builder@2.4.3-beta.113","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-8Gx//D8NGXc3KuT+HQ2hosFZMtfHKuzKTVYIMFVzfAJqYrkTgZkl2brrkrjgiQqToSLXnWjpdTG8Ht0lT1IlYw==","shasum":"ff81772c8fe8be143a5c87a9c813aa71bd0439e0","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.113.tgz","fileCount":109,"unpackedSize":4608505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF3mHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5qg//W8BPd7BQ7NhR/kl7+VJPXwmUjzbX6GMWYOQ9VNJYjiAEIzPv\r\n6C7Yc4Kbzx1olLFmbYwUNeTBshjDuzQDjnKbmn9jGeONQPrUfLfhBHfhU02a\r\nNeKYMOiOdZO7AxIKUiEzDcxT5IT2b5OzmDSSCI/rUcJhcwASm3eM1FaEmtbr\r\n81FiZv05IUIKEGVRK/uBX8b1HnZSNcevRY6fr83W2Ajk1N3ax953XD54A0U+\r\nmv+Wc/kHYE3KtgbWA1WGg7IzJ81qLdeRcZDuLbRNjTgCG/d8UlMjKNe0NVA+\r\nzmQPiGgUSapnQTUhRuGtKM5ocX9fNpQPD1ycdlToe9pW2S0NVTrQyExHctGW\r\nF41m8L/etlwVovP+1dOF44BOjq3Sh4/fjDJlsHEYj/UyvH2pZoX2L7Wnv89T\r\nvKAd3QqyG2SzD4/NMQIYDJDJAQw8dRIlrAdoS7yAOYUeguFtm61wcCf3+eyJ\r\n3rdJl/yp0RLqnH+bIGUdmFdPwecsvbAdFDJGaDyIT7Ila2JTEWCRdLpdpC9j\r\ntZdods9Z1tWctShKWnn8u7rnoAAF4e26bym8aRnz30BulxBMQXBnzsUSkL7K\r\n1o8+ZmxwuqBUNANVF4C4LnVb5I5euct6IFTgj66iY1SmUucyN4oqQBf7doJQ\r\n0VyS3IxoYqT5u4fPT841r8rClq3FK+/eUz8=\r\n=XOgr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwx77rTMm2OWbmPcJWXgIym+YjwY8bQX3LccZwfEuDYQIgLDOV/2zA1jPNGy8KrIMxKwlJ4G+sT26srLzhy9ggxGM="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.113_1645705607060_0.9956941064049214"},"_hasShrinkwrap":false},"2.4.3-beta.114":{"name":"ecsite-form-builder","version":"2.4.3-beta.114","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"bbc5293dac8d18b2ea0af9b1ffa24dd4590c57db","_id":"ecsite-form-builder@2.4.3-beta.114","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Ah22dNDSCNMhAg31RpD2Ah4TYrkmtt+ROuHFuMJAhoQdfCRtehu7GwgEdF/7GqeC/jkQivg2IMy0BWRdJ9ie+Q==","shasum":"d6a26c3f369a759e5b10fcfd16d5eed549a90b97","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.114.tgz","fileCount":109,"unpackedSize":4605330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF3qIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzTRAAoDheIsKEdkTy3iGKzxXNEuqa1R24Trwk56C7w2g07J/zNbmt\r\nKy2rNEWkyoQtaq9fChfFTsfSkjjUxjXYJi51kPI8hgCQ9o/yXHYXncNLSxUw\r\nHPqynZQPHcjCTp4ZaPhobsv8lXYgUs372wmsNCbBXsSd1C8wWjejXH4A4+ZN\r\n1P2kmVYnkSRszGSOTqNFo+CdAlhy/QF850UoUGtCP1EsJORApfwMDdFzmrlP\r\nz713JbTCzH8dr3Qg24GFoKyPim9D6jrHyjfeKdapcGnHCcwhP1m42sk9jmtf\r\npchK4gfhhiT5C9dV7TS7kfXeLHhehnWs6khKEkG6qqBBAtO+FECoGxcC7BhE\r\nrMjpTScMaNfE+akfk16zaS0xQ7nQYWtFwLqSyTI4mF1TgQz2xj7MEyZd4Cpy\r\nBN/Zvse713SAofewiqkaPjMQK2+wRQtjCUtC6D2+NLqoNbA+IdnnTMI0L/5L\r\nIJ2nZbskSTrMbvaPLmK6MNcHwui1tmhCTqGv7sNVlGoJiEBX+WjgHUPN5+yL\r\nRJvzBWqfLOZKpwG1aFHs8fE4TYHnTfAxgnSc9Ui1AeDfYtRhaYBztDyycFnH\r\nXuIci0NrQ1BTVrTzowvqx6dlOL2cLX9qwDdrho7SUQyxrwQRinKzjOm9EGHK\r\n7F9YF5seiTMwGsWaXHWMgEWoHs9weT6zhcQ=\r\n=uu0L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGfDKtEEk57s/2yMw6oICVy+lRRYSL1u8iHhkWT+WwbsAiAe33BejBGWLRNPQAMM0LcBHF+3Snl2VA7A6F4A5Hnxbg=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.114_1645705864622_0.35769358747956437"},"_hasShrinkwrap":false},"2.4.3-beta.115":{"name":"ecsite-form-builder","version":"2.4.3-beta.115","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"e6f82ec0f6a45e5a90685afeb5b4617a27f637f0","_id":"ecsite-form-builder@2.4.3-beta.115","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-ec4CPWOoRpH8iAdemCmgpZEMaqXVsZkX8ej4SPucNoUs7Q1BDDm9o7TWLQpF+oMWbvlU1N+V4V5jOrzSjciFDA==","shasum":"2e901878e4876264b1dd9cd6bfb8f19d25dbe35c","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.115.tgz","fileCount":109,"unpackedSize":4608549,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF3xqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq44Q/9EYbY68N1IaX9EqakAtfkSAVPDTvImZnYk8YzJs4l39jQXjeM\r\nbnfszgSNdUuI3pE6W8dAHvCQ4Ln+PhxO5KgZ6W97Pzaf3/c/awfMZc3BDA8T\r\nbm0cKi17GO4evIoM2wib8oxPZK+VkiuoNFqJ9zpgjzgfQr5pN/IxQvf2nSe9\r\nzwP9V4is7lR7+K98zzLTeKYXCpT5teSohZTGv/o3VgrAJZ5aUG4FDz3jBkye\r\nyeauWQeoRS1sW4LE+6bLx5aFVTXPyDb/l2ZPn07nWCM0illzl8SD9ipCq9fa\r\noFld42Ci702hrq4xwiW+uH4c79vAlQUqSDUd+f/tTytn3QsGtkFbeuOJk3I2\r\nkfhFdym7d43CWxXAr1jogJAXlP0oWfWSz/WTlhsfz+M+1pPuAWzgFzIPZLIL\r\no8E7xQOk4wv8Enw5ZF4vE5PTLnNlXp8N4TlFx9+Xae9fXjESmwdS1bp89WgM\r\nxoGfavZKrRe1dXH1wjYC6JN+Gk05JFeWLRJ7EjpmrwvjUTfpzuI/iWOoO6mi\r\n1b5nu18GGFDuuc5UFZEyRnDUDhQQAgGHuUT4xcvQzwE3b9cd5eNEEWK8zq/I\r\nRStMPH4kx8f6zYGyOctn4jS1srTkOXEuXyRmol7gHG4zIr8CxyMKetoHh1Ln\r\n8ao0nLoYy2ipEy4qPQ9/F9ne2jfQq5LxYw0=\r\n=qMnF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFTCUS9JvJ8QzFFyXuIqc/n+dK/hOPu2jtYT0gCoR6D3AiBqiBi+NNmCw1zbgaMTGX8HtfvEZnxOeltxfkHvhhPHZg=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.115_1645706345665_0.41002148876661537"},"_hasShrinkwrap":false},"2.4.3-beta.116":{"name":"ecsite-form-builder","version":"2.4.3-beta.116","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"7f1d4fcabab14da899b93e6c29a9b28c8b1bcb26","_id":"ecsite-form-builder@2.4.3-beta.116","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-qi3GFAzFgrsS4lZjzHtnmBR8S2/xmZA0t3Ubz5/ECPZZOshAcaMNk6X1CNku0TclxlrcQRmqX5DAuFnp2gIefA==","shasum":"221bd9195d031b7be10cb47a8cde36e07bc839c4","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.116.tgz","fileCount":109,"unpackedSize":4640835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF4mwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzJhAAl769XHMzf8URo/ey0eUgpuWdqMHMJRy6Nx8kMqpnk/ayfM26\r\nbE4HMEEYatJZmnyz0OvfD3bwWqpO22EtFfM4akubrVW6nS8sTK+fKQPIKFyi\r\nbjo96RrT1bMdCYVotRzys4HjPfYordi6Pvru45UUOmqH7YjIXj8z6+HjFBTf\r\ngySYC+acjXTVbM4/7hQygTgqyxvyKel51cF1Zbg+ENVseIDY4Wezw4Pb0TwD\r\n0E2ZQkM5XeWSlV+4fmReCy3Eik617qGvwuOZaH1fitqORybil10IFbm6rXY0\r\nycZAbIvP5v5bi+gs3o7PzPGBf3lzyRtlJdOCPiruygwx4GvMRh5QT++RSeTI\r\nOIVlmJEOMacNRrQ66Mg78Bax0WwlyxxIF798rGzSyF747FXuGFZRmWwr8wnD\r\n4oguhUJyny3qKkXjazvEExchHVvY44pnKfZSHeHKuw8Zg9Iz5xaiJRhe6McB\r\nVjBXyfD5oiLIxahVf3s8+5SNzZBY20hBKuEwiqgkS3hBQVjkbJu6EaxAMZ92\r\njKItmtL9d9MlJ9EYDF8IqYwdfO8dxpJkg1gKk73IEOal0V6PMlzSyEZ6zkdH\r\nF2t2BnsBKMjgiNslfOeRqY28ocXCw297hdd828HXBAKyIUWLk/nCAgVS6sX9\r\ndJZa2Y3T7Kj3rQjnH1WzsXVCuQpkEGBuTYg=\r\n=Qxg0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD12KpxHtN7QIbrieugv06+k25+MkawXXHfB+vf5/CSEQIhALyiA/ojERsXp0j92w7Ui7mfztxR3XyOpnXbggubA11+"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.116_1645709743835_0.3635911019385567"},"_hasShrinkwrap":false},"2.4.5-beta.32":{"name":"ecsite-form-builder","version":"2.4.5-beta.32","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"fff66c8f3c1e10cd6be5d2ef398770ad4d989508","_id":"ecsite-form-builder@2.4.5-beta.32","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-MarUkg0aE7jgpmJNM70ZW3qIPEKNXH6bMFXtCclbRIWH/yWakNPmXCap1aNtyglELHHtf620WJdr83A1YGDUmg==","shasum":"efde5cd527527cd1ec227c841365eac08046eedd","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.32.tgz","fileCount":109,"unpackedSize":4640948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF5S7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqb+A/+OMLB9iYdVfH27f3KZ9GiZW3C1wNp8clcfCb4oPvvWyfC+pvv\r\noXkm+2G30Npza904LwbOduZj7HXLK8Cdeu4xpUUcJd+Dl5AxJ4uDN3VRHK2W\r\nC88qnmJzcUT7bsEVnJJlVlfBkOTSm099i6DvJakmT2TIZYPKYrjsz9n8s36v\r\naf+6tnM3SlY7TgIFBF5Bkc/o7u3iJ8TPZqG6Nk2M6kCiK3jVjB2reBH+Pgjv\r\n0XB/7lyPlNV/DTtaP3U1t+vboP0X41g6438pa6mk8bRQ5bfZtZDhTSM6zH+A\r\nF6dMYOpRlQi+nJdbbttdeaGo4TA0hvfnap7zTMRK0a9C96wLvqEtLvBi9vNL\r\nBPs2xVJsC7BaojPq1BufCkJDpkdX24JCNzLV/oTfBIKqwc1iySDWCu/d+nch\r\ncirINk25M7ORDdwSXRigeBp2qY4cgikXIw37DOW7viaCUTokWsSo847DZEDq\r\nIkBE+7wywWsx+08m21FP1mPDzcb21lWY3VKan8BuO4eU5Nc4QKNqRIHmuWRD\r\nZ6WLxJhM5LsagtLYDzcLgiVbEYdGZUVqaEtMciQF5Ry9m5WeG+qwzmG2sHYH\r\nTmeW/AKSKalT81CowicLKEphOS5TaqGr4e5Zc50kAJBLK1ssWeTjzI2S1I83\r\nGm3hdL93R+kic0NunymXbblJ+CVUNFg6WNA=\r\n=gxRk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDV/VlWlp8IiYpTYLT4yDeGj+rokraMcUR6pd66Ht1GQIhAK0eKCOTvMU8LCGGvOtPEwaZ4HW1HFUY6qcql3kB2M2j"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.32_1645712571242_0.9248649135012768"},"_hasShrinkwrap":false},"2.4.5-beta.33":{"name":"ecsite-form-builder","version":"2.4.5-beta.33","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"f75af4f2ce13e23dabb082900929d2605a984f64","_id":"ecsite-form-builder@2.4.5-beta.33","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-e/wXtSZzwkJnGtQMQRyiofOR0Qw3cIvAnB3f6pZUP9iVZ7lvzZXZPs9Io3b7e5BOSVQpYyIf9rbSt/ERIisBEA==","shasum":"7a72d7f2c2bae2d1a02867f48f9a27af2cd37b9a","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.33.tgz","fileCount":111,"unpackedSize":4671378,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF7ZRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouVw//c5xxrTsbRk17WYPK2m5ULTCNgcAQeAIXTCkCOpwVxETTI+oU\r\nZeRf+IGj4/N0lnAnQApw+Xy4Pu1Kj956DzI6UHR1y3F71jE6ik72s2/gfWuG\r\ny7RZFhSi4WCFGmnIr4mg128+NkaSWSsii5JuqOXdNa1uminVctRd/vjFjcPD\r\nTFOM1nT/vROm7u6I/U0DcLaXMw/3u3LQ8vYPxMHqVlVweXBeJ5XVV9Cy3wc8\r\nWg7ayV2inJyeoaV7bcLpjpLEe6CvBB68umSMSldCBMbv7X8wZvI675gXxhP2\r\nn2qKOCBIkYI6fU2E0HejH7BCDhnC2dlfOrK4HsJIbvcHxptmTtpeIfW6bsse\r\nwQBAi2RwCn5NmfxcsAJY40Vm+5n/1mH1ZnNV5arvhdoaUBc8zttnnnEIa2fm\r\nCTIZMWsJOvPyxB2Xo+x8lVg7B76lD7QxDClMnUo8a9XOypugmxmz5bn5N4Li\r\n17qkmCe7XlPqM+B7U4VmDPWACGkuqvHY8bTDsNWPPcszVOI9AHfIb7U3SWvd\r\nTHO+/RyGrLYA8/aAJh9J9z1Ox+qA4Td1Z0O0kFfCpqqQxiln6b1mLelz/2lm\r\ninK0o31s5+OsxbJ3hES5gnBqi6SGJ4T89X4l7pGHtLi51012iJcxulDT+kuq\r\nj3XLvFeKcYhZUrS2xQ8O39xb7VYFOizj6HM=\r\n=QJlJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChRHhfL/eVSmVXranjLzSSPFXg2rKj4Ij/kxc82P4g6AIhALhlVRy/1NcWDnephIEHguwi/75HF8gcpEN8bDxyAjUU"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.33_1645721169367_0.7986833712920252"},"_hasShrinkwrap":false},"2.4.5-beta.34":{"name":"ecsite-form-builder","version":"2.4.5-beta.34","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"6b5994c1759fb153e1d46e23dadfe69fb8dcd671","_id":"ecsite-form-builder@2.4.5-beta.34","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-2d3D47DWy+krGwXSuSXUKKg8uZy7wJXrvBEdnZLc14lh11aNXe8Jp6Mw08uZilT/gPVzrrLBpPmwVhXQIQiuHw==","shasum":"080e68ef8e425072da6864624904e9ab868cd2a7","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.34.tgz","fileCount":109,"unpackedSize":4640948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF/uUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoqnw/+PeDpuOC0iBnKXwQbt8Zd7EJZmYTQsCVdPqJccXjCUsngGCT6\r\nzqff214Mrc30T6BmfTwXrGHQChioQ0ztUP/iGNBdmEj0a/da3T93mi84Z9jf\r\nNxdGuCIasFaqHuTelkgAek2LlENH1oEzdX3gRS5dTiCBcPr4JfcyIFcfGeWA\r\niTBQ8XDEwfz/LGlgQBRg7jn7WbZ6KzCtGJceQbTYprkUQe2153M3cidkGsun\r\nPiwtosWxWxsHL8pMRKwJto6cHMYGLZpGIQFtiJ3UqBxppOWgufeQenpQyd/H\r\njsUhAo8fmZKXiGj0hpC16oaM1x3uV00tGM/CkRohSMvrt4YkAUUYUx/Gt2qU\r\nJv04N7BvenXkPiUWUefltAb23HFl2GxuG94INka2dqTZkJ2dcTTSYUGccck9\r\nC11O/IRT53lsAzx+Pp0at4HnaxhQlha6rnrO5lDs27eB+ggTfNVQZFpQjbde\r\n9hz4294zzIyLGJLlPhoHQUnk5Lz4Ww4cGOW0lXN1aYceUGNyJqU4orIO1xC1\r\npT55MVqG47aPJZrbTTrC5FSMULJ/ZQLPQYBHWgt34W8ERybx6BjbhwpQxRjk\r\n6RScJRSIRue16gw0h/yNsItD7RmNsb3Cu1bQgBjr1194sgqOb7cJGl80Czpm\r\nq9NsV76GVs/XxbyNL38sQ/zXdBHaUrtLQ5s=\r\n=T8J2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEOpzkoM6ez/4+kHHy9aSz+9st6Xf1iWMOWEdVeal5TAIhAOlOhwhHf583AHH5PoAqEGmttT54+YGXWhGMaOhO4+i2"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.34_1645738900504_0.9541896774849439"},"_hasShrinkwrap":false},"2.4.5-beta.35":{"name":"ecsite-form-builder","version":"2.4.5-beta.35","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"ac6d05029dae5352b4ce5d86ef1609e4fdff8418","_id":"ecsite-form-builder@2.4.5-beta.35","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-k6YsJ8PfJnjQfpGyLKzRM1Hwp5udqsm/eAhWaCXkB66pBaIFXVFu3e2ePePIDW98hzsjyEpuXoYTcvMIRAxlOg==","shasum":"d04d622614cb1ca49fcd27bf53d5e1e6d3ef7032","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.35.tgz","fileCount":109,"unpackedSize":4641778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF/zKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/KA/+IFq8dITNGFGHQnzXty7bd3kWml0IF35pfO9KF3wWK+/P1oYo\r\nhE5CV08nWgFLzuHMNxRW++RXRCHgDXKmBC9j2OnGYvkoSz01Y62/zlGUia94\r\n5hZUqGze5WigcsdTt7swRzAAYCQt1s8BI7C15MatAU1+rr6QBF+QFGjeUOHm\r\nbi6nb24fo8UUyUk1lai89BcV126HGHnXh9he0cmovewRaZE+M89D1UgQcn+7\r\nSD1XT7vxB0onLPPIpIzPQbh/YS4dGw7h9VFEbVTaRirG6mLzGW4c3LDm6rVJ\r\nxAtZ/SNaIPOEUnd+OJlH0XCAllZ3D2i+aFfgus8wN68eMVNl5C1g/wgAdbMf\r\n6kugvAQBNKYutQSjjx/Mt4t1WyzX4SWDpzmUyvsEjiSI8sI0RASYH/GSW5Gr\r\niMQh08mip40VVXRIWF94Xc1gW9Tna4Vg6AHXvUAUcV0+coG+b+EtlJWpsfUP\r\nD9oXae84B8BYIYLy2dtDI+i+iMnIls1qmnqzfQ3uMzQuDSqagxSVknsQ7Z3B\r\niPtZ0tphuP8EukqTthrZyYS0eGZyASvW7EBAbGl7D2t7qrs9IuGQKPf+VK4V\r\nJ11s4hYLvQUNoTGrHoQw6c/pux/+U0N5kQ/y2iAVoFoS2fM31lIZhc89UmCs\r\nRr4IbN954wJ20azizawKau6kTcafHiWO7CY=\r\n=Yhdg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHywzkz8+9LdDGvXQkzssYXGOvXCyp/99zgScIgve4ayAiEAxCt750otvTYo1CtvVkbivxU8ka+68uisMNWaMqA6BoU="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.35_1645739210259_0.6502749606205387"},"_hasShrinkwrap":false},"2.4.3-beta.133":{"name":"ecsite-form-builder","version":"2.4.3-beta.133","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"a23f8d41b09f02549380191fcf0bc47e49cd0ec6","_id":"ecsite-form-builder@2.4.3-beta.133","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-wa2ekX23Ih+PKd4lBqxIbmEMJxgFIitT2WOaQtAO7LAvJSDD8IlLU9BWAD6G8ynDJhok7Cp+Hauvf+hReCmSCQ==","shasum":"259b28ba6e9fe28d3832fc89361f5f7ba89af5c4","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.133.tgz","fileCount":109,"unpackedSize":4615306,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHJDrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqVQ/+Oazz4giE+8BRO12lxkNvIy06fc356/ZLxk4jNRWdl7pJDNpC\r\nd+FxgZbRFc6+mocyOpmdUT/hdLTs8j9Sz1hA72d/MQAsoZ5IxnHzyhhYSnHb\r\nWfh2J7JguQTeiF36FaV+Q8+EVUO3HXjJC3nVrLFCdq83BOfRfgUNx0sbA3U1\r\nuenUAxN5tJOn2JG7RBxCEBCVmg2KLDKWUiD3Je6PYxkyLkcF+vxe0d6M346N\r\nSqefWkXR4KivLqiNI5zJAuhqZ9RGftHk6KF2ouxNhl71MwRPsTl4yVLjkGME\r\nDMsPYouowFBa1vJEKQEzL/W5+Yu5Vmd/TwGtQheS0Rw53TVEQ02Y2f8848Vq\r\ny84zWR1Pk0B9QJVYAFT69W0x1O6UazsLs9bSKhV1kwm+WpiNoPcHHgqWfJZ9\r\n38Bn3Ij8R9fLE+PjOCdu/fPkYxeLEhdAINrARud4RoIcxnbyD6WbkWEJ578d\r\n9OcjGVH0P8+uK5EYX99rykACRcmPwKrdy1Ue2yoUUtYc8ZE0O62/uBesjqN4\r\n1PBu08YxlPg4EHLC/UV4kzm+CGg8hls2wRER+gJrX+lNrIhYhJ0ECQ+GYfQN\r\nDGDo+Fgk+EVxx8g7/s4jVbFff8S+Gg8ABANIi80DWqpepodyOF+T/q6gyrlZ\r\n60vV3DAkJW56eqElNNwXwz0hljzxP5roepY=\r\n=0JS3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEtiKxkWfxt7MA4W5P83dOEkW/of9vkRt+WaBfUt85fQIgL2wd+DUqqykD6eyDDoZrtGLQHAVQ8YwmZRUTVSgYJ7Y="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.133_1646039275224_0.18083794616743343"},"_hasShrinkwrap":false},"2.4.3-beta.134":{"name":"ecsite-form-builder","version":"2.4.3-beta.134","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"ece8977ef23a4a12103cb3f3d55726f8234e606e","_id":"ecsite-form-builder@2.4.3-beta.134","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-nvIr1VV4ePQGIx6wN9O+WgiY0DB1xycKgXkLLVHMqF03H/s4qL7bnrqFBqw92tdVoMD4SQAJMrgVDvl85v55WQ==","shasum":"97fa7d779364f34085b1e1a81a066349dfab5341","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.134.tgz","fileCount":109,"unpackedSize":4615390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIGkGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoE1A/7BtGw9cM17CBbqFabRG6CtqLSN8hel3K+F2zORDM+WvYPdqzb\r\nq5mD8NpDr5fXU/t8dRX+qv5kpXJ7IUu4xIog9v8iNcMxIXeh4SroeGsXfO4W\r\nYZPg2bWXXtYDmCa15L5NKJwHiYpRx3PxLWQT5ZnDZtQbS4xpZj6WIiO9LXe5\r\ncxUyZWr428cJyaRBi5ht6WJNpFRme9Go5WSL/fYsNUg9v6qCI+0iOAeKmVY3\r\nCa7RQhdDghVduZLkfMuqVOd83FqVshbsDYp0OLpAnVHSQdFRQvV+R3o9gV7Y\r\nDFQSIBhKCakS9Q14JoKBQDMgpMh9uadLhOtwlSRR/7BPq0T6+6d9hjPyAyWH\r\nXKa91xqahtUCR/x0lyWsLhok703aiGGJEuwdJSLrL9FnuXUd31x/fqF7Byap\r\nu1Ts7UBZ45j70kiQMEMAA4s/M1nbf25pXh7Q09BhdRk7C+uImKR4ZQaHqOe8\r\nCJ59Kna1AI7/vX2UYiLfopNTNssLYxs1SF4JAXTHzrhzgMvsbvZgTytewYkj\r\n9Ka7i6ZhVgqKGVyE9rZamfKllL4WqPOxyUALK4Hxl26TC1GB9tFEzUV9a0SN\r\n8uRkR3q9hm1Rq1FPUTTcJakV6xu0uFLbna8obYNFz2Yd1qwxzrFVaW55aQ70\r\n14TmUxNxUKtgkgQYu1eG3lPJgYccrRPNIAc=\r\n=Rb0V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCY+puvG7Ck5FUjJoE9LPw0M3km4Lym2e061IeaKfwgggIgd/FWWYynT1IOGuaeazPlwiIlCl8hwjnvrBWR5y7/4tQ="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.134_1646291206340_0.1959489664897407"},"_hasShrinkwrap":false},"2.4.3-beta.135":{"name":"ecsite-form-builder","version":"2.4.3-beta.135","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"dbee6df42a3bbe194cad84f1442ddb32042911e0","_id":"ecsite-form-builder@2.4.3-beta.135","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Tm/5hYrSTGLSfpCRKWNHkyqLXxntHukf0X8ouQHghoucc+Z0HtQOwxdvJYE79FFt+4O26C+yANbj/OjPihzE/Q==","shasum":"82e5efcfaa05084c7b00fd06d6ab5cdabb3ab80c","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.135.tgz","fileCount":109,"unpackedSize":4616513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIIdFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHfA/+MhVTtxUEEz01WYMXUd5awz7Uj9obDEFDxyJzI8c/2LbjQehf\r\nb9FHqb/6VQeqi2I71QjgVEBJ91zGQQhW33j0goepZ2EneinOFow7M4Ex4The\r\n5DN+vDu3OyQaXpYhdW0kTOR18Yts0XiwqtxNlVYzD2qXdI5UsyZWV+yn6hlM\r\nKWWbDRmyNYUngESVLwoIGRpVeunhzwSzGvhhOu5dv2D6aHxyYezCSf9DxxmW\r\ni2/qiNQEgUHxz4jR6ehGzRUHMewExesKPWALwwX+slTISn82Yk3mFXMHR3N5\r\nOECrONdoDP7Tv1SHK8rflGDRsFzgrHVUr00sAKUorGBTeE4h/Fs/W2NJUgQd\r\nLVBuh1nzHPHzFJAEI+iBUbqKmVbiorHNzy1afIje/DczJWM+e3X6a3A4Lxio\r\naD7SNqPMVMMfDKLcuNqVFKwD+pro+RUuzlIF20+EC4leqZRllF3MrgyEhOAL\r\nD5gFU1EvmsvEHeEZTeoJjHJDWrLzAfYC1RAi4P5Ic7hzm6l2mJkKzyBywFje\r\nHgyHDn1QwyQGylL7r0DXBBe/xHsYZxepW2eZVkF7GJvFfmBPIHLKxq4GECqu\r\nLK3lUtOzjA3CSjzL63FBXmH+X/X2R1hOrPOQcK+64WAQL9fntEtte3WIDErq\r\nt6PfdGWnt86F59RQQxJx7fen9GFr39rXKy4=\r\n=GBd/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGdBm7h9C19iGsvsoJZkrCA546Qt9HxMDy3H+w9GyZBZAiEAkz3/8Y1noGs2HW9/DK1bCMnLACJOIuF6MnNsqnCsfmA="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.135_1646298949085_0.4369421525154067"},"_hasShrinkwrap":false},"2.4.3-beta.136":{"name":"ecsite-form-builder","version":"2.4.3-beta.136","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"dbee6df42a3bbe194cad84f1442ddb32042911e0","_id":"ecsite-form-builder@2.4.3-beta.136","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-hBITE2LTqWLVO2XgDlp4rqW7C3DlFKb76BhcmvDxeg6RTSFdXqciWGLWeptTrb/0kiF9qmzJRqN/EPKjZkOnZw==","shasum":"d31d9d847d3e9f9a68b3f315901bba3d20cccc27","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.136.tgz","fileCount":109,"unpackedSize":4616511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIImPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqqdw/+K7l0rBkto/ie7+ILWL+eZNW/UQv7JNwpi2t7E+MnSKPvBxE6\r\nklAMeZkF0fu1AwN8PxhRHEhiDUsiYDNO4eQWlSTZAlMDUrd0q1RS2K+eBlhv\r\nhAOjvp83zP98PZzsiSBhFB1asl0KnFPS/Rycc31zm6rXWbOnx/6SNvXMq87a\r\n7VCg3vbsbZryCYjxwdkV0tq42CHqAHTogO/gCRVb9xRx7fwDGJrPnLkqHl4b\r\naFDJjHWzdpiJ4F1Qy95M4j7LoIIDvyQvSZg4rkxub+9fCb4z3YroJhR8UVRr\r\nxdWXdGj4y5Z4FPEEPhNQxU5/By2exWvCOImOowUaJsvnoU7CS+J3SSpxz6u6\r\nkc4r00A8QL6M6C5yaHmsW9Q/wj2VwcuAQZyxfppBawW8i61LR6hgOiMTTd0A\r\nDZZH9l1nUDzVexrO6a2RsyxK3ZIflWWDcGdyO9MhGK0c+6WBlZI5UT2JXlP5\r\nvXXDeGQ23DVX9NR25ZHGVrJ82hNvdfJp7cnifueFNtp2VYFuNqgEBSAcCpan\r\niMr0ayufAeouUZJWf7yP8q9njlKUv7W2Y4jO+QGA+txSiE7R1ZOcjnbrzjS/\r\n4RcLbDiSIL36vt/NfKw55+Ag5WZuca+0hWzYWoYaiVK3M7xfuutPg8LLZVJn\r\nMAEmlUQRXvJBv5Nx86LfbNTd9eaaZvJaA0s=\r\n=9npt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCs947EHU6uEcvR5brOIe0JZUYYHScy7pQGXk6O+itpCAIhAJ9+f08Hv7u/Gw63T62oee0hPemgcJD1fD1Znyj8Zf/L"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.136_1646299535024_0.8676905290393238"},"_hasShrinkwrap":false},"2.4.3-beta.137":{"name":"ecsite-form-builder","version":"2.4.3-beta.137","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"dbee6df42a3bbe194cad84f1442ddb32042911e0","_id":"ecsite-form-builder@2.4.3-beta.137","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-pcQ/iCJVPOhstIV8s2D/t+hQUHfmSppGItzGcCJdzauBgUeRTOXb8OjGf8APN7I6ZwNaN+HtKskP2iQwWrfSxw==","shasum":"fceb01f725799ed9aebb0181443bf7a44c901b95","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.137.tgz","fileCount":109,"unpackedSize":4616102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiII7MACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpoYA//Zk5GYMuJrJVL9HkKT2FN635SxN/PJ2QWxE9+ow1bOEybItsv\r\n+uvVOuEJ+VUcnKPKPvZQ4XLbSxA236L0OR7vgmBIQ5WTHGuNa2csbgWd9toW\r\nYfWj5y2aSHSwSKkbCOzou4lzBiJ2AAME7bXWgXDfSvLjLhNU0cTWq2fPHzPE\r\nKAhs0xu2SLjQHW6oLRc6ttknCE8CnyOqtibsABVufmGHx0nBj5mzNNtJIbUD\r\nKYmlM+09p80UToJUhtQhoeafNcxJ1eeucuUSJnW3A51CvmzQP09DPUbWFhrD\r\nCFDmzX55yxyGqk9tXqTxLuM0Q6ZN+Oavt9bdxoJ0cCTiBqxjj6CQNYQT6cR8\r\nc9mAuhQ19i8zSMLedgZ519M9XQoTxLxWjXUivxdOCqBkKEsFHnFOlgJ2jQ4v\r\n17G+Wkm+rijwwoEJ0ITA1yIvbvLxCVrWLD1ae47wfaSWPkXSg2hmOHTHjaG6\r\nSne/OG/I6SLDktnPnLeII/zGTKTvgNakpCXRs9OtfykwFSt18yIq6SGxCpaZ\r\nTfixDroNcweD+pyC1Upmki06NxdVxgu1YebgFm939DfAjl0OWpOrkLuMsxC0\r\neqhk9kpUwoNPdXxTWD7Zb8MKouh1dWbEZ9GhTYKBO+IAVWyZkx5VblqnPXci\r\n4LlkMtpecYfHsR1wOpCiIN7Y0MyLXje4JKk=\r\n=Bdfn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEeuGb3f6aljxpsS0T64i+MMTPYccZYa5YW5XT58qeQlAiEA4o5FSR2nyeAgqYD2+yU4jtx2xiA8xl2nOyD2qXnHO+A="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.137_1646300876524_0.7405022041450899"},"_hasShrinkwrap":false},"2.4.3-beta.138":{"name":"ecsite-form-builder","version":"2.4.3-beta.138","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"a584b2a9ca09da2dbf4961e5cfc50fb59401f409","_id":"ecsite-form-builder@2.4.3-beta.138","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-rxTAR6Tgwq+u3v7xuAW0N++v1J6vpfJ46IOytcEIIW40/Y3ozjGIWO0W4cJWNKKUU/G+fd1pKF74BtmPgIhmdQ==","shasum":"08c508362538491f0f27e4d13a4fec87a990fc25","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.138.tgz","fileCount":109,"unpackedSize":4616378,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIMG3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJdg/+JwhL2grisEJwVByHm4tCv+0XdmTIcaKqWTZmINUZsX+uAiRT\r\nIeudn2rAVKK/o+BNWOO+nVoGHI87YN8HeA2YI1kSOWMgJa498EKK3PzkWxO0\r\nHc/U1Wra7Wl8anzwwgVx8mzrVo2RG4RUrNrLOdcizadkbI2Bm0en7xNf0Jji\r\nz19Wf6UZvCvUE65tFgVUddx4oUQPpnpsLf4WdPQ3tYziCO9Wiv8dLh2rBh7K\r\nNHHTnx/9AS8vrBe9Grg406CL//Y1Osy+lJkG5bDU3ai9ZzC7uElZbxhmrmvA\r\nuzvvxb3/nEgh+D9JE+Dq3lm75ovv7JGHmwJ7NRztvOPFS2wWudlU0NaHP2Mg\r\nbtKnA+TQNq4cOzXoiVpgxO7klRgIXrI3m3EDviDRsIziCAvktdHfwx9/Y1rE\r\nPVNyGBoG38XQPLBRqHL+grB2J2bnRC1S/nMQMnrCzjcCN7bCb7axgNBSTRyD\r\nhUbiE1FhHWtzIZ0ek34BVplI8x0h9+QLgyBscx78N87RUfWlL3YzngQ5qbIA\r\nMa7w9v0weKHSyoprLj34ICcDnk3RNw8TQkoLPm+JOHs7J6kXUhcIlbbOLvKY\r\ncTKd1z+fxdglTCTocvMgHMTJzirhSDhAAHgqILQ+PRLMWCffWMykpxhoWrED\r\nubu5u5kf9vCUX5uT9fV41Zva6NXcq5nobks=\r\n=hssX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEo/YuNcxdWNUDVY15yds06XtL+f0eTPeZgUF+1uJO8NAiBUoTVBcgYlbBt1wtaSer/xiLXQQpBAlu0iVUIVHUImVg=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.138_1646313911452_0.41331867907854747"},"_hasShrinkwrap":false},"2.4.5-beta.36":{"name":"ecsite-form-builder","version":"2.4.5-beta.36","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"9deddd32f29822235caa93d6d228578fb6e050cf","_id":"ecsite-form-builder@2.4.5-beta.36","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-nSBfnfFQN7mtRf5Be2K80B3Rnhr/OkgyYNF4hkM4vPr9hOqUEz0ekEmB0HrUDKqtblczTdEsXilg3trfGTOFgQ==","shasum":"c48e04d24761ab426247e43e0a0339722d4086e7","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.36.tgz","fileCount":109,"unpackedSize":4648373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIQB5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdDw/9F4Xph0m9MRkj2Qjex8z+zgsa/3pI8Qxek/X/gfsDBnfqt+0B\r\nXmw+th+Ik25YWMqAgxAWCeete9wVUBhnKM4Z+ueCdgAklBJ5cCuft5lO1tB0\r\nGXvxuQCIQUbHpAEpCU8z+Auo3Zb47ZqnqtEpKP5RUbaA6bB6H1PstFgRgfnG\r\nHJ7OrLEwNMbvwjeqOmBqbIOdrdDA6cw6EmvWFlYcDYjdbZy1bBaegNK3E2UN\r\nG4Pb/Ze8Pzh1Am5gvgN/dI4G5WyZ3HMUdoe/hAxQJDzQDmpudPJ6CRFkEA7z\r\n5ALEbdBRmXJ7pFchtEtLR1VKarKgyf2XFVNZuRooqA8D03C102IHY28qteI3\r\n8K8WpqWE1ZmYfVleYVifBj2Aj38UPLbqaFh+Xgviwb75ZGj4Aoa3h4/IZdzp\r\n9/YjOLG8AL8XEjmmSRg/lbzwtqpbE1d2AtQsii9D+vAhxi/46rYacryN0poQ\r\nTm6Fs4PH6hlTAO762AUQsT3NuPL6oL0cKp2oURaZjbqoRvZSZCKEMkMKR4EW\r\nkNltBia3+s/UcuY92o1VJYSLoUjYywMKsKgrdsDyQyVk/nVBrb324+Id3dpW\r\n7JwaeMouztnOfjtI6rF1a9QXIAg5IeYa4CDZ9V9WPTh1AIq9bppBL3bXkbl4\r\nKesmIGzNVyhcJrF8vEIMRaYet6Yb7o8NDi4=\r\n=qs5Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCU05qlDtOaCCbEP5aC4i/irOXzyy1r4vAk0yNa1wh3gwIgHnrzInhWrDr0lB+ExQjuwDNj4hOm/7vWNNSVysT93i8="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.36_1646329976939_0.5124664295384962"},"_hasShrinkwrap":false},"2.4.3-beta.139":{"name":"ecsite-form-builder","version":"2.4.3-beta.139","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"5092416605c654b3ce66962bd362f3fbce0b6063","_id":"ecsite-form-builder@2.4.3-beta.139","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-arV3X9gsVf22yw9Sls3+pgzPl+3TWGee9MUM55km6XtadOe2merYIL5x6xMERmulBEuDBOBU15EVvhINVUXOkg==","shasum":"7d7b75e029067dec263fce8bbc013be1176ec032","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.139.tgz","fileCount":109,"unpackedSize":4616429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJZSoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgMBAAjTs4OTOi6MBKSYTUZcH/U9+SZAgF6Ghr+x4MRS3yh3tXYFU/\r\nTalpHD4VbRVDYzTfJ+oEVzT/bB2XJh1mdroAa+6l73GacuFWWpXI5trK5J2K\r\n/GfSlsgk4Thf5X7R15EgUj1m9oDYjh53ijrIu6tK5qw0AIh4qAY104vUP+KM\r\nUCNLyotc4jzeIe+TpAqYdjD3cLQh7thOzsaYDRlY8m6cktNq1vXoDSDVzcuz\r\nNzTUAqnucYx4z7aZAjN9mTE7M+YNNFUyxuB4PBrXOA+FJx6H1kRwzciOiR16\r\nmjIIhwtt5WB5YA4Fqi5i65gRK4CdQ5ubopDZdWuXzxqYm6xZH/vL+zLr7d3l\r\nLzR3JfSKS5ZHL7XwwzPwxkdaxyHa46r5xWQG+bEq7sD1Nx07mwWU/uoflwuO\r\nZn6ttaG3ieL58Vx0eKhEpX+V2ZJNTM+djSgxsKogy2kS2TE6JCfhBGum5G3l\r\nUQ0Ow1br1ULcv9l4XPzkya75JtE6LUzdWevb7yC9Ti0xwhnsG6tmA2WcnJHd\r\njAzHLPTT+uSSfBRjsNzzXQVXLLSMuH7YgqrM+2WB2Zpm2eJlGbj2REaZWGVB\r\nVFKcuK76UxWxXwfQSkPg/aYBOZfc7jS3E/QLDhiCuokd5gfavlcu4nmaseCh\r\nWKCxQS12ezrHjK16gx1DEmbXDgbqdlFITIE=\r\n=Vmc+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVJOjgQp6RQhug2YbJvf36QXdpllP8cQnLIO+YXgkJsgIhAL21f2Y5j52vnZTpbJ5SYuFxoLmdzs4h3w5yX61EJRug"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.139_1646630055923_0.7806985829505715"},"_hasShrinkwrap":false},"2.4.5-beta.37":{"name":"ecsite-form-builder","version":"2.4.5-beta.37","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"06ec15525197fb86881729a9677e9f49f406bdf0","_id":"ecsite-form-builder@2.4.5-beta.37","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-bxJ6PrNqdz5joPP4Usb64idwESDIKSPBO+V3IW/VEIK7yROncu18gjyq2o/PcJq9KflGgc00oi3dYdfXFldKTQ==","shasum":"155562ba567bad97c8b93ee0ebbe75dfea211ec5","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.37.tgz","fileCount":109,"unpackedSize":4648402,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJZz0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2Jw//QtKzhAvUMGG8BAIl2IqML95wGoW+cfzbb5kKjUEvonWuDp72\r\ngVl/MbrJ5RPGj2Qs2Nz6fFFeSM6La0G3zG6N/rzlNDyeTIZtDRFfxK1ki4Ho\r\nl3fUoxjvXqe8zWhZr/w/i1V+ulD37FtU2t9CbTSlATo5TXccWP7qYDNdVnZO\r\nclMKMz2dibDjBtGm67zUy+POqLV0kaRjNPvU7UwHZABvy2nCzPyRtJULUQKP\r\nQ5JWyg9qyYteXCP1Iii4762C+QluYG8yxQ7wImz9WPnSOZybtd96E3hoggmd\r\nJDuY2VJqCm7V3ItyLYNxHDGgHX+mNsLvn6DNNkpxVHHIG9GO3xFQ/rnGXm2N\r\na/qz8Tc29hYGi8I5ZlkbAdY4HNdQE28pLpchVVOMkU2VXYeFpB/FozpLCMru\r\nX3BhJSDWGU6+gHMFknNwoQG8XWheQiuLjuHeG3TM0Uoh3V7NEGpYjWsqfSEN\r\n23G7bf3bHaURCdJ7RBQd9aErPdXsL7IUnZMhYe6vWnoGzy6/SmCB0oZglAGv\r\n0a63bQLS5vG0jTQsmSmL1qEJdM8VejzS+aaSY0ge/mxQzSAPKs9mF9sZdFJw\r\n43XtoD8TlcdBT8ps1afgomRpksvhZRnTcL538VjY9JSCHv8CV3J2W5Wv118P\r\nky8kCNazLDKvc+JWbGCjV7vzSUfqOiQNlPU=\r\n=ITPn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEm3pICrqU8yMt3p85mwaLR93VsatMw4JAG/qSFbB6SyAiBIp+pFSCuXm7KULA1frDu/gySvQ+/hA/8bO3Ggk4U5uA=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.37_1646632180736_0.24990026191649073"},"_hasShrinkwrap":false},"2.4.5-beta.38":{"name":"ecsite-form-builder","version":"2.4.5-beta.38","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"eb74f50d89f80cab7bc6b8dd20c82bf01cbfada9","_id":"ecsite-form-builder@2.4.5-beta.38","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-C62Is/rIwzo07WW50BhIeTn41xhY6TlJ/W4uKC6p6ZwFegFAKzmPz6J/NdTRyaG+I9L4XZk+rmRKPhr8orAqIw==","shasum":"db6780875169c409416258cee8bc9b568da4fbe4","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.38.tgz","fileCount":109,"unpackedSize":4648382,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJukHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpstg//Q8WSzl/adDTma1/EgOaXdoUBjW/Sdv2hpjeDnaGa5n9QpNrX\r\nJD9Vx6sanSJE42aFwNghPT/HYvGLs3E5ky8yQBDTuf/dBXUrL97Piv2ivZUY\r\nfncrqcLT6HB9xRRWIi/OuHE45ic/9ViFjQy7u55qT2zxjLjb8f7jp8Xzi1gQ\r\nLej3zWm1qOaD+8Aca4ied1cT+D+iSMCXNVKdc+Wr+4hdgy/cleZRUKgpEf62\r\nlAbftKCAZXphVDm/xGAxULc+ihQmQAi0zSp3VG40P7aGgLk2IUuunbUivK/I\r\n+4B7nZQwFi2F0HerO4vVx0i76L4lW1PzImey3k9n/S/RcoOlM39zA/SmxLyB\r\n2mhg33+DJYx2Lf6zbmINqS5TPZCjAA9fcR0e5evPemje5YGRcrIFZeOTF4ec\r\nww81rQTx/heo780H5Qhpd6Oc2xTIGrEGOy2u59OMyzygylYDli7KZeHrqGY2\r\n3iDRLSi1cj0jfzXhKXvATXUcamDKV5uAX9K8hQM2QlYVy22sdARJBYAYX8qT\r\nebhv2hveu7EiQ6wGfufactEMUaj8NEmK4yzqhGXPakmPal2UdmTGTip0C2gs\r\nQ028Vd7FVYhLWeLDGZ28sdSH6v/ChX5oAmMfadXQjxYxkcnv0tG5pyy530O1\r\nUTQWajJ5C6vStuL1amfl5HWyU0O0hNfMyds=\r\n=ZPLj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1Hd+qWv8OvoS/KCBod5UR3ylRjmkgZ0gkfISe5vwBQAIhAIrTeOTM632B3bzlG0tfTe1UEzst6TNhtn5i8/e/x5av"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.38_1646717191694_0.9972818942272468"},"_hasShrinkwrap":false},"2.4.5-beta.39":{"name":"ecsite-form-builder","version":"2.4.5-beta.39","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"64454cf8c9fa66d1e3d052815603546416c74539","_id":"ecsite-form-builder@2.4.5-beta.39","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-G2JjAW4SNdI7/qR/77ArznVB0H4lAorOJJNQaHAnbJsFbcwIsOri3StrZtL8q7QAWnkqTgR9v2JqxtreUn7k8w==","shasum":"94f0c13a72c4ceaf77606be7c0f4e27ac43485a8","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.39.tgz","fileCount":109,"unpackedSize":4647179,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKHIyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyTxAAlg1gK7fzac/kwGTfoc/RsQ1dBmSC7edJrYhp9AEevrztTI48\r\noJ0xEdW8Cp5Mu3LB+YW17OKmEu/vqWIhIn2weHOks3pgaidH/EyCs+/IdmvM\r\nN2hLeHerQumfSAen+36Wh7EJdSkYKXO341bZ68F0tNcWlEL5g7ZXxu7b+XwI\r\nxSeVqGR9FJoanNWyKGVZM8Iw2J2l+Bg9fhUhpr9J1mLy4XUhu0g39DX+G+A8\r\nEa7PJ/5nx/RUbphp4z2uALrCnYqUHT9/r3fDRZfE6tqHGySNmc3+Txoycvjb\r\nUMPKNPcZH5lbytMWCQcJihM5hvcJJ8mwJbZSLA4hHliaAXhDvd2+J0b0WVDX\r\nxCn6si133Oktr82T0rT/57AGHO47I6y8y5r/R0g+dj4C3mRLrmbjnl7+MYKH\r\nbggi2mWtZ0tKZu9aK3h4HiDCzh9CTjM5xAcjihOPo1MX6iOQHiUWCYklUZjo\r\nJnwuiAixuFHph/nyBHVxnP6xG5BkLLg0AYVJwNSgbyqDs3r1F2lfu768WGEe\r\newV7xcScYqMagR25wCWKFPUsQvSQNegEZ9P8L4NYQguaQuPAiuL74JRQ28gt\r\njDFxrAntqwGW491yCl0Wc+H6XrzWQq9FL8eSei3gVgUy7MrJQsdcYrrZSKCp\r\n/Qy1oUQPOKOSnxjTBM+fpgSUFrBC/DHd+Rk=\r\n=U3J2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA2mLis3MXPqoTO1/0U+cGMYNwKVu4O2nH5cgyTGRzbAAiBxlAuDejalhqZtdqmHoSwEM4JoztsdYg5kLgotAh+qTw=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.39_1646817842015_0.05066997263406159"},"_hasShrinkwrap":false},"2.4.3-beta.140":{"name":"ecsite-form-builder","version":"2.4.3-beta.140","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"7e32688ff4c63ab9c8598d072857ac6f571b48cb","_id":"ecsite-form-builder@2.4.3-beta.140","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Q38oe1ISf86Sz+UO8xn/l9ai77ICP1H1wuO/FU4abc/L/HjxN8IjTS6sBmN0qMu36625XxrgdvILkKQNsgq1nQ==","shasum":"57fb288b228536ce8ac9fe6d1a0d3f0ed85ac987","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.140.tgz","fileCount":110,"unpackedSize":4639554,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKdFqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqppQ//cazkrFPr1DzF4hGNvZsZk26Kl8afUsxEBVRFH2CZtPzvTHXG\r\nddqPVKj63M2KsPqSsZ0y6jje35f4BwYpvqt64pz0eFqVc2MC8Qd5oSMntNAM\r\nYXIv3zLiVHWfIgBBqGDjHXWFP9ZBl5d2bw071f9qYY5zBkRB2n4NhP7BiaU5\r\nVFEAPxh4mtUNfAQOx5RsLgA+tDMzfzBZnngiW8Dw3a0vw4AtvFdeURW8RUc9\r\nHLfO5COyF3E0s2Cazg/vGQbGamxSE+A6unYDH3GNTe7W96EPRX9RUE2l3ULT\r\nzJrkss6joUM85ZYt9s/D2tzg2U5OJgK9qhMJaXRxB0GvPWUmzlAHTQL1huIq\r\nmzKh+CEDNrI7wWU3wYRbHiUNrN+WIjL1Zo10d3zzzfjAdm2/A8YZoZ3/Q4Pd\r\nplyPpC5tG+xpf4UtdmJ/ew1I4TPnMelf+GhLssLn9EQP/D+TKZv5F/L6jQJo\r\ntE/Ytz4LIB6BKR07oy5BqQlToBvGAGW7OBu8/gYQ0Ggi6pSsGzypvt13cAlu\r\nqKZqqxP+56Jsq6g5PliluB4ys/appnV5+JWzWLGapjLm9is5+xPXgM0x4OHv\r\nmkDtZdPC2vQAMnNRuUtYzNiLeS0t3st29ERHh6MibXyPHYvHOxJfCkvdiQjU\r\nXig0Tgxg4SKtUW377XXjstFrPcKwKVHlwEs=\r\n=v8Jk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFNTxDmGWxevK0vXkmNFKZO2QCbLSW1QY/GIqvOhgzmEAiBMyqL1qt+O+2njaNVstKge1r5vIxiK1BtcSDS1ENSmTw=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.140_1646907754781_0.9651549339636376"},"_hasShrinkwrap":false},"2.4.3-beta.141":{"name":"ecsite-form-builder","version":"2.4.3-beta.141","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"7e32688ff4c63ab9c8598d072857ac6f571b48cb","_id":"ecsite-form-builder@2.4.3-beta.141","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-KhSnFXvS82m+4U6soORHHplolluyA72WcDSHCdCQ60Th5IxzahQgo+0d5gdI1d7ZC1uptAMYqegpSDc7a/SHlg==","shasum":"97e291b5cef6d725f5c62d10610145771de81f3a","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.141.tgz","fileCount":110,"unpackedSize":4639506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKfs5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRCRAAignCzUpsXe0EcbWa8mLE+P3GXOLQ0w1QxLVRE9aY/hNb4N/h\r\nQK4XhkM/aPfENp5GSLKiUx8jZfwD5D0h6sIArA+OXJ3jT8oy0j8wsD36O3/e\r\nDffThn48ZYOQMfkbfJguVg7BE7+PEMl/7K3kAyoDzFSiLuSHB75QirLbvwvA\r\n7FaE15xAR/1iAJhZF3PE96riCedAPFJA+bw1vPC8peB4pSPVM81UD+2OqI9Q\r\ntsoQpU5Obuhvgq+m5soC3ESpQshP69cOCILzuqbKGtKk5Mrn4dqM3/i5Ciys\r\nu4OWJ6FtRrw7PEvt1YlvUnAacJbqDwp4KIZg3srxqAYh96IPowFWvr4z+ttR\r\nDnWdNkxUB/0HHe8WvYXmpuQLpNYYDvAB/nIDGDEtR82SJLXCcVnUzJK3F4py\r\nSWl74ACzhdBg2gFI1gRGpKxCWphC4iazNQ3taFaVsRMq3PJkVeJThSq8SOP9\r\nX+aAaiVt9dWVVggt2nRts2eOsxL916nBzv6ItPW2jBLX3Ei4MxGv3isK6iyA\r\niaOzu458hF463KB0Xl8slZoV+4SU+IWzea7aLVOIMy6SSoQLdSNCs59pkxcm\r\nBhZIEyUKZgIH/4otR4Q2LMZH1riRWxMAv8zK5uOwswkusIyaJCB6KM8RL0+D\r\ngY2pMR4t+MuQcmYxYJwuTPmoJNdYmMRF8jw=\r\n=M/7D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCp58TjVJFW5dLczd8aJmcJ895N/rghTpLz+8I+Qfm65gIhAL0viaUPLjLvQWXv5xoHbtR0CBe3FifIZq8f8vFdZgUW"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.141_1646918457538_0.9329965041440083"},"_hasShrinkwrap":false},"2.4.3-beta.142":{"name":"ecsite-form-builder","version":"2.4.3-beta.142","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"ed1e08df77a685e523b9c377ff1e869134016a5e","_id":"ecsite-form-builder@2.4.3-beta.142","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-hDN/1xUYKN19+rhMgHaPUdMazxrZKGrKSrz+NzwHDGwMTPFf47WPCaoLG1AffV7DwyF8/1taxS8zVssHyu/6jQ==","shasum":"5761bdd1c5dcf12b14c9d65dffadd8d22730a13e","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.142.tgz","fileCount":110,"unpackedSize":4639706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKhdCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq94RAAoWMdRVBDp/6bP/HByv8V/ZXSC9L4uV/fQl3l9/fC4ZVpA6XE\r\nIhe51/Bmn2tMHQiwTUEWVzSuUf2bJ95I4TGzDc9D4Q6brmQdN0ct3HD+UzAG\r\nEfQmAbVQRRGV5S/3rgxu95okrc7FDHsGHoioQnEwCd/7Z2kVQM1E3sBc4Prw\r\ntDUjv3GIomohCiZWwOHcWbFxRHbrrZ5C34diDOVX3gim08eCcnbGwRHGk0MD\r\nX11BS21d9XdMworth8PXo5bU6igtlWKLMfEpLX6LLZZ9Ny1RCwEkE5cG0IJP\r\nsUylt/lA9raKuE17+S+TpDQsJA1GjV5Jm5hDbUxj62x1uY4UMozb0VPIvhLN\r\nPbp7CcvaP/C7V963CU9tkV7v1LGEUOgfANu7uYkfs7lvXBIVlIeKHBseyznj\r\nd16kBAnzmBXPW8gQjaXiJHgMzF9is9vBLNmjRyM2swNdd8wFDyJHS+NFbMsh\r\nNXCHenSQMgGh2/+JlB3mIWmzjqlvrNUffkTahgTSjyWw39GURdruho5FtU2/\r\nuvPmTfcW+j76uMjmjHwODF7LHXkJGTIP7zsg4g/RRS8ZSjU+bU+Kr7SUU0WZ\r\nOeDXxHm6uP7jjZfDOCgagWL8nkXJz4aHZN2lAUlk9c0zeMcCTCbyjqCVmgF9\r\nGPBDpIAtzvOKiDze/621GH6iPMqcKrAXKxU=\r\n=TOU5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClhB24mvE2HzyaIQxKRXhLmO3JsAvoemuElnbYuUUFAwIhAOUTPIVB+W3i5dlndYPAx5dOXR4J7TlEoxJA+2g7heGt"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.142_1646925634399_0.5214830294578803"},"_hasShrinkwrap":false},"2.4.3-beta.143":{"name":"ecsite-form-builder","version":"2.4.3-beta.143","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"ed1e08df77a685e523b9c377ff1e869134016a5e","_id":"ecsite-form-builder@2.4.3-beta.143","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Ce/rvLdpVy2jcFbgD+0jYFMVVq7wnckOYpGW3CywgY05mvOYVALLu+/8r9GmL93+Jtu13O7Oc6k+yn9WHqWFTg==","shasum":"068367f118a21c4c6e92997c62629c37a1531dda","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.143.tgz","fileCount":110,"unpackedSize":4639650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKv5bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSXg/8CU813HJAS4RBS+2jvBdvm9AhBeoK21OkZrZpcsShEYGVtSS4\r\nItb5UjKAtqguIgIlICbLX+59I3GfzpV0eZClT8OECW0HKIchVdy6Q2BsKH6L\r\nZxzq2aFRuqkzK1BrIbh/6el4ExQuA8soQHZ994TROgTe1A/PpvsiMDirEQaK\r\nJNS/LCj46gJgrtL6cjj/N0gJGy1wNpRz+6jYoYZ+ccxPWvvzSLC5RWildswE\r\nqO7y9eJbN+G2M0W/2jiPtVkbVK4BJbTgevV3wKj8yT1CMk5z/yIFcz1bLjI8\r\nXzOFqwF2Bx7HgzSSad1A5WhUWd0bUh6J2QY58ecLJK7tJu02z80AFH4oqLbn\r\nsjca4dG/jrDI3nwRzfZgz6m4tdLbH7gbNgAXx0qs8vkA56IZgBVW/1auVao8\r\nUDqYD+Bb+KSPZH7J85zmqckHba0RdPVp2aeHTkwLONNGICSsynKy4SuZRg5U\r\ntK5ZMj+OdIHrvluo61+mar1EgEKNpwAc/bMwbnqxCfMotVaibY8tFfcXYB1d\r\nBs9bnBUWBhTKfa6Mo9YufNEdWMJq9mRos9H0ClJRBmPq22niMPKZJoooYx39\r\nl+rwrHGOrrOoZnVlFNnH7e1t4/1WP9jz2o+ht6RImLXWwlEggsTPVGsBQW3l\r\nmW9Z/LmDnhChWlQSrESqOoHxUz1LHv1IXp0=\r\n=tipU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF4n68NNkVdNLyF8Z0WtWMqw22tydXWDJaRlCZHBYoQeAiEAhJLax108W64Fu7UshWcCOKi5J2HCh8wgWGF1kYL4DkU="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.143_1646984795612_0.09370159525400767"},"_hasShrinkwrap":false},"2.4.3-beta.144":{"name":"ecsite-form-builder","version":"2.4.3-beta.144","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"18894f3189129f5c342f84fec6a02224fa6ec787","_id":"ecsite-form-builder@2.4.3-beta.144","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-zjxbbh3P2eaG41ghGi0RLtHp4ftXXBj+8egl2W5exAvmIgttd2agYmeyBospoW9YjsCLcIzPomw5oibKcF+odg==","shasum":"2efa183fdf7158f8ed27e0cda3071028710a6412","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.144.tgz","fileCount":110,"unpackedSize":4641705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiK0Z+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmprOw/9G5/GvOqHpaQzzTn+S6AoJLt3IElahjraztOFBH1RT2EAtVB7\r\nJbzYdsHEFfKo2VGT8fFjySO0WI82V3BCLHfmZY5ovz9FDLDGcOWJEhlIU7Sv\r\n22ReMxNfnA/BmbTRHrvP1sn4Wf0tMQinvTRMLzc8XkHROrDa5dVaxO6h66A1\r\nnEjtFHrUGZR88JBvWGHMpy+PUZ0DgnK5fFGAfzotQdPcKojGAh3hfnynPA+F\r\nJw2S+KUXWqWAv7Yk5mmLLyT5Cq0oTl515NJilkIJW2DNY/ny3v1LZMP0ihE/\r\nWfptyLjze7dpGNR56jEAfDoyYZy6RiuKuJS7C1HjXFrv9ZTC40IizlaiH9Qo\r\n0KrR2rA7nfsyGxDBDEM7zWqmfFHSyRcLScdgxj2PlByBID4TVBYSq2p5T8fP\r\nHy+tG8u9gimdTKjXW++hJjTcu4GLicsoK6ISC1wEKOxEMCz1h+GICXtZTiv8\r\ngQghhZ0TFoNEi+TjNk+ZHVlHuAGI/YLsr8CxkqTgg+NB28bO6G08/BTfWxI5\r\n08bOQ+3Tx5hgsOGTVyoeUjsoKKWJj6aI4CUcwfyHoc6e6zvNe4lqBLIEA9u3\r\n4iDzNPOkmXotzog8kvrsvdPQYzSlNcud/HYLmZVuTF8gdHAO6tX/+Wd6NNIl\r\nQOXJ516fOKOWNAkOMNbazXy/P0lp+JMZ7XY=\r\n=Zch4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDd2AtVDCn4233Ra1dmvEUZZ4kowjEgejb/XoBmE2KolwIgP0fXGpdvW82zWzPSt7bc+QeJTkvCk7Fba8SdifunGnA="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.144_1647003262128_0.7266128559740366"},"_hasShrinkwrap":false},"2.4.3-beta.145":{"name":"ecsite-form-builder","version":"2.4.3-beta.145","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"120e793104f7d1a0404215fec0a3151cf4068dc5","_id":"ecsite-form-builder@2.4.3-beta.145","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-4fSBn31zyG0sCY7o2uWRZV46YkpkJEp3v/5OOJXIE+61Eun+42B/y3tqIC1GiVpsIhDmtCXLRGOKIZAJMLzYIw==","shasum":"966420f7c1d46198318bb05317af369d172ee30f","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.145.tgz","fileCount":110,"unpackedSize":4641867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiK1e3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrogxAAniLZQ6QUtCjz4i4xOjQs+knn0tlIRKWxDXV8QGE5iALiPj7y\r\nAUVgi0sy7uOFC9ROsifechDkpFoAZtbpMp99RgAarNAxQE+lxBWwr9kAFfWU\r\nsVGmOCd0MaQyldviZ52iTuqN3ZQW2LlN8kCMHjo4k6lQ9dUL+SMaoJXiz59+\r\nn+cORW1V0T6hnspMKpV+BEl6+C4kIa/cfX3IH38wiEy9qCwNfNQN3HOtJbXL\r\nqUA+4Iyvw/L6Mkr/Mbfni1nVu9zVDz0L2wvtK6CffyeLxu4HUgyaw9xjwD1b\r\nkqpG3QtkT+pIJHkeORIVA2f6sfg5kAmGYIfdebpDcHN4/TnOCcIuZ/dgSor6\r\nqsdGi+1+Y5F7s2JgmLrP2sizE9TKTQfkYBsYo7FjJVfIej0QabA2Z15yKtf/\r\nbBm8zjIr8IvNSph4AsWE5xTvjqyynkSWI+PxGS3/UbvXoh4maHlDyB/P4Vgd\r\n/5MnU86K9M1p3zZOP8MQoRQ41/y0Xb4/OtwFB0E+Qq9bqitiifmBRyDVDXek\r\nuPc/4ftq3urphxKqa3jjNsoVBMIxI8Cw0tPcejsu9Ela/emMk7Xr6fWkMkwX\r\nvt5aFcZoA/mMxyHWoCF9yJf4T/NbclipaISAt3uFh8kkU4Jp40/BEECKXbTc\r\nXaro2kpqvxoqXMk9vkMtPbUtCG5vemNpB20=\r\n=NOSY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9ctn0IJPVW2N6BwA8Nt7O4rUjUDbpFFUKcP5VyHLxzQIgUV2YwJHM2Bve9ynU056Uhv81kB78X14tQQPJ+VBrVBU="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.145_1647007671059_0.6737056981418821"},"_hasShrinkwrap":false},"2.4.3-beta.146":{"name":"ecsite-form-builder","version":"2.4.3-beta.146","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"120e793104f7d1a0404215fec0a3151cf4068dc5","_id":"ecsite-form-builder@2.4.3-beta.146","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-8OPhQkpPYjELM8ytviIoFs9GHWWKnY809uhit1jKv1o63AKXCAxyQt8UB7bHHoCRT1+BKlGdMfje9fYIDiTFPw==","shasum":"c234f331e88ee1d28346e8dc80baca8118fe3581","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.146.tgz","fileCount":110,"unpackedSize":4641277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiK1+JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmosMQ//a2yZ/3BQfCbm3s2VYSQjoB6YVuRveOO6cIKEHF9GuQHSAxtw\r\nue4akkbhILn3nVUkmmJTlH52Bon99nUU7wyJlu5+2wtL5GfdMc/q2sB6QjP/\r\nx7xN0BQ80v3L6PVPiPHqAszfP59hwXKNLCEGQ9Bm0ZjENMFVTyXjGtrOJpRu\r\naI4OoDQEsoC6m9sV1k3uyvalGO3bZo26s0o5DofLvpk45C+qwA57i4wwKHbN\r\nuB4e/+PNAuJ0PdUWrE49SdtUXpmObUDaGBFK/J4yKgOKOqV9LMBKYm0TIWhZ\r\nyD301MEJ3twad3LROy3Ao9oBrlNtyb9i4atushXeK6C2sIbI0GGoCgbhT5z+\r\nXRUR88/CJ7JiFuzNAIYDZrgYCQlYgU9e08zL6U5dOBPPWqCq7MD89PNieGxu\r\nF5/Kx27Nq4qlLOjw0d0+406bRyC8hDBJifiqPGvAD4gKBPqnUlWZggRjLpHc\r\nWPBPhKsGUFTG4X9xlPgzqYd3yz75WeL7mUywIWbFGdmhlPYJbFQ0zYoGd7B4\r\nyGG6vG2CDirJqjr0lVX16k5AKKlcUADbVKAJ8PXc3I1o73vYNujf4mUVnmUj\r\n5XLNQuaN1P5ylxjH9PW/nJVtIBXEdgfCKsvYjL5aX1tFkBqHkfu64Gx2UDIJ\r\ncKy1cccfGL/dkEsiOvg/ZwPbf50280hTM/w=\r\n=OMgI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0IwsKpmk4raslrGVWqDXuyNbPWHpGZN38hHFFNTtixQIhAL4Kehqs7BO3gWn6JG3Co71CiyDyqLk0NL/IpI+WDRGu"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.146_1647009673156_0.10712856848164165"},"_hasShrinkwrap":false},"2.4.3-beta.147":{"name":"ecsite-form-builder","version":"2.4.3-beta.147","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"120e793104f7d1a0404215fec0a3151cf4068dc5","_id":"ecsite-form-builder@2.4.3-beta.147","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-hUvMNKVEWr3eF8Z6sqC4YiFzezFTv40WeWLtvFxf+DMdfDBDLx0AHeEgize3YcEvAtHfmlk4BuP2vWS0RN4bgw==","shasum":"df8446827e0c43da6bd2d7974cb9648e438db99e","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.147.tgz","fileCount":110,"unpackedSize":4641282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiK2IMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2Ew/8C/qkJHnQ3bP/CjBpwn6V9jDxbhgNOXDbZWQtuGEEa+7LKuJd\r\n0N0cHguaIoS5gQylH9BaSHrLs1FeiDOedbH6AyrERW35i+fATK2r/3Gjvw7b\r\nmAvPyJVKVamUsmrgad/PLs28MqAHX6PtjUgYiLfg2JPpmdXgYYg8M2rBnDkF\r\n8uWHOa+Pca+Heg40iVvyU8NbUPjBEgBO4Ho9noCDyUGIxSYQRqaNQ0cfyMCG\r\njSk7yjHsHaHB3QGiSmPMCz05rWJD8MtOwGIreRaF+p6RCXN1YMTwrlD+K0Qj\r\n8AIm3jZqoU74/zdE9y8mDnTyko47CVwo2X0mqEeSCWdiGelgFssHjzf03JVp\r\nZetec8I7N+bEMGTN67W+AIV/hOqUZfEcqvarDv5HNe6Em3b9wuyRuls6XSWh\r\nzASeEMfwAMGA8Q4kh9qIsIvsQ7rQ+680MQomIYJDaP6DAtn6p58KarOgojuS\r\n9JcPmxdi1PxAD2B9p+h+DYEyiUpmxxdVTMSFghhsW07ZoOxKaPC+W4simCgN\r\n68wzQed0GvF6rplqe9gqpq8d/pH0DJMjDcLlBTvkNy9i9nV/xImyZ4U0SmmJ\r\n1/uL0fuMZRyC12UVuivS3de4A4/48EoyM1Ov5bIOeiHt0x6vDOVz1QiPGP+8\r\nMUcU+4LWPEhZ4FiXGKFjYhF2mPIrXDXhFJk=\r\n=Bwyk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFb0PA1W21qKQNz65IT+nS5hs8f6VdYvd8H/zFDnYKhPAiAcrqdcYW5AtuYVdyG6vDhrkqFzIKiKeMW77c0CWkFy2g=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.147_1647010315970_0.4733563274822066"},"_hasShrinkwrap":false},"2.4.3-beta.148":{"name":"ecsite-form-builder","version":"2.4.3-beta.148","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"120e793104f7d1a0404215fec0a3151cf4068dc5","_id":"ecsite-form-builder@2.4.3-beta.148","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-9Z6pE+XXEjzKaVx0qerLS80iA8pLwXL4z/mH6kIB93o09ZcxDAI0JfimD2kL9p8f9MoviVHCG7yHAe5mgeXvUA==","shasum":"48629084a07e220b0078235cc3ef2172c4b07a97","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.148.tgz","fileCount":110,"unpackedSize":4641282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiK4PIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokMQ/7BcvkZyr+k+FFV7dZ2Xcl/k0gXalgwYAMC1rIJh2JNnAyrn69\r\n90qPPMVKae9xl9/aShkvXr5r3AC/5/r8GsOM1CvU/ljsJ9t60Wr9+lRz7blp\r\nDRyvLS3W6vMnVLAqz1VGvQcdECdZXQAXcyeuNssZkWrcqhJ+WNbfmtlabWIb\r\nwM0KseDcYgBUqZMnqmYRkltCzPqvwJlyJfFzd6ZNPTSRnPSQ/N6aiMPxG5Qp\r\nHU4Hj11nbe7AwsOyiXxByP/O6HUY9t747TfRCIsyFW8OkCIhc/ECAm8qHYwE\r\nXsKmfehofiiXSkVhguumDS7tnK0pjhF/VKm3at88kK9y60E4ysrZNWlupYzm\r\nsIzf1QmwFS8dYQWN8RN/kgS8YlqUVCzMkAXZT6RqjUF5wZagjXOoOEYhB+NH\r\ntysMHasPb1zHY0mddeq8KS8sQDj0uzmkoMA/KdssQ1ENVViXYObK4mMECBb8\r\nNGdW433x5w8aAmcD/1rsZlTTUhO5bofx8rKp4cT7S+VWGN+tC2J4myKw9Rhp\r\n9ThfTwADuEvm7RqvtOYtl/ibxNaRluf88iQy+akGcK6J2tEqquzaghEdQq69\r\nSXRS9rDmxsGayWuW8ZgSdz657j1XreRuvKkhCT3w89K66XTLt3uCZW5ATs9e\r\nE+SLzn+xyeWhq0cOeZfoepPJUPhIHZYDDhk=\r\n=VzqP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVokEmydk7PwmPnktL5Tt9ORHK0FvexXVw1dWXE/FWmgIgBnlMMnKNJdRUMPCj4TbaKVwWs9cnwV+xKxTQDA1mj70="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.148_1647018952089_0.6632331638379532"},"_hasShrinkwrap":false},"2.4.3-beta.149":{"name":"ecsite-form-builder","version":"2.4.3-beta.149","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"120e793104f7d1a0404215fec0a3151cf4068dc5","_id":"ecsite-form-builder@2.4.3-beta.149","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-YaPcnDeAAo3eRBAaQRCTkNKWJAqKa7TbFLlNqfjYVRU8psqWQb/SgsV1NTiII2aokthIpaD+WPdSjY4kErylCA==","shasum":"5d6bcdf542c03e4b48370efb5c4676b1e7f413f6","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.149.tgz","fileCount":110,"unpackedSize":4641262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiK5BHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZTg//U5Ae44K5rcrWquWcMV7YDWsofqN3K6UJoSAnGsekGyqxqsCh\r\nuHA7MpiZy7sOBdhdSirLiVKa51uIlCfIvqJnnxgRDiL/lKhi7CuyxCTsJ/xc\r\naU06uuSF80dOGrBecU9am7NyZLgIFyd7tx3/TXY+Byr/F5hmVEm+6s2FEIdO\r\nZy5Xj68N11Ko469BNcVnXHWyrRJlHOyTqNwDM3+G/CDSrdEAPW8R27HgObuB\r\nZxiM1EKTbbOhPR8NPOVqeyMvw6HPRMXPPJzuBEPxFMYxaqF4fK0UTpE4S/J/\r\nm/m45W3SBnFtBKFWKTHx5haGbmqKob5N0dPtUJN/k9Huxi0vxzDrdimJeU9a\r\n7vFJr9uupWiXIjIR0AH8ksMr/sBffxn9xr8ECOOHEJKi5XZdEL3qnmG93J+B\r\nko7QOc1gqrkI+dnCpVfk4Pis8XTyZsPit7oFde4Q/oQqSUABVOhFE834fWss\r\nMsyU31qgGv3nsdxdPq0G7vm+O28C8M4W3EH2ev/X9Bv2sUzOi3UZVg7SkE93\r\nQnjd+PqR0S8ohwGb7e8dK9STLrCiU9EwZ+6orYDBHOpOC9/9K9meLsyQWCZA\r\n+3wgzeiNzBB/MBQ7AsXgIuuXCRUjARnOoN5efUZglJe5ejoKB134gHCY/Nlf\r\nPviOUQo4sSIH406FwXFMUq4z3rFkys4jPTM=\r\n=niSu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICis4H9qrTrhFTVchVngO58Fob5Dlb5mGumRVM3I/HT1AiAMrXLQoUa9EuwmniSVoEx5nLURRMH04DAiGV4drO2maA=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.149_1647022151134_0.7626540820672776"},"_hasShrinkwrap":false},"2.4.3-beta.150":{"name":"ecsite-form-builder","version":"2.4.3-beta.150","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"120e793104f7d1a0404215fec0a3151cf4068dc5","_id":"ecsite-form-builder@2.4.3-beta.150","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-sj0xFdk2lZSnBKhm5nmWgVMpW94E1DujrqWbMsGyXcI6yyfnKw6FfheuOE+xuT7jsU5ub50JZX4ss+BmIJfC0A==","shasum":"0d0d0f03ee098e12b9c10a09c51f99d8c5f3de5c","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.150.tgz","fileCount":110,"unpackedSize":4641262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiK6IcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVkg//eUb7JA5/z0AhDmJ/IJWMcIm40hS9CJHaJfxVrsIKarJCbc0a\r\niMXh2jebstayDGtOXo2R0DvSRQ65tW9mY3jFSDsRF+BmuZ0UpL7XJu//j/oM\r\nKOwSLQpsIrN50iIxPek37hLyLgD3mKlWyDuzxVTWX2S2dmeoXgxNRafwKPD2\r\nFZzKciTvFJ5g+3nQROsUQRW3M0JYXhFj+MKwYV7tVD8Ew/uuc5Nt3Xj9e3Ff\r\nv8HOro9osHXWsACa9fackzYssFanwd52GiVmBTmC0bvA+vQHlXCzklkMZgJw\r\nAgrC35xb9GFLGWXz+sl2ml/Lx/42vFVL7/EQmJsuca5gwe7IZzLotp94Y1GC\r\n7ebEbXOEhLWA/FvQjcD7hQ76hpZ5XuYKj1b8d3U016hIIs7qtgR0Q5licImj\r\nm5AeR92QEL6CXwGKkirQuxp1tuOfsjKxDlWLtCM6ZIdJFaJ8FfKv2SD4nnSf\r\neI5g4jkV7t32TcdwLx3B7Qa5RaNDuJ3Np+jJo+BYwFnyL0f36pcCcs/N9EN3\r\n9vt4qcAhf4YK6gT4fwjjTRPfNfxsGEA5LdeEBO7cw4ulQrcwp3OJ3UdZk/R1\r\nKHakhCkZ/Vqk8SyQusBxg8sYOICNBh3QbifEMP0Yd1YwjJCQC7ABi1uBM0gp\r\nSijnFT1Wrg5kTng/jgvUKOIgt6Kcj5QKAAo=\r\n=tCNT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/avpAzWcMj6eiwFBc3/lVGUgNyO3zu3Thc5UEbb8IGwIhAN+kL1wP01NTRbcMGVRPe+TXzb3/AJorusHMb2ddq8C6"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.150_1647026715814_0.5051206354988118"},"_hasShrinkwrap":false},"2.4.3-beta.151":{"name":"ecsite-form-builder","version":"2.4.3-beta.151","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"b0c62bbf06588926a3c74d6705a6ef755103b431","_id":"ecsite-form-builder@2.4.3-beta.151","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-PiuZiSjOudClqTrHmOJG/F0v4EHFKboVg7Os5yt1o6Ih01ytjhUmgFNHerysGxNq8W3nGsOaSgd+DJPb1REBmg==","shasum":"1e85ae98a808367e75f7f5b353ed9cf033e97bd7","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.151.tgz","fileCount":110,"unpackedSize":4646582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiLJ/wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr59BAAkmcC3aEKnNAGx361gJgFL135Rn4eWUBZhlL9LmpkSQfH2I0C\r\nMZyKsu78hhXgdbmVgejHTJIGXnvimRAR7Eo9MEzAnuRyRV4UcSCdy7i8DCjM\r\nFMhZm3LgJinw8sckLLgFLbfpiN8JWl5wmUB4SbJoQJWBJxp86dHml4jQ/M7d\r\nCQgJbLkD4ymJdpROfIr0bwqVBzA02G/mq5IDoGWlwVAMpHoCa09p859kdhwp\r\n/OzuyPdDJGZX86cw9z8c3plGYj/hcliTxTq9PmHXNcCptbqivLHvygC9k1LF\r\nO7Ku1UJjFvwqYsT1nAFyv5FWYdCg/wSe1UhbIb1YYX5q/xqOlKnapmDkQK8b\r\n5S8w8CnYxnYz9i2h1owBO8IkznIIfyiXzwP/+lbJ/qUTvkSr5PZZ+H1K/HS9\r\nEgl6zQ4jijOh/8Q8B/utX3u19+qkbKNlHdHEIx5jBpdBA6+/zRp44u4N8n8h\r\nFTMOeG+BuFOtrfu0tK5JQehs0Hb3kqLzZgIpvg0eUNtUXP5K3Zvxf1sdl24H\r\nxmz3N6sTJhjmrw4nl83LVvAIM3Dsi13WjWMHp/0DewfE+azeH0j14qQv/30i\r\n50Vo0f/CqDZeey+60cqAsJM+KpOISlaGeJ6Z/tUiaWkWOgSbmRbaFq7kmftx\r\nKBcimmuLz4TfUZ0lwOr0+3Rs3G2jkFxzjI8=\r\n=/7/h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpzyzw4KJGnJ6lINa+CTKCrq+uqUN4Vb9g/BbnEUJcDwIgP+tS7/juSa2TaZoS1/i8x7bp7k8rW+RyfFH2mnvVpkQ="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.151_1647091696575_0.0009686042528427308"},"_hasShrinkwrap":false},"2.4.3-beta.152":{"name":"ecsite-form-builder","version":"2.4.3-beta.152","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"31cf5544f4ae0dacb3eae3cfc9387d266e237484","_id":"ecsite-form-builder@2.4.3-beta.152","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-98j5AyF3jam69ihZKljtbmwll2FXZXioYDS+IvutCBL94Uepbj3rAsYgXcrISna3FgGHEJUquxOb9azW5GTDEg==","shasum":"73e1acaafa61576d75b118f662d86cb112940791","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.152.tgz","fileCount":110,"unpackedSize":4646605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiLKnQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmraOhAAjfI8NTTOAWfbLzBcW16a0qJhxTh5WKn8ZLO8+YcG3+W7X2Zz\r\nlD9EQlKaXsr8R2GvfF/iHpu5mupMbvChgcQdLy87AV551OPCirZ/3t7b4Qcp\r\nbJqt2qb3YJg7Jol8EWtleaZVkQtrJX5gxeC3oCNBza+s6nLYL1lUTxpNq2Kz\r\noyGFRcKsoEZDQ0aHt55afUelHPD4bTFRq7fGS7iJOqQeVhqHj0AjvC7jVP9R\r\nDG9vFSH6N+oRrPGZmeSWq7XPCp5rGc+IzKYoDMHdJdO/ytE/uzHmY35V5JAQ\r\nfZlNwcTOjkN2kIcMa+HxDmd/PvDVrK8cw0ScFYYAloY9iNES+MsMiFvbzcZ9\r\nX/+oVFWIhg8kUn8Ohgr65a8t+On7UtZbZOP9PK3AkorFwRlOtmRGDI/fHlF5\r\nE6XEW6SeOcnuqAX490wc7HGsFhMh40WNTbBE5CpkmL00g5EwgcfiQwfZyZR0\r\nYYsdUJwZABi3Ch6TXx2wqbnbyP6XTgv4Nf/bww/Zu4yQ2vVQ8hk/Lqy2QQgN\r\nF1epublc5G8gSbPTu/eCJoQ7SYDU4fez1mcwGUjCHilg7QaH7Emabg/iBEz/\r\n8kPfyDw2pt4tUk/bFXWNaH7UXudEEXeVgzFC53SXafRdlh+D4toFSRQk8upL\r\nwQsJPONJmQuWqQJ/de/zvjkr4at/kwPDEWc=\r\n=vLRU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA1moC542jSwF8nfQxbIofPRP1LvD2b4+rs7DsvN1+a/AiBUwFBoThz1m7yotA8pBNXzaAysSG78SvxHcJMW+RUEEQ=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.152_1647094224324_0.20928868643422827"},"_hasShrinkwrap":false},"2.4.3-beta.153":{"name":"ecsite-form-builder","version":"2.4.3-beta.153","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"31cf5544f4ae0dacb3eae3cfc9387d266e237484","_id":"ecsite-form-builder@2.4.3-beta.153","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-BSXqPlDIV5H5Hydj/2fQLULIM6yxuF9M0KW1Jyt96hWxgeGnncOnrjse1By6PedkTbus9K94CX8EVxekmsYSxg==","shasum":"8f5578fab7028833a431a9652ab05a861cc20d3a","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.153.tgz","fileCount":110,"unpackedSize":4646615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiLnxmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHOA/6A0VKx+tytXiiig637dzNCOlOJq7oHXBcDVZZvraEhvEPGlJH\r\ndNA9znF2WxnNOQnDBi9ObV+wbLPkYwwnj4plxtd5ZZIByTzLT+2TEp84zzpE\r\nXjrGGb6m8Fy1he5S08Q+apFTU2fzMaTVr9hxOVLXbS6HC3Kv3HKPJmPE2EgG\r\nsIzaLHCYPXSK0KH7SjMQXPI8gIyeeVqiFLGtDb80Bs3wu3qAvGx5BNrrHH+4\r\n/X9hLnvZ71CxWnmxkrHHpt9VqibjBQ1R7SKoQ+FR6BDX8Dok5U/mfJweADpb\r\n1sCWW66EiDD1rGprw2p0lk0URY8hryJA34kWXe0NxZ/3CSJp0B//MTAT5bYS\r\nHWPgM2wNH+zorIDnrKqMqOfdoEZ2LI4w+nGNS+QTIaQltCkRj/7TK72detx0\r\njhKbuYYp6csA2qqmzZudiDLINvCyqjxAbFwpkkFmM/kwFKhY5lf/XXAi6LAG\r\nlBobW9JMyeyNrRecOgzCYQ33quBzhHHJO66CgUF2XuyxO5XKNvQlwkCybzft\r\nGsAQlVK0Io833EaQfOjuPhnltJYko/A2BUDOYFBt8ZCR19PQGBhQuys/LBqI\r\nFdjrZyJKuzwBGAW+dlWxAGqS66UobjjJNlWZsJVHsgukysMCyY8jOws05ExX\r\noYWW5Ssd9lNULsB/ylvQsgkS6RyYnM8N7qU=\r\n=Pt77\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcP1bj9WJT5Cy7/eRXzS0TTq1u74kN36029xUptliHZQIgcDr+uF0lEv1VTTvU0vU/gjD7FkakEiz1CAu5EjLh09w="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.153_1647213669803_0.7294453723743783"},"_hasShrinkwrap":false},"2.4.3-beta.154":{"name":"ecsite-form-builder","version":"2.4.3-beta.154","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"31cf5544f4ae0dacb3eae3cfc9387d266e237484","_id":"ecsite-form-builder@2.4.3-beta.154","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-i2jmuujSZbN1JIy3b3FSOfWvUX00zHArCNwYWclLZ0jJxQ1vPN0u7qsCBYi+zBDi5Pug24Dsh+HuVos1M9u9pg==","shasum":"3edba3ac54197b7294db23a87a2ca598c7dc866a","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.154.tgz","fileCount":110,"unpackedSize":4646671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiLoJrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3jA//coWezIkrQ1DYh2bxabQLyXtXXi1326RjdvReaAnu/qrUePEK\r\nraZ0H5jrV/5rWzX2sJjH2FL4/cOVHcJrmbNH1Fdw+y/+UZkPOvyPR7ESCzyw\r\neRuQkQRYqbpK1bAOpwu7TVVcGhzc0l+PFAL3vwBYB0T8E/CbkrYX2eMB+Vnt\r\nZE0H1TOnPFg4DyLaYJplDOAEwTcd8bZXprtuW2Rc+h2UD03yGjMrSSMVicwD\r\nrg4LsBtN2mMCNUub8tXU+iNiiFWMGkKwFHQ9UXifIg7Pgql9C07g8ucd0lqz\r\ng5uQMxEwLkAWl7g7y9d801+7KxKwKAVpjDKtMyNnaCmxdwvXrkLY6huWahwU\r\nuFWKM7csGuBzFcbMDGNIHV7CtndkkV//a/C6jKJH0wEWqwGT3xoP02rV/xU2\r\nvqMmSQkWruBYvFCffMIit48KfHGxxti9TQ0qmXuv4SPvDCmBl0ZY8YQHCFAD\r\nvxwEOraUxc1x+LHTVD+K1YxA7vWrxdrJzpPJtu1qcer8tIEmz+trMSCgYbPm\r\npK3jfoTXhnNESXoqlkCTzIS5wIc2/8pqHSN7gHRGaeHchYErnGp2BpXKZo1b\r\nLq/bb9FM6jZIdFH1f95xk+lKCWrT0SzdQ6H3ekgEvEJMA35CWKqwQONl+MEb\r\n7AkuUTRfTHKhCI84KpEWsKd+PXwMlvroKnw=\r\n=C0/h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsFnJm640beq+bM6FsBT93iwAB+p5ecsFZVrTY+uozTwIhANUsJxAcZN42vBp+n0OXANVaQVj1ipDDsVC9k4gGMC4B"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.154_1647215211695_0.7110265547829728"},"_hasShrinkwrap":false},"2.4.3-beta.155":{"name":"ecsite-form-builder","version":"2.4.3-beta.155","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"31cf5544f4ae0dacb3eae3cfc9387d266e237484","_id":"ecsite-form-builder@2.4.3-beta.155","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-jGtkgpnEhbl69DeYcaCEHvGba3CSrHlekecUf00mWS7ZvW8V/kgYSE2203ZXbFJHoer6Q+st1wNepXqIHzVcHg==","shasum":"babc4149403b468dfd63a515f4fd6626df877361","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.155.tgz","fileCount":112,"unpackedSize":4651204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiLpCWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZog//Y89g1Yib6TcfbFcXVjTwv7eYghqd85JVWNgysDZIWOy+vLj9\r\ng8ZQujV/qDRKznnqKx+DCIa48BmOE/D+rkwChHvEYGEhw9I6/K9LK5HnkNyB\r\nbFvDJUrMVSnZrqCAgQc9+giFblNOeRLBmGRGLP4O0xTsQkaMgjrEfIcjnuL4\r\nbizzBP4uAgJl6+Lxkn6N0HxSw+7nmWgI4dWuK8b/uEbllxuDYVD4VPoExQRr\r\nB8v2aFdqK4kSbKh6H9SsqwUWEl7vIMJEiywokfrUZe5qqDVkAZHLlW+uQSbG\r\n7A8i9ToXe8dsOC66Uj2mpF8KsKo2BZZAxZn2WbWjQ1jKopZueAGaLOuoidDV\r\n4jxBHWwBkVr/8pfFwmsB2DFksmbTGRj0AT1/1uzFLwLUrMoX1otSZnJ4m2Dv\r\nzijkKi3vhrNCbda4ZtOMoSbx4aRPDdItAl6LcMTzQQ17AepdEPn+tr2eamH4\r\nXs2Dr2eGBOBOoQpCjZX0BBnN58P+Yg3w6O9VRJa09/mL0O9bkAMABbHJixCs\r\nANnu9302XT735/pEmxFcoMN+t5Y9A5DK58WI3LeQ/sA6iJLpjcZXfExKRqY7\r\njpPc2bKH/T3LVMZ3IjsTlJlOo/Qt0gvtZ8UL1q6OBQPAiC7dlpH73P7K/7qE\r\nPu9zDHe8QOmqavH9P+P9mKSPccSASoCbd3E=\r\n=UeCM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjLgZc0GgzRy45Hq+PrlKVWf4dM/xrolpWCaetGCufeAIhANQC1+ILt8veR0Z/vo8MAlU4bgMC+ceESnAgH0ikkkB7"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.155_1647218838761_0.5935257441895478"},"_hasShrinkwrap":false},"2.4.5-beta.40":{"name":"ecsite-form-builder","version":"2.4.5-beta.40","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"2562e43250da3f37a53190ab3fd74db27ddd8fce","_id":"ecsite-form-builder@2.4.5-beta.40","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-rvOa0hMfj5WZP4JSs+MlnlD1wwUfEJuIxaJAS8fsoY0imzhd5ZWwxxwqmIgmF9/pXxtY6mc5k7M3W4ogt3IThg==","shasum":"e4c608b004a846841a23a419d08a3681a086ec09","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.40.tgz","fileCount":112,"unpackedSize":4683962,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiLpiZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGLw/9GbDTfVsaAcjU7BaQHQeSWFeKCdzTTcL6qxPiRXaeqDf2Fyig\r\n0rUiqhWj/gkj0+LDDLvdlR14xAwFz5Z+yqUY6b0W3KLA3kgVmMU/rxMoHpcI\r\ncnpHzwuAMAxhUUyLz7TsUfdmXh+zwwpZfd/5cNn+GCfbEvrXDtAR1fuX64tE\r\nEkaiwv9xkRDyBBg+n1l+4B2a0LnFQqKb3YtHpOxm2s00tRAQsrgc2e4EHYX8\r\nmlHy8m+ldF2I0zttaBRLkOKsMVhMz1n05w7Fa4g1B9+H0yEFXObxwF5QK1xj\r\nrxXtaBfZatMvXR1UQs6FvUMCWkIh06TDo43Y/Urg09h7m0r0LMYL5Fw3uW4u\r\nnqVbFT7xzMok8ic40MHJD1o0Ql0/+AfiFacgnPX/ezoJ5j+nGZgS/sWlXwVj\r\nDssuNtm0kIiQLKZH8QfZG+bv4gethOJS0akX+k8virS09zIGXbp903jGpLMC\r\nZR7B7F53yjQbO6VhQJxZy3qGg/QisGrip0tNU/hP9kY9VmKKxYxFHwbQWwRk\r\n5UIDE0Ag0Fpp/fC0aB5YY+KGMDZOSrHT7xeIx7Gq7Rkys79mzzgdCpgCyYMU\r\nAjfg4rFIZDGyXCs/kbCWIeRQl7q7PohDC+mfmAjQOBeg9zMRdhvi/1G0p7OC\r\n+O+mUChrAbsv+LK42He/VreqxWpyY8HWjYU=\r\n=csEo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHKCqCbfglaDKqwFU2fIuYoVJ2t+NcQ6iN6itNNYdg28AiBiizA/0QoiTGiFUxnbYNlV6N506ofP/U9iT5OPNIgXJw=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.40_1647220889670_0.4839583875100413"},"_hasShrinkwrap":false},"2.4.5-beta.41":{"name":"ecsite-form-builder","version":"2.4.5-beta.41","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"d36c60f836707790de1d049c57063a10c262a3dd","_id":"ecsite-form-builder@2.4.5-beta.41","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Ek587MObCN4OVBSATZy5iy3LI+68rh6wubRrLNjhOu2sN58X9yxJzyprJh4BaWFyYXzBXduQC5pcWHq8yESWlQ==","shasum":"c9d61378cdb26e15a288b21908c215e7c94be6e6","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.41.tgz","fileCount":112,"unpackedSize":4684088,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiLpv4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMcA/7BA/W8uk18HdexT1JzmnN13xyMIEhyAOCrcr9RZkIgpCA6Mjm\r\nvMBSGcz2eI8QF/n2nRyxQkSffNK5rswAFIm9faBiO3jqaizKLEPEoorbLoXB\r\n6AYJ5NjhkCH69Y3xLo1H0HAxQChaaw1M4rpH+uBSyHy2kcj2i2YveHNXpKsY\r\nGm4MjHrwXEfvYdf+c4/ZUyrepARUeinrKdV1pSOG9EN9iUav5yJiKmF33kfE\r\nUYSspsA5a6gOaOf8QhtcKkMpgK2EmRZUU3tEs6MgTGcsoMfKlTfc7Hfhq6d+\r\nzZZj/Dl786yE/ZV4nNLHhMOisEyKr7uflnXqq6fNgjCK5FDjiFI2tY+AKWfj\r\nj6+4PVIDx5i+nL/P3ICoXJWN4upbHoq/ozW1bDyvf3UJC+pdLzOGzuJVBlxV\r\nQ3EO8FnNl9EFBKGS9Bv0D9gqoKYwDvwGX693c2Go1eWQhVCjok9+xu11NI7w\r\nGU0VwlNk3TQDTVf2hpspX5udwsyHmVQVXJEFcNWFPfM4nZMLgEny/IzkjZzZ\r\nMRXd/kWEXgrn8mRWH2ai/6ZlSL/ieokH1H9Rk5JjZov2Q7+j+u5PGegzUaR8\r\nBOpLsqFG3GFPgeDglC/GA+9f7BIj4ya6grCU1mZk4d/Fv/Q0P3SyroG3ytYx\r\ne+/lNJ+BFoXh9q57qcauEOFlviBO+ZaCgI8=\r\n=VTsq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKCmrySH/ig5mGJP0y91JUvdK6ujjFgKyoI7IOQQ8IewIgKuwx/5maSLNuMnHiD1IvO/A50GYekh352Jam/bWY3vI="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.41_1647221752525_0.6878189840256399"},"_hasShrinkwrap":false},"2.4.5-beta.42":{"name":"ecsite-form-builder","version":"2.4.5-beta.42","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"d36c60f836707790de1d049c57063a10c262a3dd","_id":"ecsite-form-builder@2.4.5-beta.42","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-tO5JB/I20NM2QkIqccMmg0reN1Wbt2QtDpCQzgVY2lT4otkwqKBlMveBPNUeURbrzAyhB8GfqCIRvHPHgqoOCA==","shasum":"0b6fe310f0b82ff63dbf1361456fa2a97eb3a953","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.42.tgz","fileCount":112,"unpackedSize":4714666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiLqiWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7ig/+JwPNjWJgwnTP5nayyo1yGbJ8ofvlW5bCvgZFqMs6R46huSzB\r\nDRrHFT6q4Hst/uaEAnVU5/tBdCplggJ07jB489GFeRRrsGfu3A+gCs2Dzpbi\r\n/KQyw8VUVr+ULjO0JKvAp4WoDGdYxKxOnCGx602g7ENiiyvncmJVIrIx7xyc\r\n8/uQNh2nQ5jVS+z8oNM3r8/na5NEer5b14OsaFtK/qnrAu38eWsI3Yi2+ama\r\nddD0LPKsN4OeEFxxAJv5X0YArBuZePGECLrAGZxFYSprdzmYDZXnFSwn6/1k\r\nFu5eV33RZI7P+fHnhlxWLHk8m6APcioK9OPIvlxD/eOWykz0OViA+IQUe6j6\r\nRjUET+hEwgSwMAVlGFmV6llr549MsggNNJcFW/DC6RA6ar7fgTc3b0GL4kqJ\r\nw3hvSihEwk04UvbRYe9Y2tlb/gnlx8oTPv2PQrjA/KcLNwx6pDxrWynvipCr\r\nJ2svTiurd9q899N+67ZkKZ0UWp8uBk6ycsj+/asoavcjDkVqgP+BGPvAWgFW\r\noYhxNDlZojbfHAOGybTgXqG7hGT+UC+o6CwIyJMMIlTZjq003zKQB3r+PAcm\r\nh3mZtyZrzFzh6ym/1rhwba8ujW2O+4c4NbaOhV40wtdPncUgud5NlAkr9C3O\r\nSLyOwK0nUHjxms0Fa95elvWvpFApfldtyYg=\r\n=MxIA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzEJ//5CDCRgU3kZbzdiNNCqa7E4XSUghPDT0qGR+rDQIhAMG6H2js/IGabqXdQs8FWijvyK2xUsqc3bcXmYIfLC3z"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.42_1647224982523_0.5448672038278293"},"_hasShrinkwrap":false},"2.4.5-beta.43":{"name":"ecsite-form-builder","version":"2.4.5-beta.43","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"d36c60f836707790de1d049c57063a10c262a3dd","_id":"ecsite-form-builder@2.4.5-beta.43","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-CogUArMP0PyoPfT4AVBnHch1O78N5vMIqVj0zvSzNLsmC6U1LngtESBe++fJ573kNjO4sWtrnxAOuW/O+tuH3A==","shasum":"1a2913fd009fbfdbf8c314dcd5e0677ee1188049","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.43.tgz","fileCount":112,"unpackedSize":4714668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiLquVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXnw//T4PglL1tzt70CEKrfTwZjqmjspZG/iAoutYm60OeQW8gJ1nW\r\nO/ya8UwYP/MSght1CCD+KgV3MCtG68GNbEBx0eGGvCEeeJLJsDFkZGqx+vhG\r\n6Gp5hijdXXKWc27aMMwwTTio9SDDwq92d4TGy50/xSouDyf824YeSZBNLDmP\r\nGuWbQmRxVafm5ieNnr7wcDmgDOobVdDSJ0Ys4aNw3PiBd/vD+DcIhsJ8xp+Q\r\nfAeDEpmlVK+JqUhHljdZ9oYHJhCh0UdhyqiiJViIi+LjXyfvwrb0WaXIx19C\r\niIewb03ZCDpB7/DuK5/6uN6HkBPL+a3pHgrifbPF3YCWr55e5+xpEd+bRVUy\r\nselwG+Qb4x1ycQggVbvgHl4QvMNnKBF/KXLc0MUsWY86eGbrES+XJPWneRdB\r\nSfF1MUrvkdlp7TYoexQYfqzffdEsyJ5mhv/6FRDiWz7wrvrrNMDaOM8gmEr+\r\nX4YvHWwL0Hb/E1uch1DjvBPDls76hNLL+LhwlvLay7OoPTlZE4fSOGIkLTlz\r\nUXqzaDzfRYOfLSDCnMmPREJ3nrbcwAuUrMVeAjVghWpA+fWIYemjGcLXQ90J\r\n+JBhj5PAHQL4jZGckVZR/XEG1RKypsuYCqUVfhKzlw3OfuVuUcIcUGjM2k94\r\nL/fOErucCmIalXcXBDnBlKfWQSrDYop3FYE=\r\n=YoGi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICK0vYqJLi8t+Ngyj+tX0rqyHs3PrCtZ3Sf+m/u+C+noAiASGOnpcaOgZt7+Ibp9B64SYougNoircdhadpJCmT/aLg=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.43_1647225748772_0.04857890566392076"},"_hasShrinkwrap":false},"2.4.5-beta.44":{"name":"ecsite-form-builder","version":"2.4.5-beta.44","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"d32b04c39f5e728349489acf81745bb4dd45323e","_id":"ecsite-form-builder@2.4.5-beta.44","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-OGobbQL1hDb0am/XOYld32+tG++D1EcvynBVSkXC/gUYayr6+zc8URGwOsgQ2ZMC9cpN6733nH8cWrludl5iTQ==","shasum":"e34f6c16590c0defe3ba6b26a1adadea0c17f5bd","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.44.tgz","fileCount":114,"unpackedSize":4713198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiLz7pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXqg//blB4V3XSN4k8cVkGlZbS0F+D6gRm+KiEEamnLZpu6w03xdw0\r\nNT7js1ROrTHJkfYW0vLGnHZGZPJZJSEIYDWJya6MLJscrdcamUhsPk+TvcU4\r\nbuSqImdQh03PxpWnlFDa7IKdNIxDMv3aW/4WF6lANXu0BwMEmV8srOuvBN7L\r\npgdiP9uKPgYdigUoyyNDr6F6kDieFXcLlkCaJRd3tYruHNccbDvQZ80FhGkq\r\nMqOVR/XvWLt5LS1/0NiH2m0AoUP3GLbKmX6nQDM2Bll1Sg1sO0Pn0h+T80l2\r\nRWVHPZoBxpEvCfIpGFN/t/lkn4CKuaPLOQ1OkWx8Lx9dU2Q1rhJQMKTpCpDM\r\nkJvJ7b5XIm+k1tSorOwXgUq56oaECw47hYi/EmksOegTnsxpMOtKyT5OeM+q\r\n64R6uMCFu4BpggHtxdi1yxlc4AHzJ9iNT3jmK8Onelqn9LNTtwrxcDNYpMhK\r\niPhxTJVT4HiePtxoV5PvDymlHn2d+FAU94tD/kI1G/rvSY2CLDTbB3TQHz27\r\nsTV8tp43iqnYxXqOIEYSM64zFrAxfnugVMDyQl10Fh4REKURS+6GcwHTEqUB\r\nfIcqpXHNzLpRElhWhpYgs+apq9EFLBAduikyRS5chZ1mCOVHhbbmXRDnbcnI\r\nwc3pvHBiwV+5ugP2AoLmsuzSrnChgkGAK8M=\r\n=Rz8+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHQUm4y2Lp6Y3AgXoDrzr/strhRVHzA6BwOqUcX54bGTAiEA41ypbtHNw6xv313AuWpauSDXHK/KHvRB+et5yjV16xA="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.44_1647263465216_0.9711103812811139"},"_hasShrinkwrap":false},"2.4.5-beta.45":{"name":"ecsite-form-builder","version":"2.4.5-beta.45","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"73e198f20eb6509be35af0f56eb6bf50db77ba74","_id":"ecsite-form-builder@2.4.5-beta.45","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-5Cj7ot2wtgcg4udza4wVo5ZFu6vosbY4vziibw3VbzuYrn6hyprkT8TMpN/uCYYoa7TFYlsO4yshojMx9gU7uQ==","shasum":"c804ead6f0c68ba50696516c108e43f34398a920","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.45.tgz","fileCount":112,"unpackedSize":4714944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMCw7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvDxAAl+4IkZ16Bv0wMI/238/2FXfwF30Gvf+p/nQmaYsz3sMBLbgp\r\nIfT4dDhi60HQGyNWsjr2+DgfUSb+1YnDryDq+yVtrj5JS3XAmzSpSg3sx4RU\r\nnW+qqSEyccjCWZYtx2C/IXmwl8ZqpqKCUAE3wSY43QvxPYsmOz8JOH+VzjJ/\r\nzjfdmhl6cfV+yY69yez6uwBXAadKJGyR3vxJbm+wniqNSXC/dJgWqDrUMWNC\r\npcz/qISEyaCE0BexiQ7TC7CidXOyfq7zWCp9YMN+PLg9isy8H3h0VfofikMq\r\n8Y1BNkyyS2yfg6MLDi9LkUUv+5EIuJKT/Utuw9RHIGtdo2VKirK6kRuWA0vy\r\nPkuirENecA2+F+ERNQLlLV33XRG6wqCU9g62Z7juaHVaoXdeuHxVTs+6qvUq\r\nrE2xdC9ON+Y4u4pJKBQv6FP8+1zYah2TqViP2Gg5TRLMfzGmcRcjHXztSeJG\r\n+PSS8DlTg/v0nclYUxDfGyHZ6K+GieQFKVI0zLyK1FxL8PUSu5soISGpwGy2\r\n96SOM9zqaWeHciteV302vl1/vYbnaGlDaMQpx/AqNT/KFGdZ1I0O0orswMcy\r\n2ifPtl6kReXUABKIff/qIriWqyJ8+rO9CqD+1ta7X3PvaoYjb17lOWCwS0qU\r\nf+tEdsQCbdrl7dHOApgAEJxE8sOAiermCfI=\r\n=o38T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICioW6ko0f8SaYQX5+kO4f39vMybo13xuP5TXXdCD3hPAiApCH0CRRKk9qt5N17P0r8MBMFswFeaStXmiCOJN2ii5g=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.45_1647324218803_0.15264287268620302"},"_hasShrinkwrap":false},"2.4.5-beta.46":{"name":"ecsite-form-builder","version":"2.4.5-beta.46","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"3645d252b82678ba057eec550a7583517074b714","_id":"ecsite-form-builder@2.4.5-beta.46","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-VB1XERK4um53x++sTmyxrakZvRXlSGfUXS0vU9OjpM55AjAF9fEK3Q/smihlEZDm1RJXK4+EPjUsB+rMixIt3g==","shasum":"cfa6c9ffccc89a4e836269b42e44ec7fd95b30a8","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.46.tgz","fileCount":114,"unpackedSize":4683411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMFDQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrsEQ//co+mWkfaghtTyIw4HHuxP2BrNv0K9L98BNsXCwU31c3mBeTJ\r\nHHvtAQVaHNn9CJz2R/5A4DXD1fLgpOuPlV+61xL3iAcqF65Qp+syvGkwhV7D\r\nyvngX7i+gBC1ysBru3los3EqLv8w2Nivn1lpur6vQM7Z3rjeTaYE2os/oc4v\r\nHEslZ0jODC1cDJWPhl470BVP5iiP1vFUfDleHdX/dx0ARXO9xQixbfbP63yi\r\nRfNbsXHG474Xdz/YuQZOF0GNLglDFeqUoR1UTL1lVuwCjbtibGT8Em9wojfy\r\ngCR2wSfZinQ9AedZmYci8VgHmBLuUQMlOAZ9FTkBLUDqlgTh26a6e7RaX8iQ\r\n3OrZZG0Xyn6xdmB0nutZSgkAvYk1/l0tjVVBMpFMl1Bkle6Uf3seCjKqAhFc\r\nQUy7IiFcWUZw/CLEHFj7Zz7/ffLg51+QrcZUT4eMFMr8g2odW8RVfh2TAn7H\r\nGWvfhT2q0cWEG/4Xc36ATVKLtESkp+nBRxkrmstHyk/P1UviiHeGMS8NcpBA\r\nP/TjRZMIMksE7f5VpJnxodplvu4EPHv5JOp4G2uL9nAbn1JElr73Dw7UU1Hc\r\nJccppNoU5DI8eWu4mO+uWY8LsaXFaJ/woMV4JRi56XMsX5CKSC3tJahvkP3+\r\n/HSeCYzaK2P3ArA7zDtEsJ29NByTI4XzXQM=\r\n=Znmm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDT1neXN1bnwKpMgxOua3R7XkQCa+zgF9INvbjkI8PviQIhAPS2kXg8JQHh5PjkKoSGE9eOQjMXnjxVRNScmjRx9CTs"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.46_1647333584278_0.7553394027763705"},"_hasShrinkwrap":false},"2.4.5-beta.47":{"name":"ecsite-form-builder","version":"2.4.5-beta.47","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"3645d252b82678ba057eec550a7583517074b714","_id":"ecsite-form-builder@2.4.5-beta.47","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-tJ7/9hiyovzh4dul58FAQ6AsDDPqeKjbosUlr9H6dLW3B0B/iFncBmjEUTN/5K58popqWN58dZu8dU8mbvdPxw==","shasum":"3bf3f2f807e930f6e642ab275e796379efa96baa","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.47.tgz","fileCount":114,"unpackedSize":4684500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMF2TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6nQ/9G/sMmsYt82ROY1KlSH6M+yJtFxVpYei+KZqzEBErngVhRpb4\r\nGM8SNa+1WdesTTf+kUSTXJfQliNgdTm28Kg/Lae/h2zoK5/+bEle42Tq+4Vk\r\n9xE6/qRAUf1afzahwMHuxtvi0Mo4PkJcXdpqSSDrOYZvmwV/huiXxEG8WeQD\r\n0lSE/SetwyeOXRwU8e9OsZJsgbncdfc1WFjR/s4mVpcpUrtfHlsrhLEp48JS\r\n/35gxeHC0atGeVErxoGHG6jQnDwuQmYfEpGkocaM+X63jl3rF3d7MS69T/QT\r\nljt2vpygzLPqKVddvZyDbWtvt/DqcGCXdxg0hGU5AR5VFdZ3EjBDudL5mO62\r\n2T1ANR/F2bK8TGtMTkvfsqnp63+a+IPPFEVj58z2nb70KIY8bXHjUiVHkARe\r\nXO7rHMFm7r2jbc4Px5bW/gGxOngE1GP6rx2+VN0HaISwpwN8RTTYuwgHv50D\r\n/KVXQAnDCQfWbRQhSukB4AneOqRlsN1hsGQWxRf1bKjlnUXUja7hd+rHnpje\r\n/IeubAs2eGYzQis9zunTMNpUwo5pnv67O3YuremEzfmBxwTn4RNIel0pWcnd\r\nM3BSiZuoExG00NQSJrSp6HwDe9e7rBwXcNpF9aU4zRhnbcPFAGIm6FnWm1dg\r\nZfCRT4lG8hUXb11rvp3kaCCcd34fnVqtsII=\r\n=glm5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClUreLxs67cED3I6BhXQ1sXh9AfhBcM9r8o/LgqlyjHwIhAOweshCoe0RqprKxGAi2tt++Osh2NQ+2sYZx9Oflz6J4"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.47_1647336851036_0.8585020659957654"},"_hasShrinkwrap":false},"2.4.5-beta.48":{"name":"ecsite-form-builder","version":"2.4.5-beta.48","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"10d5068f91fb5400302c3620046980d4226b874a","_id":"ecsite-form-builder@2.4.5-beta.48","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-SLVcrsVziYhkfDJJs365z9ZrEHIBgOrIVPJkExjvRlLBM9CETFrgGtKKXQ0WyP5lCE0ygo8NQ80ob5mwlNoOGw==","shasum":"7061ea7b05c80850c5ed6a886d48685af944ea6b","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.48.tgz","fileCount":112,"unpackedSize":4714944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMGGCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrS4BAAiIvKuqphhdipliExjsHEQCtfrqDb5YVMtijmxwRZkDE8B3vO\r\n/AF27s7ALJOOugq80Tg68X/YrOeykApPvgteG253Ow6Sc5B3orpRi7ZrT4NB\r\n9mxBiMplClwF6IGmFNkd0ebCuQVRf+W0lOdUmEDY+q7/2ZhOcw/GXVyHmT9m\r\n4kqrY2/Ip3t2qpHSZsTu2QxFUZXiZx4o2L0CDNdFVnOSUCWofUBrI7xn8liR\r\nJe+OObIRbZgotMGTja5Uamt3DzB1pGAc4P3dTm3vhkWnP/8FOmbXI03iOisa\r\nSd5JWsx1hBwsJ9zhHZAXJhiLaC9kALJf8IlXBPWER8V72UgJ/tAN4Nj0ZYX1\r\nyCeXsd7yLiAbOS/PE/h9A3SQ+epXuvW2+aXpj6pgG+LZAWH7CMnINf5Vlwqk\r\n60sa32nB1cGkZ2w/L+onje8O41OuetWjmGYDwe1AsvH+UfNnt1JlJfvBnfWQ\r\n/yTfQxFtbJnKh50OxuViVtwq9vHvQU9Spi2K+G48KiTdLMtypI/5yBFKEDc0\r\nNFvsWbV8ggvO6Fkc0Qe3g9ybqYO8d7sb1yTgIm73L4MxTCq2l+Q7j6xBSzoX\r\n+sbJBeIl4Srgt0Mp1I+AmsOJYuZGyWIdPhABUlWmTT3yJs8VhIDOpVLFvgwe\r\n5bBmyl75/pQYYpyX+9Gkc6f/bUQi6eSyBvk=\r\n=GT7s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICNBppGAvDX/8Y/9kqAiQiApLCmO2QLCTXk3c0NzBSxNAiA84W3HxCe58NvVZ1ODiopQGHCWCKX/Sc8fogQZnNws2g=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.48_1647337858426_0.24617137454494165"},"_hasShrinkwrap":false},"2.4.5-beta.49":{"name":"ecsite-form-builder","version":"2.4.5-beta.49","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"3645d252b82678ba057eec550a7583517074b714","_id":"ecsite-form-builder@2.4.5-beta.49","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-wZCBgzpnnLU65p7ZP1El2ppc/zKcJw0VR3C4HA+H3HQI9E+FVM7I8268UoBMLjZ9XPcDhX7xaIemCGkWVX98jQ==","shasum":"adb4632d7f9d32f3ada40f09724f461f1ce9db80","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.49.tgz","fileCount":114,"unpackedSize":4684889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMLjKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOjA/9HL6jpvRWMoo5jTZD1q0sflnBt5mnamZb/UXroXDV75wCBH3H\r\n/VCx2lKv8DEGEOxkAzSI6S1kI6O8Wylu3RNNi7zJejp3bdJq801YjhTV8zG/\r\nLa1u1IBE0gNtzMEirQhv6en+EcWJImYscHi1db+a42jLc/JkYFDgIh5wnDSd\r\n396H+36pnnVMpGia1g+T3NS8vRECOu6S4OT0jVnovdiIZFzQp2Gu2RX30ZxW\r\nOhQx4vhhJWlny4TIutEvAKgZ0H+W2K/VKMUCdyuHydVhZI3kdaVYQr1p1lq0\r\n77+JUVu+5tBT37gzzULOBtqrOKk+aWdscpkZLjVqgVXWIO8t/mylrUQXSz/m\r\nkIF3HYeDxWdM9wyUaD/UYyZbrVpBgxEqKx5u75M4pzh00geHAQO1fNuxE3Sy\r\nl3niHqNee8+/yUR9E5feNgIR4MpSh0WE0EerDvUomQdhKJ8mIcRThx9HAKgb\r\nV9denWo2l055K4rGgxQurYiZCaWc3DJwYw6gaNIsVlUCY07YbzPWX2LcukbN\r\nogR9QqBbpbUKi+8tRGITKHXMS8fMtd0VIneE/AVAw0xss5cYEsNwJxLYo+3h\r\nO7SwYFtOLqV0P6alubJZOjCyiY5hBfSqQkEOKAijc1dzqRbhEjWXp7P+SgSJ\r\nniwT8Dtjzp1UTx9Wubx0qScF+WtXaIC8NZk=\r\n=S+at\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCKPkO1o3isCPc268TpokyyXZiycuFaMRLFK5GgsL3LVgIhAPIzoL+/rDzKcm/i9RpRHXlw3lEb3G5aztzUhuCb2wuf"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.49_1647360202586_0.20726408769369953"},"_hasShrinkwrap":false},"2.4.5-beta.50":{"name":"ecsite-form-builder","version":"2.4.5-beta.50","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"3645d252b82678ba057eec550a7583517074b714","_id":"ecsite-form-builder@2.4.5-beta.50","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-er2+pGD5c6Xa+Rz0Z0jSGJ219/WrQcHGdosNl/W+W3c4LrPojR6vFjqzLDJLFeReeWPJaPGwKKb/abq6bh15AQ==","shasum":"8b4d8e1b6a15e95d67a51c0c15bd77ca18b8b879","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.50.tgz","fileCount":114,"unpackedSize":4684966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiML6vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqW/g/+KbQb8PG+eTx3eQg403T5A0a72uYQqBMfM27DQz8QSLhHxQmF\r\nmZQml0PpoCiggHikF60KE0End2Fe4Q0cJqemcw5m5SzapYb3oQSqB49nSfJb\r\n5kpDNrzkF+YwShUQ/s2HD5i2lcdDfCVjoWEXUYpcBHwEguHX1tJQsn8mBp5L\r\n7khwNdh2q3k8UqrQuFF7qmBXd3rVdxg7JMzldAO8lrU0oX/++4vu/X4lElpx\r\n/0qLYRN7J396Ff/eNc6B+XjL6FbcTXjyZXsiYFqm5NlsDi7phJV19ALhzKu1\r\n+jEJBSYZhgnxIzhm8LEn1iIZexMbuYAZo4JBTcd+sl1YnxAM0xP/WtLiJldR\r\nxxMg8jGgYM9kAINJfrc2m9tyFp7r4ElIckmFcGsdrb4A7JZlNzy2a/4+X/vs\r\nwpxXOTQhBpEIz2NS0oiHZ3LbsfKQrgFnoEOB3EWh6rQDQaPnSQqEwIYLe4y0\r\nmo3Vm4q7Km2PpnVBa7jnPOOlIGgvCIwnDhcNoKcc6GLmuRiSldbXs+c0duBO\r\nxEbpL47sXlP1FoP8EcFKvaBh8iBZg39OSLp4U3SHNGGzPejz4SKfTHf7YVuq\r\nOo2CnPE+xLWgtEUm/WFcrwkcrETvA7w0VEAKidfM6NrZpKLeWA/mMV43KidA\r\nCXUVh4Mku0EXuW22CkRC2xEsVxxDDPs4DpA=\r\n=WmQy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1Jx9cjEQFYuhdgpdlOrt01B/FS6upGQIwk957qiCgWAIhAIBTemMdvyTp6wICOoZRVDdcELc9EhCYa9q5nLvGHE0X"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.50_1647361710940_0.5825492314629983"},"_hasShrinkwrap":false},"2.4.5-beta.51":{"name":"ecsite-form-builder","version":"2.4.5-beta.51","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"3645d252b82678ba057eec550a7583517074b714","_id":"ecsite-form-builder@2.4.5-beta.51","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-pHfIgfpnR1cM1x+zqXAFxrp+E2EQ1okrnuuLtkuhKy/OWFIdP3YYxaX0I7pZAq3AM/vsBcEtK3FFuQi5V2p2DA==","shasum":"5a4209c3f219f6971f0bfb2ce511708dd5888d12","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.51.tgz","fileCount":114,"unpackedSize":4685007,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMMGsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5Gg/+LHvp6KtV8KO6vmFAv3D6TyVqtjSnAlbo+pT6Aj7u3xdtAKNm\r\nBSwxxmIFTyCLYostGNZDXfBYuycI0LePTaYpMAAI4kxe8ByIaK21Yt/5viKp\r\n5ncj9qaSRusBVNPZSy5Vo6mWbKxMPHaU8syrAyLI7VZGdRw9SgURvuToD+/n\r\n+a0eeU2L2RVplN5swV5nWXCsURWzKEBKcccblAzSPjvgzi/ga4MO1s2UVIjH\r\nK/cwFkNHiXv+p/6EP/caBBmi0ZZBSiZGS0h3mZhMyyUiIl2BzLO6gATgHlCq\r\ncDrtj7yJWZ1fPyfmd1FSJvRjRAwSLs989XOTwsiJaDu1pJ/fTxw1QGMpjrtW\r\nF7nOcWDZE0fNcpGqCSDRHCZDpaUXIsP3FZ+rKGMF1xM5+3MYKv5NsRMtupu0\r\ndZWo+S7ZT/J6N/lJnqT2UI0mC5GqQhei15NFn/gaCtikRrcXwL7p70K8MmVg\r\n5uoUo8EA2669HEVv4ZSLa+471gI6K4bVAZ7LO9vNB2YLdhK6bGIb9iJH39ef\r\nh5vuDnx8XTTRTXYjqsg29Gplnr/NdTPqpfaFThE8j6PDTp8ClGs5a2lgfDtZ\r\nsl/BDgEpBEimy9dxqKJi93+nBEJVZHsH972XA9n9sgJSgeBIccHGFoh+7RMb\r\nxFCk5tlJrimF1xyHsSU+AtUba9Jr5aXGc4E=\r\n=lbcI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDSXvRlb4dDeCN54AUe/KmhpzfCbuh7u6h6ANS0mT50iAiAQ4SjRbZV+uQDtyqWVW4+VYllQkonQKkcfleOFs5X8MA=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.51_1647362476440_0.7801188449860477"},"_hasShrinkwrap":false},"2.4.5-beta.52":{"name":"ecsite-form-builder","version":"2.4.5-beta.52","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"3645d252b82678ba057eec550a7583517074b714","_id":"ecsite-form-builder@2.4.5-beta.52","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-qGyd7YO/wJ6CKkKlT0vpK/2g6MAeE3nUKkHD16qDrKfsHhGC9Dy8UUdLs+sKg1MgclGhxNLKz22jh2/ALWt/WA==","shasum":"aeccc15fa94708e96f01faab446e3f62b8fe6be9","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.52.tgz","fileCount":114,"unpackedSize":4685031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMZWIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEgA//dDZwLNMpqZl4LZNdxk4h973e216JtvaEkalQUGt93ofqx8dD\r\nopajd5ZoIP1rxcP1dL6KZggZvJkx9jG91ijPZGczRFK8yMnaTFQI9UxJNtu+\r\n8uqmjDMMXKjyHcvhHhjDEZfD0khQFuVTTpy8k7VNvdaicI4i+EV7Zheovb5K\r\njKageLpO2gmD28B7xT+6zEitc/ES+GhoRy2Y7SVdmp91ad8xK0VwV+tKv1sZ\r\nDKqYngssPa7m5LecYV5KZhyzIv/rIWmT28YSvWn1OuYDuz7NRaMars+eqnks\r\n6NhAwXrsc8Hmi138iq7SPCrrYj6N8WouM5/J1iXcU8F+9FaIUaP6T6QIBEOx\r\noeswbPt00mSog+YolxAJiRNw7Ml49Xr7v+Nf38sWuNAUQXkLzea3SZpRAkgZ\r\nin+A8nAxGAarPIDYcYDPyQTCvOWbUmNGFoxXUOlho8qj5k35wnscxYRvHMfe\r\n4TymCBwg6A9XjNKVMEao2nTK7Oj9/BC0k6fgy8yk8KmoG88zprr2Ul0WNMMW\r\nk5sIsHJ1WHH6QqgfzzczXdev4Tc5iVaeF+CEijH47L0ctnPfSL5Q2SbO3S8b\r\nhsf28+oXD23CVFBm2dF1xneVh5bv7+T3zfiUsWfE2ITIJrT5IG9xeg1kcHlc\r\nHbB+AdkSXbMoBCBJDYKQtUtwtNhx2UbF1yE=\r\n=W7rR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB/23JL3So1eWpsEzaLBUbXNPsqq4W0Dn0O1xEMrE4W8AiAuxh8sDWMHuhCuQSRVwRqgf4QTrpZRHBFr1mBVyH4JbA=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.52_1647416712181_0.13832466360699036"},"_hasShrinkwrap":false},"2.4.5-beta.53":{"name":"ecsite-form-builder","version":"2.4.5-beta.53","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"3645d252b82678ba057eec550a7583517074b714","_id":"ecsite-form-builder@2.4.5-beta.53","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-kE5PieTA+160vE+yQt12fhbpzhLhxxyPkf7AZIdwVlP7y+lzsJY8rsPhj+P+o1ozanVcKm9p3nV2L+Bnp9kRCQ==","shasum":"b715c85a2761b28545f1dc37ef6bd6187198edc6","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.53.tgz","fileCount":114,"unpackedSize":4685077,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMZwwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRnA//ZdBmn3Bi6Q1X3BduS122/xrLp6hePzXeZhl9xMHHAuUv1TGm\r\nOA2AQs66p8ht14F+5VBFTXaM6D7y64zsrkGph+pBm3EhuquY8Nr8wq5wcoar\r\nJGjMno4+k7DFoKY4+rXgOp1WHWvWz54aWIKxcFOeUCX4yJCcvVUQSs+qcQg9\r\ne5/9Hh7tQ/X+azD7ISaWH9PoyZOdpUfLCHtWc15HBAbtKMN/cUB0V2y4uYvs\r\nP9kTQGNYYQPoGqIBVJgTucCqhnfuLug267QSa1oZDHjVPi9BKcN8nlMZdEN6\r\n+p5Y2KqqsWgF/JKr/G0NyUmK8NYVzQ4Z2R/YnxGlnwBFC0ImEkYhgJdJG0uY\r\n2JcqAyDN8LFf0JyzzoiXVOsKKMCFljOWhVpvedaeVp6P1M+7a6zxj1TLBtJ6\r\n3oc0EnR8VILozzVynsj9pfvUlLMWm6xhf4G67SqCDRxCJ75o1hGfuB/Bszlt\r\nPFdUlQLvuop384as16vfBm47dXxT8ylesFqhpfLm6sXQFE99sawL8SKRM0PE\r\nNHyJbDO7fDDWqHZA/D+NQukVOX0o5Ja+MW0IPWQJae8u8Hvxsw3RFUsNQfwV\r\n/SKXgM5sweMonfK0FmiINJ0zczmHwiduGSBk3iX3mCFTz5b5fylR1hd/+env\r\nmdSoW3cOPVfv4IdmYUlLxwouHg0u+7VZ40U=\r\n=I2I9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC57mUHgqBhbCDc+v+6U0UOeLpPa3abN15hnBlIcTGY3AIgUaS522NycU1b5UluKkd0kxN+2MzZcQSNLfbwbhuTxJE="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.53_1647418416334_0.43458318396686635"},"_hasShrinkwrap":false},"2.4.5-beta.54":{"name":"ecsite-form-builder","version":"2.4.5-beta.54","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"3645d252b82678ba057eec550a7583517074b714","_id":"ecsite-form-builder@2.4.5-beta.54","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-IU8g9neemrHWQZo7p+zGstwE2v7aq+qpViMTK6+cQUnVJBaiRJSHatl7aAqydmjZMyD18c3/WcH3kPUN9bZsHg==","shasum":"760ea122e9821755f32eaf2f65d7e3c401fa1e9d","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.54.tgz","fileCount":114,"unpackedSize":4685025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMaCSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpm5A/+MckzLOsTgjt+lAgP6t32Xeh0MTNhEplkI2Lsd33NmNqczrUq\r\nXzGTuQSSdRzJOSXxmfeH9p+/sOpc7Z3g5JizWu6EhBZtRhNe/dxhQkDA4MgU\r\nmXqNnSKb5QVqOrOOlNvNdZTXTyJW0DQLcOB9hG2s//ni+w4pmVqCJ2XKvdPs\r\nzpbOR57JlIUqLh9GrQjaWYCnBZeDpEyMe0SvF1LZHCryk8xxBbdC5ZDKI/jE\r\nCzNBLKpZ5nMNPZpy35ss0zQG2JAajLJ3ZwJvOb4pSUbFM5hgjq3ocNR4raEN\r\nwPdmP7oXoE6101fKj2RYOHLuYS1CIG69HdKUNhx73zCbuAvLAYX+B/+pc6k8\r\nXPmUmGMR7Bg257tdY0EA+evcNb/UoW4LEyte9ZQkhyZznBjJcF5i8WEDQitE\r\nhoXikOxNHnM0Un+JuLdiwcNJAn4islAhv9QDIUnDi8Ln/TH49K6Q0UHd6oQ5\r\nswJDKejN86LsxBncbYnilCbPlvkFv3y0QaSf95yaLKLkqMaAqY3eskY+Tw9y\r\nwUUfFNIbUUEgVlqLNjEcr9XTZEYrJKvJeQ4fIvP5gjQ93ftAbsfJOhJGbPfj\r\n/LOU8noo7lFYrPZaYRPSN83xwOsfJqUx3PjX947cMJPdCDpTuamGTaPLtKLX\r\nKy6zj8M7+l7YbitSsyYfcHm7e/7iE6dYbrc=\r\n=jZlJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbzeCWCNiIwbYNkj1ClVv2onUftvg5UsYEdqc6iP9L4gIgQGVY7kl0CWisKd2q8V2Uh3+aw78CvaFD+BRGN2KqcbQ="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.54_1647419538294_0.444801864216815"},"_hasShrinkwrap":false},"2.4.5-beta.55":{"name":"ecsite-form-builder","version":"2.4.5-beta.55","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","@react-google-maps/api":"^2.2.0","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"3645d252b82678ba057eec550a7583517074b714","_id":"ecsite-form-builder@2.4.5-beta.55","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-SO9NH2UC0F/LNoV8r/bi50sB+e07oETkUFdVfRJwZgNW9xTyPQARkScF4q3SamGyGsGvejgG3sd3IylaGGDCKQ==","shasum":"7726bc9cef291e367ffef83fb9103daa5b8b418b","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.55.tgz","fileCount":114,"unpackedSize":4685351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMaj7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqkNhAAn95BrMv+bXmkWDlSs4woFbS+MGLbzSHnTQ3KsXmuO83oD8wx\r\nBXxkjanP4KzB6KaKAMb1mq4NJKIpojQ5BgWbng61XzN1fQkvjsnZIr8zuYvS\r\njJBHaDMM/Cp1K1OT8kaLkVivy0dWGzMhauiIYrqq4VidTKHIUm+UzKhNeQAd\r\nItUEZxxyLIweSaOhzybYD7Bmo91Gqnx2+ml4Y2dMTtvMEMq5ltJp2Ae+QikU\r\n7cYjNIRIgSB4VWA7A2yagN6+M4XQiOsV26XIog4TtVDHPuiCmsDbZp8ubtHO\r\n1arkh8YeHN8PEZNGupMijL2TYVGnT7LuC7eARuA9AYFzHeXtcc5fCvF+VIpy\r\nwUILx/w1kNSUHynrqGnDKS+TG9s9E6zjkJPI3jINPspjQS7WrK7PD6qtDD7S\r\n6vAlDbPrma18PtDZRUMU5drCHcx7So4vahZy2LhEtE/htKMeTEBrGC90w+pf\r\nYq5SQQzQatovWcApZHma+H+tDlJWF587yg4X9oglUwbD4lmrYYpqBSUQ3YjS\r\nPtcQIQwYJZC5nFrSePXZbgELvGRYUHsQdNL5n35ZEr5lpaiGl3yJA9pxpdKj\r\nnXcqSiCbiNMoLclMEu0NryF4it44rt1m15XgBNvYNF+MBYWCVYjmFcbLrwoW\r\n8hgKhvv7RUVtuGPG8Ccrw0wWf3j139B087I=\r\n=q9Dh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGFZ7uBLMlfAEi+ktaJ9wGviKmh2w6XLsvoQSzYIciodAiEAp3NwAAo0ECkTmi8yipW/Y65Gn3l4Hc6YBYWx5jPNV+E="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.55_1647421690863_0.22618806150304094"},"_hasShrinkwrap":false},"2.4.5-beta.56":{"name":"ecsite-form-builder","version":"2.4.5-beta.56","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"61ff788efe8bbcc80473ec6e1bb335e4fbf42dd4","_id":"ecsite-form-builder@2.4.5-beta.56","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-pf+Df79Zts0jhwctSkwjfuCMVMgLIace56Wb00COyon0X+sy3knRMyh/NkEse3GS3vYss/sATmOq+AI05Pq2bA==","shasum":"dd72ca829877dfd51ac1f3940a99d51afaac507a","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.56.tgz","fileCount":114,"unpackedSize":4720420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMd7HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBVhAAo+c6EMpavMiZUNs4Y2k/n6xUuJGIeyQod7uYSCx4PwnIrF96\r\nRWADNNrfU7ZzwZwwik7dUzKpqRVjQwbcKkhBqTlGr6nC8bpPCDVIRk0CFKRx\r\ngcNqIdVb+7xbzxFVx5m8DoNwBUmniDQZ5GKNNGqJn/t+MnYI2DxXnSof9LPd\r\nmwidBoLJ1A7jCcJB+WUeRmNMquwoMOt8ZGvJlrRPAf1OResKol5LD+P8++vP\r\n6M50y5XbHVYGNGJ2mgeh6fgppZ2DPZk+PhoE/2UIUiSbjyXNSH8WLAVfDAR0\r\nRPjZejx0du5OPxIH+2vSJd9dz5JuotsHO00P+ThuhRRYo/X8nqImDoLMrgbT\r\n8H1CAiaTbrDaL2ZgvYGsMbc1GDsxl66bAydyAkeZ/M7yT3bALLLWUdDfBc7Q\r\nXzXHvXOiEBcbsD2K8HUbaT2cIEld6ChgBO6ymFBlJcWpai6Mb5gyoiwOqkwh\r\nj62l4jTBPe0Y7nhNhDIuITcclXtQV9prNXRWE+iEH6LqvAwAdgb9O1K+R5qr\r\nFRckURbqAyRFsYbqYXe8RR7BEED8RwS7Z7Wg7LzuvE1dMQDSxmz86lTc1Yt7\r\nE5daI/ESSla4YTeo0fn071YNhAYMBhJ5lWAOW7UO8Da/xMcoQJolRohrzgHO\r\nHJSseCc05Q/x9PhstParV+T9QbX28OW4sDA=\r\n=VvDk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDL5kV34n2BgKzTYb2TW8Zso8vvbp8niNN8IytDxEBoOAiEA3AYlJWu2ftVcln9Yq9xdP7Cnbop04xrypqKS4vsM/LM="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.56_1647435463214_0.7855434133497428"},"_hasShrinkwrap":false},"2.4.5-beta.57":{"name":"ecsite-form-builder","version":"2.4.5-beta.57","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"2fdfd97dcc456d7bd8695fdfe2be05f87b5ea7d9","_id":"ecsite-form-builder@2.4.5-beta.57","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-MA032Q+h0J0d4OMBlIVc3OqDpj5po89Mfz/Njzho/ZNbQzptJj/vbsGIFnGlRilBLeXZczQ4Z4UQ0Sam4qqCzw==","shasum":"5b13e253d9bd26427aebc538e88ee2ca99fac1d0","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.57.tgz","fileCount":113,"unpackedSize":4670625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMxWDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5vw/+MW2mKHtLjrQaJxbA6xxktcagxnTdNYmEAD8s5zXvYsbd3nWV\r\nS7yczkVvNxZniNLrYVmxDjbZhb+c9zgiOxdQ3/KPGo2iGNLZlNF8dGI7y6r+\r\nI7LNU5Zhsz59yXonB78Rac0EqrZy2wSH+sSsM/Le8GhRhiU09awJiaNZVhGj\r\n2cokkExFov3LS6/R179FgoE8/4mXSLtY3DZE72ZBJgpuIjlsuj0pBR1LqJ22\r\ntbUz39nHieiinonPweuTpXz5LxGQ8Axzx/XLBbH9lOz7XViG24kxhqnc7nXM\r\nl1x+EfJ7NlXD2+Dg8FVwX2fJIlJCvPTvP7Ky4w9MR7sQObm0XBHcHAxEdVWv\r\ny+7baCsfYV1Tz5ZG7YHDujy33U0hw1jr3/kLwkcXuW61teGJQswO4E4CqG3T\r\nNtOomyMAnYBKWABdu+jpWsC+Lb2hBpe9Cg5itYJHIolndjWmqSwdmrb61ltj\r\n3VWzXNsPDJR6h3IrIlkZqneSr2EVlYMRwhBKKk/8s0B9mZxEVlFQEgLpaMwe\r\nym+5owBwc/ww5OMa3uoBVi3Gyd7nF4/2qHMDl9BZ47gxdkKq1Ky127T6elXZ\r\n2m16/EkesWIkrq28bAMeByYlXy3coHXnHnxu4/owQoNXbsBnlg3HxgexJ6nO\r\ng3rSatZTq7pL/IjUW3Oz4tpUUzvGZR7k2Yw=\r\n=Q8qq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLLVHITgYzdEMC5JH07piyR8pPyIZ2LNu0neJbni3CPQIhAK5vSNw7vjAKYVXSoWmJJU5GqWGlsjI39LQGr1b132KD"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.57_1647515011377_0.49841304268798314"},"_hasShrinkwrap":false},"2.4.5-beta.58":{"name":"ecsite-form-builder","version":"2.4.5-beta.58","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"261478f99ac7d7ac3b1f04ab9c6698666c50eafc","_id":"ecsite-form-builder@2.4.5-beta.58","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-lBuBsHYe493ueTgksSFaQJIg74tgQHuZzNocN6o5/qwtiwQIr9txztGlLmgNdFovlJ7QCD5YH2hU2iOTBak1QA==","shasum":"e9545120dfe4fbdf6e5360700facf816e8ac2825","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.58.tgz","fileCount":113,"unpackedSize":4670307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM1wkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpfnw//QfFkhNYzbKBb9O4uEdsqpm0sJuMq2D52LJ/I33ojRf9V8OHs\r\nQ21XugW6gF2XDPA4H46g2PtiZz7v/Wq9Smw00ZQL72rbb0QPHRVjbJKv9hfI\r\nduUCqZsOfIpjHyD7hDYfOq2d0c9bKticwoyfhWMyMQUJ508cswFu7SoFUJyL\r\nISvOTbrgwGOt0dRvFdejta8vQiyKfh/F2EZ0nXUg6C+LddAA34SJKp+B9/l7\r\nF5BIY7CMsV5SRRHveTxkKVLFLp5TJxvXq4HFk3CIDwD0I/ts5W/zi2NRtlwy\r\n/AU6HuUgT0RxqNyoKqcViHj4Slr/MoEiMX8/koksY4FxBbVX9M7SbX45F/tO\r\nRCa9fMbV4mI3cIkp2FWzOAN9jNKf5s8vWgs7YDHDgGlpth7lHG12WYbmp4oF\r\n7w68lq7Uj8NTzpnSQPg5g330r8QIDqF47Unq62bn1eybtBymshjJYMfC2ezq\r\n1r5YTi1NGgsEa7U7+lII9t5FjsrZeyQdQ2lyKX0lHso7+tKBHoTmNuAo3y4T\r\nCJtqXOsfPq6VXu5Ei3AwHnhq7oB07oJjlxzUEcSwcAKKb6cAN7HVcmcBueq2\r\nern8CHSEIbDWgLZZXsM+Rf3jp8OJfH5G6dxMrSgmh0xpnfIp+c8pCQszoMzj\r\nCRxtbPkN2YasUsPOO95m/tBlk+iCNht7tc4=\r\n=TGYO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfbZ9WbloPBgCa9wxDDKinLwBCo/f210reFOysRVlE8wIgciSKfHzeNKNnFLn21IPpZt3AHg8IHkdwMUXYd5GQj54="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.58_1647533092489_0.9272892799294643"},"_hasShrinkwrap":false},"2.4.5-beta.59":{"name":"ecsite-form-builder","version":"2.4.5-beta.59","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"1e3f13476c3854c8bab987828d2111df3679097d","_id":"ecsite-form-builder@2.4.5-beta.59","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-HVBPcImyZcAJOzRxx41uva4J3HLnfUQDza0JSOe2bsc2BM5qwgTX6BIqhJFDjsPCyMszN6gXIVUPKhqm620Syw==","shasum":"7d5365a013e7eb6c2291cd9bc36a6b4b19d4d014","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.59.tgz","fileCount":113,"unpackedSize":4668611,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiN8eZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqbIA//TdLjiqVZ5XjnzP5698fifGU9avOHhgmruJWhXFA2Vqn+JHwc\r\nfFP1qtR/JCBEsALfeShFWViXkbku6Jna2EPZYC2+Nrw0Py6utWmkEDH+11ve\r\nnG4yA3C3BTkxv7XW5eiJTcWzgIPGGSyuBoNae0IBfO9zeALZwW8NJHaby6XA\r\nehRMy+ip+42FBs8Fl68LM8717tF+CoP/ORR7pYyMoie1hhrdLzB4n9yWwO0u\r\n0s/Wk5VBO6dgivV8bRKdWYpD3yg3I1VDTHDg3fpPAvcmjwRzg1DCWE2ija7q\r\nGqIkynRa+aTlobdXnGvLms/vI60D6iIK6tDqXMlbHgauzJ/Yfi9Lh7jAG1wd\r\nbnPM38Y+QHnpELScE1CWibQM7rUfet2PF2RcA5SK12c41xyHybaq1CWSdWGJ\r\nYDRvptVz5jTXYG5bMo0iT1eIjLzXSJAZJmCPYu62SsPfIqzReObYixNh62uP\r\n0whV44qpzmpgSkUXQeHZ8FBaGgpYC94NIH9kF6OvlU5nq2IcuwOvgNqRp0yL\r\nH5Hwdv3xkH8kQHr3fk7eSDM22cIQq6YvBMNKjUPcxQ/EtNE/KaPMhcLs9hWr\r\n2I7XEvvlxGyQZ3AikLHLf99Q2mlXCjWhmz48sUwzKBIT99/37hUxvVPKhyy7\r\n7aMVp7IQVnQn/dUprYS3qdoV6mkGXx5jX38=\r\n=5m0s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICdyrI4B6i0XuD9tSjDdIIwvEf867Fv0jLDS+P9GWCTEAiEAz9VqFozQhg6DWsWaQ1GFeyCcorxzajbMp0a4F1FfgSs="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.59_1647822745478_0.6262935814358437"},"_hasShrinkwrap":false},"2.4.5-beta.60":{"name":"ecsite-form-builder","version":"2.4.5-beta.60","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"8172b5c2f84e42635c11596ab28b19fb34b0a129","_id":"ecsite-form-builder@2.4.5-beta.60","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-PFs20Ck1hw6VTyHshODiaZVOfMKckKfENvleFMTG+28mdoO3G6gp6VXykkm9DakKln1UqZj5M0FcjALne8zYVA==","shasum":"b1927a92d81f2b931c0c7f8dd127bfd46c2118cb","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.60.tgz","fileCount":113,"unpackedSize":4670382,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOGjFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr56A/9FAoJxFtYnRWk7OjDbgg/TxRr0LHwSe6QD8DIoNR7TGv3BV3x\r\nQZ9G8HN1nAHcDy0C+mzWfu1ZkJ4tFKufj0iaLYhDjJw04ZY8dQfajOEikjvJ\r\nBvQxs+M7Yg2zn6fU5cn2CV+bVBWDBSxWVuzYY04YDtR+t0F1/MzIY2apOwx0\r\njgNarzB4+t0ghIUNuRIaEYGUn5K3bNSd4tR70FmJc/3x6ZyeXeSfbY95zLgm\r\nQwVafbS4zrasYL8uXkdDjGzjp58ViORoy3n5PXk5V5u75vWOo3tqDySWT7Gk\r\nMWCKTE3bglF4GGuaua0j09BAnBbPYGzIFpOSSQSdS5K8OUtbOi2ybkeeI1ir\r\nlhApyr21Qk8DHFZ7OB6DxiZo+N7ASjVJWGCzUCrOabVvrFg3TrYaeSmFFqjs\r\n2zHJdBRUIp28tXPy5ar9STzFrvIX268T6Ca57LouzcE+ArB7/g2SEki5FsLp\r\nMDiolmLHx599d6erEMiquoEFmfgMMJeMM3XMFP0R2d2m3uZeH5IprkYqtSU9\r\nwQwHgLVxk0ecgMMYNEyGg5JybRG26ZEGfnV0lG+3IfiYEj5U93bXJZEING1k\r\nDFj8T5Ulmi7T4aF2ePplS/t/hv/VyT7o4+fu3sgfViXGv4Wr37ECDU2DuY1K\r\nNPcq14nFgStRA0KSljcafXM+1WXUEauFicg=\r\n=7vol\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWO4vwDK4qWBnUrggSXA6hRuAwp/jZvrWvpLdXNk6w2AIgRgqo3Bg90/i+uoHqSuQ7fN044zMVWmRnK9YOkTcyKOU="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.60_1647864005482_0.9522507691578626"},"_hasShrinkwrap":false},"2.4.5-beta.61":{"name":"ecsite-form-builder","version":"2.4.5-beta.61","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"2e41863d977cffdbee85375014347889c00f8dae","_id":"ecsite-form-builder@2.4.5-beta.61","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-rvn8HkioxGrcmyhZYyLEe5uPk1WdbEmEphjiEADluEA8gxWpeu/f7B+TunUS+tR7MHNhsKbD/y9kRYcAcJyIXg==","shasum":"1796adfd2d1519a61b9a2c37ccb2b1bc62b597c8","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.61.tgz","fileCount":113,"unpackedSize":4668968,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiObUSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqqkxAAm0h9cK0ERT70748VuCU6kY244Ufh2mF+e7eeuhcMutJliV1k\r\n/kbSn9FKWbKCo2X+IX9fgfjjdQYenLqUantaW+7CumNBnWCsj9t4tuP6TSZy\r\nLTLQhxVbIuynZYp4Hw8673tefPDYzHEKfpkCvNzjXsxOCidUoUTbVp621WRY\r\nXPnP9ILOFSyiRx5ZYOA2h6bU9sdqQ52KJJL3SDx13r0SveS+8Ias4b8rrQ7b\r\nIc9p21g/Gf9HGDkGdoeqEa0JyyLXlBRiSxdIM0nFFhukQ2+A8wNwuSUCZYqk\r\nmr3dffMXgXOdARDdO+WxsooET2/s5+IixeeHAM6J8eb5+JXkXceT8Cl4yQSm\r\nwn6E30oijKKtvZA1tRy/O11cGZaqVIj5Zf9fNzhIpgSsN6j9KqumlU1x9pY1\r\n9zyelrTP8WzcXT6oksb1YQcsXTCAERzZQCi4JzC11oQgcBSYmgS+kGShwS9B\r\nmqHsBs8ZEZTfK4Z3ZrcA8ADz6+vnvFtb+rfLBDbFs37zLmzTp8HeWb+fBjiP\r\n0ej4udbHToL8ytNYprTMLt0arwypRZnuSY2rMWwlgG5vwiDRX+mOntzs6qyX\r\nhtkQGM6Fh+n5DPFBCtyjuKPQ1lF7EzfS1KacYPc/s3pCiUG6eqeSYECTQ1P8\r\nvZZSqYTIVCL1av6xu6qSEZ6OQ11tLBSFSaw=\r\n=eDDy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEL7i5o7JWW6fHqdWvyn6+k13qzdCUpZSY1Q8myIv7ybAiEAyScXfRVzJRzIKQri8nBB3fBg0PUels7r4bxuT1ZFILo="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.61_1647949074512_0.02591300108642458"},"_hasShrinkwrap":false},"2.4.5-beta.62":{"name":"ecsite-form-builder","version":"2.4.5-beta.62","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"2e41863d977cffdbee85375014347889c00f8dae","_id":"ecsite-form-builder@2.4.5-beta.62","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-81EyuFO43AIprPGONe4pUArnS/T+JCZT0KjoLJIqV9SVQ5xvLj0g4YG6WF7rL6HQ95odtgbbMX1ODQKIw/tWSw==","shasum":"94aa0bccfe2ca67ca96fc61dbd061ab35b46dbc9","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.62.tgz","fileCount":113,"unpackedSize":4668674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOdsvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpuzw/+JviAWQItOxNorBPCKtGAVqcbUAt2jUhrNEFeGY5QzNmhjKfl\r\nKUniVeH8dvMJKbmdggYkO/awvTfRilQ5YnHu8R98+W7RFEziK/KsXCCuz+Ev\r\nQHqmDA3wDYNCGoez8HkCwMUlsJIQb8yW4I+BuuVKVFIjmF0Xq17/63j74olM\r\nBp+m6syxeY0cWSRmcEKHOnaopF1Crk8Lq8bjPGOxCBw3ujMdfzcUZKswOqKi\r\nAqfcaO5Eq7n4EikC+jAsLzrNsJysNn/ZLsEg8SW9rchMRnLF6/pvHXD53J5/\r\njMgeAKMhm+yM/ckTTiUZ8eakVORTnltYX9m/FprZruQ7IyGVo5G4Vp+zKKOQ\r\n/FOAaSvYMQTebo8x5jBo7rY4J+ycVi9+5afGRT+KYw6qan1juMPU0n7iDuh4\r\nlVNuYHfK1J3x5w4cc+enu+q/bWS6KamUdIae9gUJLoZN+FqZWr5JdL1dhxEi\r\npqAUqSnLwOsh/BOL/EgRsetmuRu2gzMox/3C59JTX/pvKznJrEFsFKqGlxS6\r\nc3tb96euqyu90Ucf0dZBRJMD1NlgZO8m1xauyktp+k0sOcSVt2/Ht15Z4sUw\r\niE7Fs++A5E8r3bdO2V2L7BwYCS5uNQUa0XjGP7/QqHyx11yRMJTNHV7uHwbr\r\nqe7GsnjyjO0MMC4st2Cjsx5b+ellXgM7pq8=\r\n=+s5H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfKjo+wpL5/YN3fqSXjpCfZgmvDwhoQvESBSjN6pC5hgIhAKofnK2BEf3kuKDx0dK8uq693FTKUl+FTJ2wfUKztAMu"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.62_1647958831526_0.0009003846096571344"},"_hasShrinkwrap":false},"2.4.5-beta.63":{"name":"ecsite-form-builder","version":"2.4.5-beta.63","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"283ab6bd98f43cfcd97dc75e7e86338b03389d7f","_id":"ecsite-form-builder@2.4.5-beta.63","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-ZNbSdy9cHrsjxBBqdVtvj+by+mhDQZVY/E0AO0sDF3rgD07wAdUPd9/iLddeka7VFEZK8+Y20kZvOoTYOzsMjA==","shasum":"1bf687b84e0629a0d0963c1d49fa1878742c3b75","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.63.tgz","fileCount":113,"unpackedSize":4668749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOfAaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp26A//W/yvRvfFFzSIv+SgkcQZO+4haEuW1J122adSzSL6c2Fk2Sba\r\npklsObPo/Ml+Xnyvj9PBNhDPilo2RvE9Qc6/VrC0dZzn+zVBLKLtaWKISnqu\r\nP+0haNrRInJYl9QvEFU0udVu6ztBm2y0z9xQ+mKTMBajQkCNvGhhxfPPWANg\r\nYqHLlLDaJiM0MA5bgwOdJ7i2gSKNJl4fYNPQUo7p/AuW8eiekhBcZcvnfzga\r\n3NINeni3i00pW9Y5pPhfw/Dnw26DZ18ghTRdjDAvqhpNGbiZRv4VUf9O5iHx\r\nwuRUrVlD1oBiOfpy+Aw1Yy2ldPGS/yUqR9VnXBDuRyS5XkQ3LXoWRjNnrdZ6\r\nxMWuiygB5FDXyuDJ2MEadDNMCq5PK5qs+7uIooQyJY+VR0aS7Nyj1tDjzVdu\r\npSsN7N1yYIbikRBNoMVtlukn7iC/oCR1b04fbkU/PtGohOJHFAqzM7t63q0i\r\nL2K97LNaOzWu5X67RqVoAkqDwZA13yWzKMTUqyoicwtg4l2y82Bc9f0jBcqW\r\nPgoyP29QT34BtV/jk6xrrTIW2GKQHAfAz95TPsYIfF6ctFITqg2LMkeDCEmf\r\n+RiWxO2hCNFB/7CSPPG0vXDmuoRwV5OmaxLWIjmN3VlcyX4Q50pbOKc6jeIU\r\ncmTJdFrPJ4zIzQdw0T3sI4sY3NSCMUkuUBQ=\r\n=fsmP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhRPGd0q4rOJzdnYUxgNO9rUYh+5i2FICKlXcIljC4eAIgL7oWePGGrebrFe0rUvdueAocYdIUHU8OlSNRhVeYpx4="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.63_1647964185809_0.7285715063807983"},"_hasShrinkwrap":false},"2.4.5-beta.64":{"name":"ecsite-form-builder","version":"2.4.5-beta.64","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"aaf8f8235f73428772895d0a73583910c7d80902","_id":"ecsite-form-builder@2.4.5-beta.64","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-C0uCzEyUx06yCdV0cfmSFwv3uLywrtOLoU8IbMJmnbSuRFQUMcw8vp1QMWq6Mm0KI2L5j9KXFnmstWY51HCLSA==","shasum":"9bb845a43b83b26f383587f5f4f60a275e4d1d19","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.64.tgz","fileCount":113,"unpackedSize":4668809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPajbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+cA//Rwn+QDEB9DXx+gMOAqEyza7ms0UWwJpH5mvx5wWYpaozpc2/\r\n5M9OY9tPowpT5JeSlfzM3U9k1489QuZjfaI2szEMtspd3rGCek+uTCRAdYNm\r\nOgnLqOkIN55UdMkwl0Tj5MBw8YtKCh4qmba75LYeU1m9bVXzanBb3jxlejY4\r\n7303Fx6NH3aaIxCWynFn3rI5gkAdWil+4xie1n2UU03OQOVrE40yAO33UnNy\r\nBpEReqOV8z14kwRSFTiOFvGZFUk0BrHIQaMdVkpmt6U6mW+VUU8exCSvJFI2\r\nPSxlk1sfot77fsmRmx14JME8vg7qWe6B6VCtav2h7DwsE2T9txN1Ya/2uV0o\r\n2p7hE8mvfX+gtzBdPrc6drmDxrm69asWYB30uzDreJYw+RD5JTGRE8WctNsT\r\nb8DD+qLINCFrSHtBp/JDvVYnR8av3ZkBkT+jCvqwfZP+9Mp82zViTvn6mKx8\r\n9h9dC6IN+U1kPmf0KdDRkRYPu7ixxl8ccF4bEAY3OBBOs6uLYWTNbArY9/VR\r\n/2+rtratTVVTcDuS3tRtrtcLDCNyWYmy04WqKn1yi4N+rH4AepKLO3JaE1cZ\r\nHtCgDH1vIQRvRl2h5F3X4s1e7k4Lc3YG9rUnzvWQPsbDSiwBsoB/eGPX45rd\r\nZUTdn+8B7NsCj3g9MWv5um3mIQU2+27y8CU=\r\n=IYBa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqcfTqz8JwwCuNafv8CYGXBKcJdaMx25Hlnzf7Rt3GmwIgLEalqtipC5Q+T9zCYowDzVmngZhuSIlT4+AGYKpRTk8="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.64_1648208091600_0.11376612600910851"},"_hasShrinkwrap":false},"2.4.5-beta.65":{"name":"ecsite-form-builder","version":"2.4.5-beta.65","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"aaf8f8235f73428772895d0a73583910c7d80902","_id":"ecsite-form-builder@2.4.5-beta.65","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-IpbF5kVW7MTe0OgDVfJihuqhi+I5XIj0FT7A/mGOP5qg4t0MhX3ep08JDAcGZ0TY1uptnf+qjeqkkgFmLrohpw==","shasum":"60b5d99ece5942ac62e63a158757fa86e07ca51f","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.65.tgz","fileCount":113,"unpackedSize":4668906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPa1xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPmA/8DTQOjKC2fDNWX2iOvN/hQnp114lp/5tT5sk0g07iHsAqui9q\r\n63tZPy/6FQBMK09SCEZbcNxeBwyo+G/guuzkTNbCi2mkiMVZMOpluWlZepd8\r\nTQo6rSHn7Ga/xiNKq6JNaS4pCqM1s8rrmyAZzVRZQqaloE+TI1YXttC1xutH\r\nj8zL7rf2UhT+vMrZtPS5vhZj2saxiHcgq/KOfMmlNck/5zje0k7cjhMxBPu9\r\nB8IXDyHYGPpEsGqCkUmXHh+wacGH2PIkn3a1GjhWS5g35xS7fyBJuMt54Oto\r\nwayTn+17HXsveofICKqdGaxmX2TupjUqHuKT60nj9FaiBsZHUPuysPpck83V\r\nIZtH7xSSJJaRpMPMr+dSpdc+THdBzW6J2ZJkFoXV1Ncw4uR4dpfQuCBxAJSZ\r\n2Wvq55494PhhPFEzGDlewOZPjvuDdPL7lqBLn0WsVk+mIf/muGxnAtfpN46p\r\nyAmqidoHIpw4xNdO7SI58FZrlishm/Y1g8gpoaZBE96usyV1OERap+ga3rS3\r\nuwEK6Orv+hYW8BPDa91Cm9zk0epYW2ObV/+iVBYz16M7FkTb6NkysQyCktHD\r\njetYB3DVnuSkd1kedibbiIUo8s/r/wPNYvXaBmOOPWw3+39hstAOjZ8u/wur\r\nRySnkMeK6sYAMCy6ctdV4k2SSf/5mlLnzjc=\r\n=Bl4y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvWBEQQs0xif7HPQmStgQGWrra3l61L118jrUJe0UIigIhALYs+SLwbO5b+xBMdN/aRQofd6DMTlJM3UHxmIUmZR6b"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.65_1648209265457_0.2696263426742651"},"_hasShrinkwrap":false},"2.4.5-beta.66":{"name":"ecsite-form-builder","version":"2.4.5-beta.66","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"c223363a853d3a3634654a9a3b4744630b5a705e","_id":"ecsite-form-builder@2.4.5-beta.66","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-7w+B5fB+M3sRXXK6mhIeKK09mIdarro806Q9IWjB7pzSblmWJVl/1/nWCEg2WDTQoDr8L47NfMup0lFkKO6Ugg==","shasum":"962a813c4b591a97bb59467198186c71d0c4e282","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.66.tgz","fileCount":113,"unpackedSize":4668958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPbayACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJ8g/8DoC1KOeieQIjvdjQixl8gICYB4rKiL7shOVpMnWzhAwzaQzd\r\npBPbawn74887td2iM86rl128j6YrVvjnCY+Vhde9/zy9kI66MCTL5x1QzgUm\r\nFX1Al/hZRTEo7bPh+nG4+nZCjJCPSVOow0sgnUvVPYQ0OWoxSap/KiFMz3xr\r\nfGYLwLKGRRfJ5DQwK/ErQpMnVvYoBVi5DmBP4r3NDmvusvmME1z/Didegzjc\r\nsxdhW3d53e5OEBGBSh9GY3/gRiBlmHKII6BOU2/enatjSWEqqhHPs9Fwz5Ba\r\nBhKPurSNWgX3EqmEs7/mjkflYRHVIpYMBzEbCvphHlMn6vzLGpBvZk0Mpk6S\r\nI5eKi2wttMwFYQ21wt3zISi3ebo0WRZIxqeHk38fyn9bTVzyrKI0ITT7Q4Ce\r\nKWBxHxD8EfA5h9QEYvxWPmg6c5QwD9ReZIX8l9ZbSeHHuD8WW/HQ3o/H92Ch\r\noYTkKbQX1oe1/odLvDTXeZAuOSuUeVjGZ0wcqFaASiKQlCUL9wW5N577jmf1\r\nXhIYHAEQZkD6K9ebJmYF2fuWq/F2oWizEqZI2ze1DEpFu3Il631TkXi0ORHv\r\nToGVxoSuVAy5ga/349xOmMG6DX0JqX18ZB4Oxkqnu3ArHzZMTGwiHn93sFKy\r\nR42I2qHFb7Q92tlxJMY3w9G7SHF2oknDMEk=\r\n=d3EK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID1j8NPY1PNB64194EUTCBDYywthaCLvS+3lexR4l/VeAiEA8L4nd5mBuHXWgZ+dULQvWt0W5i2iCfZ+oVWEcSo1zI4="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.66_1648211634353_0.55564538209198"},"_hasShrinkwrap":false},"2.4.5-beta.67":{"name":"ecsite-form-builder","version":"2.4.5-beta.67","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"1b1b3614e5a6266abcef021b1858aa7ca97c42d8","_id":"ecsite-form-builder@2.4.5-beta.67","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-pFkyhp47w2nOQAyICUVURqqiAVBRdN9/EsTKIuxMOE2yWfWuHZHETjM0H9J+5OK+ruzN2a9NLuLG3OeGxSaPUg==","shasum":"ab3f34fa07bc9dfa3524051f118ae04b1c2b4559","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.67.tgz","fileCount":115,"unpackedSize":4687460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQVERACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpB7Q/8DJ+vEOGsQpcJCDAX2aumbhP+MUnD+WlRrOpBE+8xt4hw2QV2\r\nQpe8G/V8lL59cSl38bsIURhZdtGbi5+uW3YTajoHshtDQxHSmaAJYFlNZ7GN\r\nFsMckVNi2GYZYpwi1+40fktWX36ID3fkUaRwrII6+cqcT6Ld0/8eIPSA8PPF\r\ncWDJEBItVsSMn56TTz+eMU6XX3qk1h7a/+froiB103LPVguzTjbQk+rRJxwy\r\nXs+HjrpbK1qztB9aeRI2CaBo4b5HDt+t3Mj98wXYfc52mAj0eVbqPjudvoLX\r\niRjtXDI5p2X/5xsc/NV4k/adZqqEj3UHpR8yP1fLsiS9HUNsewW/gjxNC7NJ\r\nfDKvvAq0ZW4JIJGrBkvnAW17ASFii7YnSxse3x6JWw40wTqaLS1R4JurzOkT\r\n3ah3IYXkJysoSOGMFajz/493N6Mb0OJaI8vhgAILtkfJj7N9Eg0qRn1otaRa\r\n4+ZoJcsWu24Gh2teDEiQNJp07lVcwyhbRAgcRJGcI3sODJ/CFaNxWbZ1vwG+\r\nF99nTWxWLuJP9EbAUyFyCIdcS3xZstK8lNc4DU08utjxtK0d4kE/WHSucPB6\r\nDh7tbSNcHwXizQjfjh5T3C80sEx+IoOVW8gqs5PuQRybu2lSK8ntKDt8EgBf\r\n7EPmmsxyf/z2ep9G6DWzeibxXrJfQBme4Ak=\r\n=a2cE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxge+tNz2+FmcjEnh0vnhZO644L/2XN8j/F2Udmq/emAIhAPIPyCb0hLvgahwU/UoaUFndKUSKYEhuWC4W8ldB6got"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.67_1648447761529_0.6586266969594383"},"_hasShrinkwrap":false},"2.4.5-beta.68":{"name":"ecsite-form-builder","version":"2.4.5-beta.68","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"4e09cd230da6c0e272ebc87f78612407f7820f2e","_id":"ecsite-form-builder@2.4.5-beta.68","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-vK3VC3gMMBmJpB0+JMSdrudDxOeRFaDVPBim5HSc9RlG1yv6ch+R1QvEJxgexQzuK6WnGZDJ9EidoZlVZceK2A==","shasum":"a0ecdecd7b2d03e991f9bd39690bef0f2e83f436","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.68.tgz","fileCount":113,"unpackedSize":4683748,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQXzqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofAw/+PSZ4Jzs+swq3UpyC65paWJvkwE5msjI8p0DmEWssALpsHdNL\r\nZ0MBsxnmyjgBzu1Y5TCblDWOyXqj75pHPnYYANQQWoMryyYDVf435JPsilJZ\r\nvLWeYd50hpJpuhipeiznpIIC/q1zhrQoionJdTuAYZ3JnjCMbEfVFrdB9lXj\r\nOaoiAT+e+TipTWV6eMHtLR77X60Iko1Kg/rPru5dhwJa1smFdqYbQ7io0Izj\r\naeca+8S03mqKL+2RFwm74MiMw54XmVUTcGY5/x6hC5F1qsXUImr27nO/s8dU\r\nM7tCEOQW/xsBI6Si2QhUzysf9uu76Y6METCRoio9dPRW27dGkm+RbS7w6gCr\r\nzSjCMlUUGNWpMQXF63zytlku11FQPxP4FsMzR2byJeXLt6peHaWm5i4Jgbhv\r\n4d+AIkXXQUuDfgDejHpVmB/xhlb+axXcE4VXjHFsswpwk4O1nOE0wa7I1BRB\r\nzGgFGiiHwq1PkktzGHkFlCXKnR+OUbgfRn/R8/UuewUX9Kj/ma1f6cKTJjAQ\r\nBidAqYFvDTsZFswxilpPw0wr//0Uv3ctbLbllc4nAZ35ufSBS6qoMItjif5Q\r\n20tBNmb3LH+qeGzkUEu4L2FSz8n2W9KLoXWefU2t6UzKzatmTaz7Du6tCSLr\r\nic+IX/Y1y/f1JAfDbhyalsdsW8SAylQAwJs=\r\n=PQuz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEgZJy84sksx+gbReXANwsq3743OCUsBtIiZWrfjzb3gIhAN6PZGO+GokneYDgR9sqjAyzB6oaMLNaqCPckWW2T2qz"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.68_1648458985860_0.5406571896113046"},"_hasShrinkwrap":false},"2.4.3-beta.156":{"name":"ecsite-form-builder","version":"2.4.3-beta.156","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"1e3f13476c3854c8bab987828d2111df3679097d","_id":"ecsite-form-builder@2.4.3-beta.156","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-rBWw4/T0NDS1fY0pgpKOoepuWJol+XP9jXVkAu00gygBvPfgx2lL0R8EX4v27LqSipMHL9iWt4gy0pkPliCJ1A==","shasum":"2d042720eedfb507567f728f286a2ba2d61fa3ad","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.156.tgz","fileCount":115,"unpackedSize":4624711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQsKiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJbA/7BcXPZf7QVs7na8TZ8tNJj3X5CFSfwDG3IPvB5iCiULsTOzdZ\r\nqUwPJN/m1A4dDVXSd3HgBCNnUSjnZJ2fC6fGEI+exCou7k9UYHQTOpC2sTzE\r\n6QlLzXBOJQbRHRVN4MxYsDc+RSDAnWexWEN+zLVq1CKPAG8cOzuRw0RTyxIN\r\nz9W+cJJINYuSWjL+AZf0SJ6oLTLz94Oo4nqrrJJxuUKIffETYDf3zWwdkd3Y\r\nVyCP3w5xJYYPDWzUlvvhvoQCpWvgbamoPy8yPingk4u8i/pc3SZT55yYRIP5\r\nRizQXJPyQ1CrPbV1sRnmNhBKZrgVZKCeZjua1zs6y1unNPsmDhDkKrqndI+z\r\nbQLqL9bu9lRFwXEdrCKka/tstysellZRoc6u0mi57VuoOLOp6610UULBkJnS\r\nWSxEGAtVuy2vzCLc2XYcsyG2DtDpqczT655ms6jMbyYPmW0I2hz7BbN+f9Jf\r\nSLcMgs7FSgXbsgGcqRXRg1z0v9aHZFHt7ligea+QBOxvVn8QBeyskOCuz9wM\r\nx4AX1T5KnN3Rennmtq2m97UrKywxl2Q8V8Xd9oPAOk/5Q0G+AqrtmKknyAda\r\nl3ZfTvRJvKIXSZIWKdXZa+laMCXks5SVJ91Jm9MgWSGCt8rltMXPTKlLQGZi\r\nC1rxCJ5eNnagvRpi1rOQa4zkoK0e2AdmSCY=\r\n=4VbX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICy76HGkMwzrZw0VIXG1aVY1ZIKGI+0oeVA5Dr8b4PDfAiEAk7vI8ha/VgBuLVpH+b7/T2hzPLqMHCN1W1KWqlgtWOM="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.156_1648542370131_0.39103209372804293"},"_hasShrinkwrap":false},"2.4.5-beta.69":{"name":"ecsite-form-builder","version":"2.4.5-beta.69","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"35780d9f8b8e5347a5cd3db69dac39fe499d6b7d","_id":"ecsite-form-builder@2.4.5-beta.69","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-9KZbaSVXOLbJc5diHoSsttEVyR2OeQoK863/28B5b2ftVkiWKjHX5ZKpVO875of4ldJy2ZIKHk7kl5c4WcNlkw==","shasum":"4fd1ec5305e54b33bffa29ab1218f4b5e93a526a","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.69.tgz","fileCount":113,"unpackedSize":4679877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ2NAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZexAAguNhutiq62sCUOxfX/XTSXY2HeWXuy8d533YkWL40+WKwhm0\r\nd7djpjRqbD5heZIb4gYQYdrOFZSMGntxJAOvkFzygsxKYhfSUXOfGEP6uFjI\r\no5qMAUAQmjk630tuF7ax47fvPjBwURINshI13LzR+fXj1RMwaVpWYdJHwuAa\r\nat3l8naQt0IT7/PvlNFXsr9Gdg/cpBURMqrhvSpGNzSWE8WjsYPlvG/8BK2K\r\nYme1bQLq33xYvrG0WwhOftepBVTyHPxW9aDsFqLgK3u+k+z16DR4gXitFxS5\r\nCsE7KAu936Vf40TYH5cYsmmOlI71g5tHG6BejZLkpwQTFeg4LgqnJzHOL03k\r\nFcm9KNej5hSS4Lh1thK4CuXKOvmPe7sbk3MvaapgSXqdpaB7XnZwWXnAZW4v\r\nrnrn4+UA0OrPrgyPAAdBThz8VNjpMm6+phr9DeExxKQN6Hj/d5JVLw3DnBjM\r\nhCNL69lZM35xx6XMCkTHYZxGWh8aWzYv8KyXdgOnOykUbeDSqYX93vhWeE4n\r\nQ/N8XnAgW+uvJlIoO+BccifUuWbFmqEIhGohJu7bJBURRDkFrjwAyOCuruCc\r\nW7eJfC2LwW/Gq/jy/9Vg2YOsLrbEDMxyBh2hv8F9VIWxcaj9eYF/uJjMZeQB\r\nscNfrKKPcYoAJugnUKZnbPnBdweQN+JZpl4=\r\n=CqJB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2h9E0F9tyZPRqAwH8+bd9C2ySAhwNelx//gJ5DrM55gIhAJ/95vSciSwTttH6UNA8dC7N6yOeC2UW+iN0Bnp3oTC5"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.69_1648583488033_0.6423549088869451"},"_hasShrinkwrap":false},"2.4.5-beta.70":{"name":"ecsite-form-builder","version":"2.4.5-beta.70","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"3dab320dd53f8e9a15962740e19d94edc60a999b","_id":"ecsite-form-builder@2.4.5-beta.70","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-TJvqfKmywWS3qFtNgEODeRlxVxixNG0x9xWXj9QCK3W/UxCtA3177PuvCocn1Nlw2nTYobEpxDyB1WMKe/oyHA==","shasum":"6a2ed19e341d466f7643b2f64be8ac869308dcd2","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.70.tgz","fileCount":115,"unpackedSize":4660070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ+AwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzvBAAoNxcdrrAfMt8M+8J0EXKy0/oAk/PeGTMgkvxbYBEJgiDMQog\r\nn1Q8wZ00aLh+Ps2XdLkDPTPnpVB9L6HJfIDsO0tYGj5gVMT/upiXNCI2+zFc\r\ny1QprRgl+s1PfAhEPS8KOl5eTTBO/5xDSCH8IuTAGHZLrmvJCsH/kOmchJpI\r\nOVF9vwd6blSmcC8EaBZrWakNIbbvWoXjHHXQU6Rx5FI2nSs1KnVG3OZnUWAU\r\nN0f++Z8Ot7/hHqs67se5rbFI83k6g7C7XFcZgEsFOfkMhDjusjetd0RYOEQg\r\n9JfKEZkNLLXyebnTIoMJvxKeUuf0sCC8IajDqHHqt9QvsAwd4GrNvq9EpjV8\r\noJiCeUGRkJKQgx1BOCgmO9eAeLKSzM10p/8RzYPCcJt7QTRiLtjGd7oZF4c9\r\nQEGFDc9IJus7KzudW6nLAuPiAEPsUmAET+sBXAqLiW2Qu0cG7DWX7GfQfooU\r\nEMrzQjok8eud5twKFflvwxCO97i1nFcdQ43BrELM8ttn1WfWaPBxDPVVVi6B\r\n8yjalYQG31y/Z7MFmlRTgI8vB7xxHCy7zvoC5QOmBtHXTG5YqtPgwRzHO7i2\r\njME3faH3xNAmXMT/jVxDcELJlvPsHnS6hlj39I30FTMybtTEu1AEt9UI1ksb\r\nKNgQFhmm6K1xsmjgBO65WGYUj/zyVCzJUYY=\r\n=17QE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCcC3n3ncX2aV1tah3jVQcqnZQAYGyy3TkQ+4AilJbzzgIgcRaDwQ8PuCbz/QF6wRhF1YuYByUzxO2c163BUaJxJpI="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.70_1648615472399_0.43995361484833184"},"_hasShrinkwrap":false},"2.4.5-beta.71":{"name":"ecsite-form-builder","version":"2.4.5-beta.71","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"3dab320dd53f8e9a15962740e19d94edc60a999b","_id":"ecsite-form-builder@2.4.5-beta.71","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-y57hpvG+oJYz4map81UC75D9YSRFb4n5BoHRQOA5pdSXFbFR09vUSq5n1h3+KnZom0v0F571F7JxyiBTp3dFlQ==","shasum":"8e5152bc43c051ad954f032b7702c30e30d043df","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.71.tgz","fileCount":115,"unpackedSize":4660064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ+rUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0/Q/9FGtH54mJv6wPKeHU12YtqOxdZSLFvZIueQ/83qboIvZhAbgR\r\nu9o70Q7JUGOZhoHIU+qO6cyHJE8zkJKaiclAwPzp6rSWrqsDyRLznaRLtgD8\r\nkTEqRBooRbQQCeGvanvHrU1ByhtVsobTuQ6uRZlerXVzrv2qPEXO+UWG/bMh\r\nyV8mcZ5TAsDgCA+QHhyeBNfOcgF7vPsIpyoeoD/1x29VbVjlVunSqs8bDxSJ\r\nEGpqIUVcPuRN5BDTDRdRfDN5BY5Dm1g1lCpBsKEZM88ea6msr97J7wqWSg0E\r\nB1shZr63qQShqE29IhdMNr4t63BPHYDMzWsFD5Bdenur3mqnmJo7lRe7Mqyx\r\nID2cZdBr1lLV7Y+fiXD0173MBElKevhJbhvylyJXy8vAj8BBNwk+jpuZmuL0\r\n7Sf/y2hKDCHv+aj1OyjWqEOdK1X1oIRB8JVClmevyEkdKKCRM0z4DlPrmrK9\r\niEiRPqXoaN3bmNM4dsG7M508M3Ao/14gJkASkFsSmD3hDM6vRBs05cY4JR3H\r\noagmgPttM6+SvPfrLqMHQ3/UtS5r+VyV1ekEFwZd68tTzaTKqBgu8Vly2YSW\r\nJxJt2JX7e/qjZhG7EYQB2KVc+fC8AiQSAMxBGMhrlAg+eL1IlCqH11Jvq3Fk\r\nb7rk4yIesmpes1dRD1mS08XNF1N5k7zgEV0=\r\n=R3zX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHAG1jxxoMlViQ0QpZnAWB3TJJY4/YAW5kmwJHN3uovOAiEA5VvqUqN5e14fJNe94Rfb9AtV1AE7uD27T2TvA+Svb0g="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.71_1648618196727_0.9857755531349381"},"_hasShrinkwrap":false},"2.4.5-beta.72":{"name":"ecsite-form-builder","version":"2.4.5-beta.72","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"34897b5ecb558ea22cd9a42de46e5eaca567db7e","_id":"ecsite-form-builder@2.4.5-beta.72","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-vF8RlET/CVsVu+QQ4VCJmluFkWp1pamrZCRz2lDNOnHZxiAs3O/nN2hLH7xpWmeZyOp/EiwzN7uPJ2k8mxwS/Q==","shasum":"8d108bf84f68f5a46f62bfe79393e909304cb07f","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.72.tgz","fileCount":113,"unpackedSize":4685480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRCLfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSsQ//VexilDwAArRSqUVgAywtphQ+MYDmdgH+hTF7H2DKlOxNDohm\r\nY9o/G30C3gd66EfxpS23Bv5P0pSeHJkd6RN9y2GLykSPWKxIPREEjbGi0mmq\r\nYKJN5xgPQPVt/Mpdj0truK7mDO77dHfUx6+B4GNDSPsQX4PL4J/odWG0TeRa\r\nIxANlHBwgH3LLKABOwcSGgXsyvvQelLu0mjxyKxcDKEPW7jzdLAldhE9qa0B\r\nEXi2rhwMPsywuC8J6dVj3NbU0oayQfOq4FzWGCj3OlZLtzCzch8QVOneMwKC\r\n3ljZgYdAcIvRSb7yPv9C3oWDvJ4yIwxrINeZkrdRZdOjjdIx8p5gULLnicIJ\r\nW1rutt5ri9F+upTMxBqjVSnK1MudaFPlev7ezeNTVgZZDn5mks0p4FGIu/D9\r\npBRbWIMB2bcf5SXdry1PevmkcsWd47pGRY5wI7K/ilA7N2E1+1OMLbomLMrs\r\n6MfRrHMS19s6jSLRmLucN7gEU/lDvlfa08+ZwRtko1WukdPCMyaPVsr64Kyd\r\nC6s+2LLCCJ1lBdKTmWH+aaJviHrqLPawA71iTIN9Ybd7V7EVFCq6hqDmSY63\r\nhy4BNeNMRmSO9KPlhlrOVspa5WssXSMb+Jo+/Yn7AHP6l9bxUep9KQ0Iyrdc\r\n+KajzRb4+HhG918gMUmP9JTy9fCCsRaHRaQ=\r\n=52uN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICKbKUmLTS3mEFzMVCqKon+FTpBllvXHr1r1p24ysKAkAiAHkuea3GZjk8F5gvCgGV3YKMiKVEtc59qfylIU8mbzMg=="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.72_1648632543507_0.2914838527057597"},"_hasShrinkwrap":false},"2.4.5-beta.73":{"name":"ecsite-form-builder","version":"2.4.5-beta.73","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"3e2995e5dfc45bb0df84b730d587842b4ece6880","_id":"ecsite-form-builder@2.4.5-beta.73","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Ojf6nvrkB2ZuXPCTXRnC9l3KPKjUxB6wVNi4pBd1AevN0jfGYB/ODh8G8fQniCQqdAjittSX0mLgUkRWEuhsuA==","shasum":"3d511c7e495a03d9425fe0f60d9468138ed245b7","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.73.tgz","fileCount":113,"unpackedSize":4683081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRCztACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmIxAAoR0g7S3H07Wk7kljiGIiXUmWNCQ6qg3QnX+GiZ6bverB2WLV\r\njqdi4OpCGybwh4HN3S2TwkyTYU+1rnxK8ffV+ZeXZ1EUFKwmZBxl3SBGIFlm\r\nGaM4rLWJcWu9PYQxxfLp/Z8RgQgugtWH+b+2/GLCfFPQnnZoBU0tHPmBVihc\r\nLIWnPqA66hkTDKJPRrVO8oDW9qEYUJVogdUCqDCsVUjgn/Og2MANkV3VboCV\r\neIG24gG2MUXqwc1+eDWqTeRkMIoCGSP0d+HYtDNlK4abwwmU7SI102x2Ysmy\r\nK2vXri/gtd8DUaSZSviAqR25v2Dq02uFM4DOiBo2QbwPRQEKc66vFQVtcEpN\r\nJaNqfxbJJFFj/UMLqNQNHDMBAJ9kJx8Ojb8XDq67HVz48vTbzjAp7HurFUkt\r\n8v/8HbkJktNzge1TXUlokH7xrCsbBt6a8y6233Xf6W8z04OxVxfvB78vvdKP\r\nFik4YozrOVA+LKM+BJyWCCTanpGCF2b9d3Wr3i7T8fQpHE6L6SdLrIzqgbwT\r\nQsUeibVanwA7w/4rulclZBETTtiv3MKnzS+/I/gRXwopbIuJ31y//0TUGdv3\r\nhSKuR2pfJNFamYMGgAj4QUcqp8vf6ZJbXmVt2cwecUGrGC46xgngAIhawHFG\r\nFa9A17iWN882NSEvTWanAgMS+uZdRE5Y5jM=\r\n=ChHI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEK7K5niM4czgM1PipqL7LxHTp3GbYXBA8w0RCDBSb3ZAiEA17SqjAIg3qkWmYFjktdoaYeMUs3fLNMgNGpYA5Ic19s="}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.73_1648635117338_0.9234296365143098"},"_hasShrinkwrap":false},"2.4.5-beta.74":{"name":"ecsite-form-builder","version":"2.4.5-beta.74","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"3e2995e5dfc45bb0df84b730d587842b4ece6880","_id":"ecsite-form-builder@2.4.5-beta.74","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-I8rtDyzmdCAs/tlyV4p3lhESzYdLN1UESoJyIYueLLkD6b5G8/L7ojHfNv//Ul7a/mYq4mLF4LhEionzXPKiNQ==","shasum":"69bd597f4f0039de46b5f719207654aedb5cf37b","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.74.tgz","fileCount":113,"unpackedSize":3791625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRDngACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotCQ/+KCs647WMIjwZS8H0jG+RhcEiIDfFMguuqA6/dL2bmUBQM0eA\r\nLIZM+x1TLCKiwQNoVbJnCbKsB7+tizlkfpin9BgnK0GkPZB/IfjAtCsV/of9\r\nLDmdpPsdnDOhqnpJcMJtzMZs+gPhLnjpnmxwFocYtQnKECjCj22x4vU4D3A3\r\nwT8Vg1WJPHhWxOb2Hc6BSSdgO3U0ejabfU2nOuhf4mYmG/+8viH+jmeX4RZ5\r\nkoYFvd9oZZPJUf1AbBna3cfEmCouh97eCJGRRySee6G4qxxFTFsNfC6GoWE3\r\neJIp4MWwhLu3O89unWuIwHsPDGEELz3mMzvQ0enIa9ruU+xKQpm3pWF602l6\r\nOdM+iQnyMSUFARwGILdb+6xIBnVa5sty+PEl7mW9rparwAKr8rEZtvx9pJKv\r\nqMPNXh/Xvxb/dMt22mXyUEsROz90YGSfaEq28VxEAIXvaClfhwGOYoWuZ25g\r\nfnf/cvyWX4XvXpM/CBqV9azKdWOEKIPVZtVRafj3OurDJPEwi7/2yU1T+AiQ\r\nTXQ85Pi/qHlVsoIUeK2ufeOVin+rY6ozOxS60VlnI3GFJ6sWxl/yBLWwdB90\r\ntx0n7NBETmrr6kV/eJdM0jQSw0EggOfSGuRXE1u3oTxRFGVoyCNZxiNR/Eq5\r\nlO9/4Nwz6efEptHTJ8q+axoSiuua8tTgdms=\r\n=boD6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9uj2ctxbk9tfktdEWZMYmsVwA3On4Zz6k5fWqLJYZoAIhAJ9k3ciIL0xxqh6cNyr637gkU59tV43tdk5OqnkeUJR7"}]},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.74_1648638432591_0.01006369379679617"},"_hasShrinkwrap":false},"2.4.3-beta.157":{"name":"ecsite-form-builder","version":"2.4.3-beta.157","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"3ea624fbea6918bcae95c7712d704e13a56575e6","_id":"ecsite-form-builder@2.4.3-beta.157","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-bjhNmI09XyEm+q2ItHNWzxSkFTpczb9rW74VVHAYRWy4/u8W9WeoX08RJx4Ibx/ZKwGFFFrVEKvMGilsQB02sw==","shasum":"a045a9972102ccfc7e809e1c7475cdfbf73cf595","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.157.tgz","fileCount":115,"unpackedSize":4626658,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFVGZ/ao5xPddL8Svmpgfr/P2jdsTGWXdenHIMZJ8TsaAiAI+xIWTSGq890nZshV9GW/xOHTblJOZVAiJdgCc2bVmA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRVsIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpErg/8DzLjGE1YEkvbiMGlNLefWqvcvuaVwgPOcIeMnMXM3QEdr3av\r\nXQasAMU69fB49uCVBGsrG/zf9fX8g0wbqmRxUtwSpblpEWtPsfwIQdL4qkVk\r\nNNjzm/deHH+4qbEFX/aN7d1GoXdg2r/iY2B5NR1uSnfu9Xb7kCeb6JIRuoeY\r\nKMBDCwrC161k3kzzU5GPUe7vBH+m4DJGFmnHIVdGZgEo64QbS+09eCggy/HL\r\nT+hyq088Uv5bG49eBc1M5Fdxyk6d5Sm6YIJFb248DtES1aujKHFuQE/YrT8K\r\nQwqjHE4Mmd7/i7JOVdqdkJ/vCieavNeGUaHg14ykIKkmM9at1abzb5tqPpJC\r\n88WlHXti6tcIs9v9jbnlAJpt8t3bdzXsLx4vCLkYCXy2wlPrr2E0oUEqQPiE\r\n/WqOjdtCNwQQDDx8VMM0FTul9/vRuTUaG2YRNRD7ONoCFG9uScVC+btry9dn\r\nCXp+Arux4J5XGUytzZwue1M66sqvpZe9DtLnmdNguJ4B9N+CasEDV481EEtc\r\n8SD7+UNCpnz1M/fGzB0/fbfPalS6Sf+YdV2/Ajl+/lMalvIf5HyefbCB3FK7\r\nWMAj17AfZr0HlGnlg/C4BhZ+FHVLxkFIqtVbHdea8sNdtTcivg/1F1mazkGo\r\n4243DL+pCN55laxVavukdoMedAui/RFHEf8=\r\n=X7TR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.157_1648712456148_0.19461132864279262"},"_hasShrinkwrap":false},"2.4.5-beta.75":{"name":"ecsite-form-builder","version":"2.4.5-beta.75","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"05be3a24a3c3a9d449e671d222b52b4ab3ad31d0","_id":"ecsite-form-builder@2.4.5-beta.75","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-YqA6KeGotAF69ElXvHUAaTH6HpLBlGAR+DKrfPFU6257Jb991hkizR5YoiS331H3KLKTI/oLd9DlXmD/SIKdvQ==","shasum":"20aaa1e94bb7e7b4a2bcb31974c4ec6e84cefbaf","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.75.tgz","fileCount":115,"unpackedSize":3775024,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE1+wvMu1FGQCQqqYoN9IXVxWlcNGlpS6YNu9lg+66TdAiB2AKI6S2+VW8KpbjRWwDO2Epvr3MrHH9a0QNZ+eDi7CA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRcKeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqdJQ//f0pxy3hs2UbcaQFYty8flAyucGMuHq3CoYrmCegtPs/JLte8\r\nzSnsnbXb2H9X3ocPJZv7pU96fKuCYR259SeNc7V0P45yr1wniIQHJL9sjzuU\r\nsPL/2H/LF7V04eWiyfqJfkBLWzkUsFqHMcXnORuTXHLe4Op6YA0IvhSXfuIZ\r\nuAhT0iNgM89mJBUIMw8aQTOEg6zsEXGe4GXwmVX/pl49rUolkGJ+FJQyhk0q\r\niqBX6OtnqGopuPKA5rs7sIa0uotWRQ3/mymaZTode6vDBhDNmN+Es4L0WgiN\r\ny5XLYkZ+vUnhNZa1HGhzctgBxNQC60WKL8iz2RVvzeRrQyMkVQeG7l7iwLig\r\ni9hippOzfwQ0klv970vHYpSUR4vI+hUCXRK5mPJ5WL5SITngV1j55Xpr7/3G\r\n9njx+VBET9sm0Kpp4WTfy1DQw2aWWUWzQwTsuF8PfD3Op3iSB9f6jmSqlNTL\r\ne7rvSdXfF10Y/dATjATPqgcEO0UDU9YDRdpHzFprc0IDewQfYpm1mm1pxnF9\r\nQzFcEDdeUvzrxF2CrzyCjRzoYlcIOSoqGj7oZcAgo/aDWydBkr2Rk7JNulsg\r\n7fbcXguBtNgpzInh9XphtMYbM4VmtD0Jkr7iAmitzWGlxwgnCYpqYIS6IDg3\r\nNk7j92vzfUCvhH74qB8EKX95Lc9b8HZfcsE=\r\n=Indm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.75_1648738974340_0.5102178654903571"},"_hasShrinkwrap":false},"2.4.3-beta.158":{"name":"ecsite-form-builder","version":"2.4.3-beta.158","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"3ea624fbea6918bcae95c7712d704e13a56575e6","_id":"ecsite-form-builder@2.4.3-beta.158","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-26SCuPx5T79BcD1qSw4wsu7Z8u6qIuyta0FDO6resG7Nyi2ZiijUfQHWxAxlajbd9/Az+CzwHld+zoA4RNR6XA==","shasum":"1f6d4339b701ffe804ae5f77dea73c171b22267c","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.158.tgz","fileCount":115,"unpackedSize":4625915,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDO1nhCXujVnjeswiLsPSqVJLtBaAEGaGHK8AjAdKwpFQIhALU338b9fiN1pI8baxNxWrNtzSTXq9L8pc+IUFEqiNDA"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRuM3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1Jg//UImFV/9aQ4H5I6zqhYxEfKByfD9TcjLTd7Gz1pg6ds+z3snT\r\npYqc6nC7ZGkjU2IwoMhKDWoAERHF2hpxySIhPNJU2Tqx6ZTJjSHj3VMsfotw\r\ndYKl5KAF/KFjyXUcrH1MeG2JM/cTupkjBS46lwgkmi5aTlrwDFLD8D0pjb0h\r\n0pB17Tj6XjfcI5/xZFoDDUl+6GLZk2fwgYAncvPrMNpEHHrHHi69qar+eYka\r\nklbQ+QV3nZp+b79jpr/koAhFLSSEm9ABa9TJwEuDi2Bn8a3GtqjG6zu7YMXF\r\nD5eNu1Oje8JEqjjLDydagRPpRs2y8QnlKSaNXdVLgB5Coz4k+lEovZ7dG/9Q\r\nyosP3AfGppG9pS58QNGu2NlbtJvB7ticyQYnEStbqzT+wrrz+wPVRi5/UIax\r\nFjKG9elw614Nl0geWZMIjmKNa+0nFXOtxdbDNmBo8njMLPRUNVovovMRcaoC\r\n3v/FxmFkxrsV+cIWBcDkCtb6c3FKdAT9uF6ZsK/bwIYTKFj8SSzb+MjM14H0\r\n31n49rfiI9/FDfxf5/PtaXUL5IEoRrNFiJcK8Hzl3Horix7cKpxN7E9ggT28\r\nkZEq+vru3YZ/Rbccm5p/SNEjq5n2JMX5Vo9LezRjqsQfl9lf7SEC7Jpy2vLc\r\nD9c7cF7CeYOjL2ENjQVcreC5YVoyxS3Qb7o=\r\n=i3gi\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.158_1648812855171_0.12261452966882813"},"_hasShrinkwrap":false},"2.4.4-beta.15":{"name":"ecsite-form-builder","version":"2.4.4-beta.15","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"72c26111e9a79b5085a096fb67492286092ae11c","_id":"ecsite-form-builder@2.4.4-beta.15","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-6C6WREPD6z7wUAoz1wiyOaPpLbohifFEwQnAgSF1A31mLEOgDgGNsNy734LQ4jNegcr9H6jfUD7rIhPDNCw/aA==","shasum":"12b025fee33ee15ed744578f57f2ef90d0a5fe99","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.4-beta.15.tgz","fileCount":113,"unpackedSize":3794240,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDRgab42b2NL/pALWx1NcoRXmAvYI+BTsn/jzDwBDaAaAiB5yDnXTItCvTay+oC6uUoqdtGvaZP8YhbIRjB7UH6Ntg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRw6kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8jA//S1AkSW2nvBKrGXK7Z9ChAXbv3AzK14bYiNVXJ5+BxGJjTeWV\r\nVXfST7JcQUqXpFJkryUHhiDqz1dhclt54Xh6UFMZBnuQYe4PSijaRvh/0JEY\r\ny4rTMQ5JX7cU5Nkbt/25UsPpA8X5JVSNi7jS3UomSkb+VZ7eQf51VDvpF7ta\r\n7rYV3SflHwC2WO6Cs7CaTpHehGqZY1dF+f6utrAyg55GuDB/Y9GjWf3hNQ9g\r\nt0wfdLACvn3HYy7le1hNFLtv2EoHMxgzrdHEHrTZlG/O7NcEd7cvui9447tv\r\nMKNZIskqEYfHqK1R1pdXm76lgZdCqY0OA3tbRP/7SZoQBPw5wobzEyEAP/rs\r\nJy5U/pviCaWkkPLNmuwglGWTAZaCrgu8XdS9blEe9b6nwU9QFXVfkGXixgqZ\r\njmP74nMHaVMOmMGHV+qqOEGMjKb6RHtdxzu3gjlmPfvMBNMWsamc3aLTkdUj\r\ntWJdPi6HZ4sl9krxZnUonEXe3utM+2LCwNxrnWP/y5AmLudTLUMXHMeXBS4b\r\ncuqpEMc86AKd+eydH4JSb9+bZ+8/oPKreMLzSB4w5x8MHFz755M+IvKvZxT+\r\nw5rQuQ2M6oxUmhDdiOvOV5yQ6GIqG1T/zMyTPdbmgz19G6S9p7vBqzNtk2yH\r\nStnAoNU49kF87hwRS6rRHmqMPe173S4FMEA=\r\n=ncuT\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.4-beta.15_1648823972680_0.8042395189352258"},"_hasShrinkwrap":false},"2.4.5-beta.76":{"name":"ecsite-form-builder","version":"2.4.5-beta.76","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"93b330c46384bf6adcc6d75bd1b145a19a0879d9","_id":"ecsite-form-builder@2.4.5-beta.76","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-lJd6JM9ncxI6qVF4SHA75HwvYiSoS+uu1FRSwMrSxQG1PAX0SHNVhj3HukySNCkIXomm1vJ+qLL6fB1PKerSwg==","shasum":"ec9e3b7b27be950659645b2dcbaf0c6ad68f3452","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.76.tgz","fileCount":115,"unpackedSize":3774674,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9I32agbw1nLp8faAzceZw21zXBWe5yW+IjHK4UOJacgIhAPIDX5n0aW6C6ULbCfEjLSw7wnyh6yiJ0BKxy40wclaF"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRyleACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmzQ/+M1dWTiU7jxGPM5T8+NXIrkonZuB9KgJdJ4ajVVo0BtYqcj5I\r\nAAUTQMK5IGjQJB7jl4Vk80b1JvGtJqko3Sscbp/+MFQH9lpGHiIWFiI0kwUZ\r\nfNsUy/LYJURu9zlACca5UK6uMMgqrUrgO6BxQeCRRGQzN0YeJqM6Q+5eAiGW\r\n+Xj2Y+AMIsHLPhOtmAcgJFIIdP/GfxRq1HFk/7ZbqwnJlJs1n3gNG7eY95Xj\r\n4dUuNjUQtkhDqiLAriNULo/oc7JRzrMKk0Ml8g7rohepIFw+aVXPG/2oTHlE\r\nYHMq0thhocSq9Eil4xY2AfR5YiaZR9ejf4K2g7V8wXkLa5RK/zLqaG6v79MB\r\nGSN27XiRHVgwwOzwL1PcOf/76o3i4G1zoy67c8xIiX8KyvKqFMmUsQhHY4Dv\r\n6QmCNoRQ7CEsdQYZEeQ8Ay2SZnuNiijtlBYQJM9HesotdmD643sSc9XpTCQj\r\nQAN0zYtf/FOApFhTpE5jAF05u5Mxoa4oMTe0stFrJ1Wm3P2t0+93dYaeEDr2\r\nKeomL3YS80SAfpqak60pdziV9rvJ/vg12Wvf4g+YGerZ4dkyUNqIBrV10h+j\r\nIo6XEKnGvAbG6/EpDxLZbEHQc5ijT6/5fKOcqFZqwHK4Mie8VHkdYZmpxUzD\r\nKvIoEHEiOO1/Nhz+nloGZwWX2p7msrx0OEY=\r\n=5wjo\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.76_1648830814587_0.9666590781809603"},"_hasShrinkwrap":false},"2.4.5-beta.77":{"name":"ecsite-form-builder","version":"2.4.5-beta.77","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"b1b2ab77dc8ee6e695f111d0bed74027c6b00787","_id":"ecsite-form-builder@2.4.5-beta.77","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-uLXtV0hT95GY+iQWOWT/fmQASGof7m8Fm26IAbGq0jxni2XqX39CyePcT0nNy6OZuyRsmzzW3zfn2OjBaB/GyA==","shasum":"7bef06c4792e588b027841a4db4505dc3082d8cb","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.77.tgz","fileCount":113,"unpackedSize":3795851,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICEHU20CZpacjw/2PwgEq8CuO4QU0bOG5OKa0r4/eCrhAiA0MjVsXVk0fIj6k/FPzeOUdfHOXLYL46u5MJVOc27o/g=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiSrpzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr30g//RmAGMyNl3Zkptb6c9U87aaw6UAGU7eCqOwew2z/CDsRRVZUO\r\nJ1snBI8G/V03RZOrF7MwFD90IxITAlP3oTAOblAu0nSFn97PYhaT2PT6nBQR\r\nUWv1y6Af9/gEyEJYEoKGHCjFqpW6BnPcdblpBlwR38PKXmMzGJDQnsdtPnOF\r\n23yDmdv43tOagAFdQcJKGVb94x6QIkj09Rm1DUm7tqnPh350xCIkOtJrzEk2\r\nAa2cAAA1hs7yzrivbeYk6OTfYNpie/Dps9wqB3BtFCaqp7b1gQXwZ0j9s8fg\r\nOdyCxtIMAOiW7DuD5XaciRgSjFLIX/FXewf+jvlcfY9hNJFEFmgGunlgicth\r\nJ5Mv7AHNiBki4u54GFD2zi9SN3RXwcXY0S7okME1B6QBe2m3SgupOMrlfgiq\r\nWOcddsY/7vMF2r0yh+Jvjk/FZpM3kMl6LesAzb2QXWlDBlml25Zn5x9s3vWp\r\n0HvGeTMo07aPgoCUXMbZV9BhOWx7H9w4UvpF86gDwBN30plUfeMKMEPhxsgq\r\nNL9KZSexCn/2DOn8yjxbX1iWUi6PgTwUKUpnhRoXhia8jsGOwGj/ejOaXFxW\r\nhvZiLNx0BDBsx9WNUPtbJnKy23jHvyaDM60oqa+0xu+i6SL31r1K5m0JqOJD\r\nkDPIbKWahil9oCkGegwLOhCN5fRaDUE3wUo=\r\n=0k6M\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.77_1649064563447_0.11486662204150999"},"_hasShrinkwrap":false},"2.4.5-beta.78":{"name":"ecsite-form-builder","version":"2.4.5-beta.78","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"61ed7eb8b742091d91c5832ecc8b810f6497147c","_id":"ecsite-form-builder@2.4.5-beta.78","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-C+UkCXAueYL8Nyq47RCfh0coFcRemuBCN+mtVtJwkEUPEr4lWU1W8I/XGQK0YYjfa89JROXjVvL49Wd6QBQIcg==","shasum":"2a97616a5dc122c88fb333330d5400df88e50239","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.78.tgz","fileCount":113,"unpackedSize":3795934,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGM6jc6cVi4zF1mTv7OFmUnnraNoEBo4OWY/UY0l8rEbAiAcbGojNv/47fNU9H3eIJ08iKZ/iqNNxec1qdxEQnj9XQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiSxUoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrK0Q/+NexTHUXLmo3Wqfsa+FEHN3MbfkwFHZq78kCirHWUDZdEquPD\r\nHOmQ5mmC7gG7XGrhvykVr/UpQ/3IvlblTF6YBvsLyiR7avf3mj2gfl/rpq5S\r\nRCWtjiUoV5nQ+39rO9MniLf2vjBDld190bdI4p0jJybIdODP6Av+vk05e8xU\r\nzynTiN1d/SbGrpTs2Xo1jmH5vCPrFJXQ1kIzRtb3rIFfdRz8JVSE4TLkimMZ\r\n5e0uNbxug/USoNrAPdV+M8k0jXj8DnA773mTvNFnquufnZKllKqULOZ7/V+V\r\nWCTuLTgJAdMOfeRYjE71bmazfB7P378puDU2x7jSxvt5xuIaDPxet6Srdh61\r\nqIeqClbk6V3h/V0GBal6Kd9SBzFUANBvj7kJNQnmQ6CCr8ck/RDtBWxUGcPi\r\nIdrDhagLzNfaP0Gg0F7sTaF9lpDS0/Zj6oKZ6tUvgRslDU86CX3ViHSLn+hQ\r\nh8IkEGWOoLkpOOZAX568T+UGQs4OT+JUMbrkOtms2z+sVuahvvu1OEQ8i0nP\r\nnxSyBYRWoqx5WsR+kof45+LPdSEKsYgClV/fuxKEDCngThWRv1a3TpfnalFY\r\nbLjIDjOp9T20xG9ENp74eUFq0dPUFv1XEcT/5cMlGsiKhYX0tJ75hTXQ+X4K\r\nU7IAPOeOAH/drc7o88W1ET0TAXW7Rtm/S6g=\r\n=Cmo0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.78_1649087784296_0.6565100760419642"},"_hasShrinkwrap":false},"2.4.5-beta.79":{"name":"ecsite-form-builder","version":"2.4.5-beta.79","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"61ed7eb8b742091d91c5832ecc8b810f6497147c","_id":"ecsite-form-builder@2.4.5-beta.79","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-dBfW6d6R3FVp/cA+32mSFMoEX9DrtU6jQ6iR/8n/SK0X1UoFLdxT8YD1orr0N2t06hDc697IIqYeqYmOiab0dg==","shasum":"306bf9a134be4eb27c5a6c3ca713da126cb03ee4","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.79.tgz","fileCount":113,"unpackedSize":3795934,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDi+IHidO1SfK7i+vwUP3RDXjm+lZf2NH6Garm632+1dgIhAM6bUfrgOKaYBTIxHsGE3LoscPZoq8b+fwFk2RxfELwZ"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiSxZZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMEA/+N5560YDwAknTfbXfpWu3q31cPK7oJESSYIhqN6dxw6sBTFxz\r\n6IHezN1B8irC2BeYeVAB9YoxqWPgzoRJO7oJ7B64ntMTe7CXMW1QQF83fYZO\r\neSMMF3C0khv3yEgAaIyBGPzw5lSO8SKY4RIC2uDd4WGvch0EzImSO++JNb12\r\ntvgmjvI3CmJyZ2hlSs9/G56MnTHkkLylR8h4R/BamAtr4TylVJs6NljB7Toq\r\nISghSnVeyeuHH5fuyFZ88VisFIzSHPiZ7oB+lVdqvpmxh5OIla3FMLjw1LYV\r\nxZikl9bApExPNgZyMA7SpfTafltiA1SHzpZRiA79Piw1JP29uY32yung7Cbc\r\nKiHC2ygJgdhk+fdm7XDWnJiE2HqHQGutWY7GaVVUueOtr+jdFTv/2ZhQdnJC\r\nrnH1aRPLI60nSfVunThBhJj9AfYN5VkKy1m8WuQrg2B9fkznHm1bdLyXIdPG\r\njtmQq5TsMZm8ehJGzqCsd0nOShg1/oxpkYuNChwK9mzJDNt2FLHqqxxoPhXF\r\nUvNRCF9UCsxOPV0oA2pKD7hino/QGIHiaT/39nuj61wJEqQrr+6GP6n//DJM\r\n9NG+tZLDhIVRibmSX5MvHAgnYMnjqmMAn8i70u0mOUkkhueaqkr0HIWeiEM1\r\nsvuYvswgWv3KTJ4UL9AQrpXU++VFFhxuHEg=\r\n=Wk07\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.79_1649088089760_0.4402117116492781"},"_hasShrinkwrap":false},"2.4.5-beta.80":{"name":"ecsite-form-builder","version":"2.4.5-beta.80","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"61ed7eb8b742091d91c5832ecc8b810f6497147c","_id":"ecsite-form-builder@2.4.5-beta.80","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-h2qoSIxcFmopZbflrKTyrnbvbY1s2GguM/CNLfD1Nb7k6uLHmfDH+vExoDKklGTw3zJAEp7Apm/abt3KiNCsDw==","shasum":"57cb23618daf993cccfbcef3f5e6edec684e69df","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.80.tgz","fileCount":113,"unpackedSize":3797640,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGfMaCiapULBncmTrU5UDcJRDCi+qe9huapU07nawcakAiEA0d2ZQedgVbg+hOIrzLi+r7C8BQ8t/KL/7mWQp9tUccQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTAJKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmppGRAAmlbfKJ0uUFFryzIS7KYia2IHjvEXZp5iKzguS5ExMIEXePDK\r\nQkdhWbdHWkeao1cvFUjbL2Yrc6wZn58aBZe8BPhip8O4xBwAkP9QvYvrxWGR\r\npTgj8woFdQ7SzmsCEL4F2awczHM0iAhh69dG8yQs/nQbIOh6iCwiU/Dg1shP\r\n6ybZ3ntcLyX6X2xKfUQvGBwsskeZtXwsXt918nrHVwzo7c1MbeeFn7Bb8Pa3\r\nnAK3REgQHlPJGG0JcRMxtl04HUGA5oHOzDM/VFDv1tZRSH3rQeS9MtNnDjhk\r\nXDxps6jGSgfZRBs6JrNpELifpq9EBKBsxv87+M/WffJa6FUJebjLSgH2ElnD\r\nsNWIfA0JoT7IzrjBHccAshVSu6nJ0xCN3VhWMv9hh0X8LWWCvZX2SiGNLv89\r\nn9nfBcnTky9V5QyvAIUxoAqNdokz5ugSUfS2bXVhocEC8vxO+kXujayf5v2p\r\nEWbJwO708PWj0qYrKWEruxiIGHUDc0lc9fDY0tW60IZIQlETmS/e3MRqOEsu\r\nF9HzQRQk7j40bpVT5V1aN9SN5YFUnCT8yyNlCoDooPKg2GLBphtk31D4qDfU\r\nc3biEKuMG0Rcfg5pRU66umJh1a3vrKT6wx7udj76scsSgdPmGr/cnp+BqrA8\r\nYfz5AEeEkpyXCSs43Gxhn1ZkIsW2pL18wYg=\r\n=ns9d\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.80_1649148489751_0.92349699450559"},"_hasShrinkwrap":false},"2.4.5-beta.81":{"name":"ecsite-form-builder","version":"2.4.5-beta.81","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"1f9e7c93d20b30586fed2eada8145f5a84d00686","_id":"ecsite-form-builder@2.4.5-beta.81","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-xVIE2my+3no7kzbLvRIyF6gWGlwlJX6qH7t01H/PPPGwSQhq8e9ENsb6M39YBK2XqQtuL9zSQU/lNaBNDgPDTw==","shasum":"6fcafe4dd7a188b2da7c59ce0546bb6d50d7811d","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.81.tgz","fileCount":115,"unpackedSize":3779777,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChjsRmKFWLjRN/R6diLqrOxJKqnsPrAkjmzcHZ5FF2CgIhAL0W+adKi0/1gMETfF2DqJqndjA9W2uTov7R1Z8+MrAU"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTqjZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqENw//TJtbBLlM5CM9L2WgMTNEpV5zUCiEfYnAzqgDB1dTk6fFYqES\r\n7ZxIqrOmj3eGAnTrnXxyZixZdw17wxDYsbAlysiNwaizuLF7PnDLeeryqlhj\r\nM+0mXFXRZ0S5SVZa60/72Enqjj3i5/onirXKUbfk9DmTbIOssSTl2sbii7/j\r\nb4Jt5Xz9NiGTVeoW6yd49ZrXw5xO0QLw1+GdcZNk+Y8ib50tck3nbSXDOUD+\r\nL9B98PxtwzUVfikSa65EmBWxxTu2Hl2PdJYMmj76rj3zdLrI9/H23yp9xyWr\r\nKTPlni6sFY7c0b1v5fpT2MoHIDMnaEhbQcP1BjPmSqO8zFX73XiZ0e4hlLfO\r\nZSvfq5ysdIAxgFpQW8EmL9IYL+HnAveA2VqPeWvv14/AWisuMu4dDQ1F1Jyk\r\nPWUGvQiUy4bjQ3++aQHPmvQZOQSUmnBf1SaFdf4BwQD8WJ4/uFqa/stTMLkX\r\nLqmmL2boBDd+aSKHnc+/DFyJ4dWWQSIRJmgg+mQz6X7wBerYYeQCvE1u1YXC\r\n3D6HJncDr5KbdwNsGmry/giANDc2BMpbzjU7z4uDD1HM7lRGFJN5HkuUBDQd\r\nCo4Kd9I58O9I19HKqRg7DE3/RkIhqg7D55fvwQeAzQWVW0NjrZwZOQ/Uu/KP\r\n0yHeiN3fGEZQU8P1GofLp8tRu5GSD0ALrzs=\r\n=5K6w\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.81_1649322200949_0.8060444819529569"},"_hasShrinkwrap":false},"2.4.4-beta.16":{"name":"ecsite-form-builder","version":"2.4.4-beta.16","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","axios-react":"^2.0.8","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"aaa44c64c94eed961fad0ddea13114926398fb45","_id":"ecsite-form-builder@2.4.4-beta.16","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-sKUI7dOqk2F4VX9/teBctrYWx4cLjAPtx3mIqc5ZqRfbRmczSrfRGfEFw1q7ZW8ega1VkiLhGAPIHEOOkQtVsg==","shasum":"332a1cfb5a163ec3640f2570e039ce78f9304428","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.4-beta.16.tgz","fileCount":113,"unpackedSize":3818443,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHejB/Hvdc0AB5cbaa1MEVy7zSpAOvcXM5VInf91xzO9AiEAyCBhuJJuM9oj3z+Pq2enKT27fNLaJ4OEUzDbvRwOTEM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTsXtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtoQ//VrzNtFr+Ijr9rLoqMkHzkG214bPp+UboqXPVAWk19GrxEFtE\r\n/Jhf6hXwiqi2wr94kYDIXonVD+4j8h58Kmt1zvOghGPRl8fBmrlalLIU2DV2\r\nYf16Ivp2Gj7YtMsIEq+I/p2BcEzA9C5TRdFxCkDD9cAE8TCGsWJl+xA/wtv/\r\nrrvZkusqZqSRkARKmAIto5wnDkljP1S435xfzSZypvYb+2jKzZOyfCZXmYbD\r\n9I/awIMGIUZ52KeuWpZisea9zao1hjz8bAhwR641m5ArOSx12APXUa6Ct2Yj\r\n+F2kGJS7Kp1cAlYyC7844JgltCD/OfVNh+ypbxxOes/DjB1n0/Uxgp3dOdAB\r\nOn9jj2iW25dxc7If9Ug/y3ZOBQ709Sk/Yl4/j4NiHfotmXNhtUzV8FH+ZqU1\r\nOx+BoGt3UqvzZ8Tg+5/qsNqX4wBqZwJZaN562stP9/rKeRYdT4pCQnAzrLkQ\r\neKIQwD6sE5O4u2z5zT0dkVWXK/0wOxqmhCwyken5GZQjQYoRSp6lHUdnIr0u\r\nw4r8HyVyKIH39sWuYVFXcKLotE9CkogncFb4IfoxwQRmYNkSccF24E84Evar\r\nrY215+/tC4nq5pypkFCVRKnl0hl0Cf1HsypDZtdBKx93v5euk9uitsSNd5x6\r\nuNDMDNbqSBcffcVufy0VuGOz6JPUX6AsQpY=\r\n=NzvN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.4-beta.16_1649329645632_0.8723989756256383"},"_hasShrinkwrap":false},"2.4.4-beta.17":{"name":"ecsite-form-builder","version":"2.4.4-beta.17","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","axios-react":"^2.0.8","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"aaa44c64c94eed961fad0ddea13114926398fb45","_id":"ecsite-form-builder@2.4.4-beta.17","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-9fOnPhWX7EEr9KW40hj3Tu4KZcBlN2LLclFNnwTA1gcDDZ8UdLIZxJtdOxD2PW1MNqLPVa3vERhDZiwzq8UoUQ==","shasum":"1708f0ca40acae849b555f057c38e88c7333762a","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.4-beta.17.tgz","fileCount":113,"unpackedSize":3818435,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFzLzTeWfg2dD4hhm3J3tO8U+hbuJRHoix2TO/1XMwNcAiEA8NcBum6JSDf6i6Q740cCDR3WMlRc2T25AUgsY0qgNJM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTsjwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKAQ//RHI6la81szSWa5dodR5BpYPAB5LUljdagw9txQdt48FWl+yC\r\nh224sIw0G6Gy0Orfpgs0cE7p2WDElkcDTkoDM9igR6P0ndY+85NbEeRtV5RR\r\neVmB2rDs6xEbgHeD10q1kfFd5Rl4nQfaqB6pSJjjIo7xMyyPAX/0zvFvc0sk\r\n05eM6QHyafmKctighRG9KRTyoRePXp34Ldq4CIztg6qmhXZg0lX1RSU8XDx6\r\nq2LJ/HuXJGTgkR0Jq1EK5tHxnrpmEO/XsTecw8xaLLcPQ/BDVCtAzkfX6woK\r\neAjvCcQkvv2ahZb0L/CA2LAD02PSB72n5/aK5/34B1Wo4r7h4D/BB5mLmp75\r\n/SKcIsY9fKIF60czWUj4ExFJpSAepgpiwy5jiHzU4kFJeQR2CdtcgzUS8ziX\r\nkutYFmWGlvTja0ZsatiYww99fZ6MpElXfUZfDhAoIkuIM06Qxquraay5c7eE\r\nTPd2BeoI8OTubA+oGTLyQrJUWovyFefvnruS92W8RCg32bEiv4M68G9Y0zDP\r\n3mN+Mv8bvJUVGTWJ4JphCKM62FdNmShcTKE0v3nWZnTbgFKcB2JP/sgSoJON\r\nfs0Eej3wG52fO1VMyenjFU7fdWW28wmwsGy1xG2xp15JzRwVQgcjblPD1V4A\r\nUjs9GrO877K4lKFVP8RfTuOBO2/ow1z1XYo=\r\n=BZRT\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.4-beta.17_1649330416511_0.8341452981451705"},"_hasShrinkwrap":false},"2.4.4-beta.18":{"name":"ecsite-form-builder","version":"2.4.4-beta.18","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","axios-react":"^2.0.8","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"aaa44c64c94eed961fad0ddea13114926398fb45","_id":"ecsite-form-builder@2.4.4-beta.18","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-IEiv+Q/w8FOVKNC7NbV9WQFns/9eyjtKuP+sgCzFPRa3daBLWKLwvPAgeObz1UkLu0zOUV6Odgq905XFval0Ew==","shasum":"3604232be01b1a3b2fb55d1ad63347a34e78b2f5","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.4-beta.18.tgz","fileCount":113,"unpackedSize":3818435,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEkawlnUJAJoaRFnFmyu+irGGYzHB1Ia8Rc3+9xW98QQIgHCbmj+KviMCVW2GHi6Six2HtmIzhXEqrJKAfbWYGptw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTsnmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4ixAAjz/UKpuA2JYaox5k61S+Q1nQKQNV/eNSchGQ2YE/Zl3HTEml\r\nRpF225BBIpSUQ8N8EyWvcVsqyZ1jaEr3mU+7gAHFHMFmv5J44YzxnA+TrxK+\r\n+Sg+wfWpFeuVGRQQI7ay/wmmZdEsodmgLVCqiu0UgZBGOkaXCL5uI80UvQd1\r\nxK9X6l/HFfxJFMWZWnSv12frtZYpAiTVkA9ZZAgOeNXbTiT3PTQWkPUqgOiW\r\nDjT/Wk9nNsC3x2h4tjN3ijpjy/ZUHf9QllxbmpJFMtyZxbU9BS/1VHHDkBv8\r\n3kckjWjuKaMWpi7t5aqpuucY7AN+dSphf/6Hdo9mNC0DEXMCy3CztFayh1UO\r\nRktFe+baUqSRUS5QiwZ73INmx+oFbO4vA2kMa9Tx5uSA/75ZW7LA/Mm3aVpu\r\noYJpx83vKQocOmyQ5fx/7iPq7wfmQfj9EaBGzaFDsMNtTBtAej56XGYsPVyi\r\nGevpN5axCcevN3yxYY8zYtxdBxXQt15qQxdUgDOukHs8ynSvaeeOwq+Rxfns\r\nzJBIWY2yxdeWBIR3jwNNzK8ILT6oGJGYhTO8AOQUwLX+iqcR+FyhgdSOkwac\r\nmZThebRkgXHPNqfwKFYdB6dNwVKpt35YFeDpgO/HncXoHz9teeIMrfG/30im\r\n24WT2zyhVtXQ6Glvbs4ZtWYFWBX2vI/hbp8=\r\n=ai0D\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.4-beta.18_1649330661845_0.5731014242231303"},"_hasShrinkwrap":false},"2.4.4-beta.19":{"name":"ecsite-form-builder","version":"2.4.4-beta.19","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","axios-react":"^2.0.8","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"aaa44c64c94eed961fad0ddea13114926398fb45","_id":"ecsite-form-builder@2.4.4-beta.19","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-VNNzNl8AYVgy9bGZ8Nt5g5OWAcq9vMOWu0y1p/dOBW/jUKLrE3g/73vmOb2HFZmNNNtdU4mTsnerBu4/cuz2Lw==","shasum":"0a71d1a32aa57fdb890a8571bc990fcd33bedb51","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.4-beta.19.tgz","fileCount":113,"unpackedSize":3818378,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDPJuArZSL3l8eyU2NzNykHFdq4+gq3UsOfMC/a59kdBAiEAvrNZ89jR1jj1aUQ6zIdvEPhtdUnG8wVehv8zV7dnOIs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTs8pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYUw/+Pn9Q3i2BJAO7ReBkl/aR56vddL03S3JDQI3rbm4yIxps2m5m\r\neOEKhay49SgMeuTcJlnjNhTFlRBw2XmsTz8iNG2wNLYZM/JHk4TqyUfaR60R\r\n1aiVaLbL2Qg03nAwkDVy6AQ0vpvEkZCJdlQbnn9AA+9r121BJpKA8Hxp75/q\r\n7le8LqO76yYRnY6uHR5qJ3iDc0mjbAigkkQlSsASguFjj1L/ksgrPnlwjTjh\r\na4jJjHcvlVDTV8ar3YkfUGA/EQifa/m2XOwo02Ww6FAT0u6/M9evC4fLVfnt\r\nkTSn4VSmtK6/wSVVf1lo4v3KM1/m533HmM+8eSZLHOqeyvGnd7vOvLnkAYm6\r\ntVWupgBp6tXES7K1MeeEn6WhU8BwFeD9WFKOXoeZd0NJ1ccO/wEW+tvalRBM\r\nYKdUe8/aLliyq76LLwvT4MAxIVsYc93N/L2xyeHxWs8OaQPe6HLICNNovd3c\r\njcc5+EgYERWWaFFkXELaSqaHFjdPjG4UQuph6N4aFRMKurrlsTlktkVXmE+U\r\nD25NOx2IBEvQUauSn6GKFFXSKaBLXcGNstrTAbbXsRb5A1zGiyHaO0t1idtE\r\nxMMdSfZbeurSsCwXusxQfKqOf7BzHe9qyN2jeAigzHpPEV2h8Fzb2Qtt+QKN\r\nABZcAEk3WV/tKmLHkoAyMRIHoHVXk994G8s=\r\n=0GQY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.4-beta.19_1649332009216_0.062213166930851216"},"_hasShrinkwrap":false},"2.4.4-beta.20":{"name":"ecsite-form-builder","version":"2.4.4-beta.20","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","axios-react":"^2.0.8","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"aaa44c64c94eed961fad0ddea13114926398fb45","_id":"ecsite-form-builder@2.4.4-beta.20","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-azDPWL5bC1YVjTOJyUutum4JrTevzh67GNE0OavD5VQNn7XqVr/usOPIu964tGgOVQ2YxK/VZ9rqNZ/TGox+vw==","shasum":"f27af83474a041d0762d55a3656fa50637253b25","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.4-beta.20.tgz","fileCount":113,"unpackedSize":3817380,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFs8khQmR3Lr92kWwjblAoQer8lFVptOVLFWUQfB8EDHAiEAiOsieuY8CYm43OIP/jTWj7vfnxWzI6j/KgHeey4XFfc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTs9qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqUA//bnbXrgzVLyx5vdIakRFSohj+hALfkXd/CspOHXPJ5K7dB4qu\r\nWnG6I0iUjIoGiTV8pCZHAGMYN3iyF9Qj0jeS8Ij+6ZCiPBoyHJFrUV2xroi1\r\nCm5F1J5AcdHC1tZNTjJgR25jK5Lbx1JHEP1LQy0PjizWNOtJ1JO7fMtfdGoh\r\nsjn/Ug+7BKZ60HY5j/qGAuQZzt21P3AqnDz9IccgAdvv27Mk1K5aCMr91Kr3\r\n7nCs2J4Qd87dxouPWlGe0/gbFVDsFRtMPR7IStvm+/BE2iauYhbxU5rMJijT\r\nwS481mIJKlDEO/Tv92Oam8NirEtLI3PFRsuC5kSOCTEHYovOs7Y2YBjGxVCS\r\nnYiR7TCuxMW0fyBKmsWHms6/fOSr5amB7GlUZSN62ukZVP4sF0phHUC2PDx9\r\nkhShyr+plc1b9fDRfSUOMAOlUYCq6ktPSGHGR5Vz5h9OHKf/y8bYABeAZja2\r\ngb4Co5m2fIufQlaNcAzRASuvyYM0CVqXPDSQOkuVcMZ82d+Ms2pRyaYxmoCk\r\nJbp95fBW93kge3afmV6XwWoqJ+UVqtiUbJjsaweLPveA4v/SBEa3MaUZ1fHm\r\n3s1vMbKZc8zJ6V73rIdpyyC9UW+BMWhN71POfOpGvpNeLAUr6cRwsUA+6uyY\r\n5wnEzn8um0kNYG8GvsiWNRyAinXL6dVrDpY=\r\n=4HGI\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.4-beta.20_1649332073864_0.30880803638709353"},"_hasShrinkwrap":false},"2.4.4-beta.21":{"name":"ecsite-form-builder","version":"2.4.4-beta.21","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","axios-react":"^2.0.8","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"aaa44c64c94eed961fad0ddea13114926398fb45","_id":"ecsite-form-builder@2.4.4-beta.21","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-2v3lMyBnRCeOUvtucOLqn7cW3GpQFXi1LVFgXkB0ISIqlq9qI/6QGr4KfTQa8fNePAAdALqI/7c3IuhWu72CJw==","shasum":"2bc5f2e67a5ea94f401b0d96716c958bfb70bdee","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.4-beta.21.tgz","fileCount":113,"unpackedSize":3817441,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICGiI7WBTTi1qT+Brz1niDL+df/YfQjNphVHj16KhLD1AiEAurMIAEsocddOLGfIWNufUCnzM3ALPqxrBQT6BLhuVpw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTtVeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+6w/9HYpZ6JhcPwnuVzw1BzamDlmGm+QrwDcM9PlrNMvRSqr3yI7h\r\n/urA59UvKok9JNUg87zsP6xaiVLbU5qV0YrsNMSWSXeie9FpYWu3OjsuygfB\r\nA5tBFUDBA42KzzTf5mC0BszfblqxF83Vs8fI3WVQo4+4siPPscE0Qd6ybWJ6\r\nnyZzx5R0vM1Gum9qE2k/wSFOpWqggpzDXlrzZFD1oUl6slFZHTjAEKA8WHye\r\nnDcLUrBOlYKhwD9KsEt/fBZxqATsDO5bYGffl5QirYNkB50D13OY82Dd7xgo\r\ncWidL9R2RLY12URvI+7afmHTime82xeM5wJ4RBaUQor07AeK17FeQPBFlq3F\r\nLMi2jcxv4kEziwP60+YNqdpzpIXUx4ixqAEDQBgF5F4q9bnWHYDEOdvk7sp7\r\n31cdA3iaKSicfnhrikFJRUzz7X8MLDrYVCC8K5RZsmdrw1XPnDVa8j4oDy/9\r\nFQb1WiAGuA3B8pvQCfRZop5YASFje5SFBV6rMkvruBCVKKBUgF+IkZ0/lfVt\r\nvgTFeLp53PWCHwe0XlMyJ0LprxAS4SjKPNKZ4gcQ3nnbythVLaghZxVeuQ2g\r\nUxhByxmHvkSc9d9WWlqNr9P4ZaZiKW0B8Lkf50sytCZTR4DC4IwOeWKFwKIc\r\nfjl2mW69j/X34foEO3w1iZjuBQmdOaKcyT0=\r\n=1gZS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.4-beta.21_1649333598005_0.277660402818217"},"_hasShrinkwrap":false},"2.4.4-beta.22":{"name":"ecsite-form-builder","version":"2.4.4-beta.22","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","axios-react":"^2.0.8","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"aaa44c64c94eed961fad0ddea13114926398fb45","_id":"ecsite-form-builder@2.4.4-beta.22","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-p8X0an9gHXNxTB+TnD+f0B7RPVBZXnS2vW3pOwrhsE9uVdy10Vveeq5df3IpYG7lCsWm9SIn6NNvGcRFx8w5cA==","shasum":"ec7f968a8077361131875c2ebf9e5888d289a3f0","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.4-beta.22.tgz","fileCount":113,"unpackedSize":3818466,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLcfIv7msujBFzQgjggVqddolS8jnwiZTcoxMX7KT39gIhALcmq4eIJUdUjROGctDbQyyX1IT6pUqRy0yztCby3F3J"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTvF+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWCw//YtUwOIqr79ybQAsGCV/BUgC0qJkh1tTMZAosuuOqgsww8lE7\r\nZw7DgjUw2ygy1QCvaddEFGIlFIDaqBrdVZBA4GqqXb28pLx3ELt+PfU/I64d\r\nrADVlZZRwU1Zx0MRiRyjbvrQt3jO7VaDdv4I2MAlb69YG1gB3/rVMI6gSBnv\r\nST0+ddGIAjy3CEG3x8xY97jUhYnJPamKR0KHtztbwi8zPoDcWfKs8XEvxcgJ\r\nD2FSUa+ijJWNgs3iqvssVkUsz0/q9zAMBKxZqbexGERKWTPff1TL7a70TZOo\r\n0tZF0sobFtkUpm17wH+gEvaMIo2Wd0UhM8I9MXZuPIty9qgvMQZN7qLHvQL9\r\nh/MH2I09XNomDa6ZEpy+YiAheDESXGKntPG7avN3o7wneQLU8YZbh6Hj+8pt\r\nn6UsVLb2PgHEhr1/3hebDEzWwESDVi0htkfcqnEKoQMk0gfv6j/MTi+ekbru\r\nuJNjyEgjkIN5beTQmUF+zLdCq5m2goOoAFHxWH3NzBLBVrfeKQE5XmNS92Ll\r\n9L/JLGFBruIw/UPmqElWliCUJs9/NvFKhhXbTJ6vUSIsx1DbV+UfHRBekL49\r\ncPu/SxZZmD+vPQNt/HgqVie+3E79OTXFmajHuqVJKC1iwxjSNW/yQZ2Ma+9m\r\nd2KyLzRH0WIwDhVTTuynnrWI2BUlGyzpGLM=\r\n=paH6\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.4-beta.22_1649340797533_0.6911498054816363"},"_hasShrinkwrap":false},"2.4.3-beta.159":{"name":"ecsite-form-builder","version":"2.4.3-beta.159","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"335efbc640908eb68d61d12017d61eb2e0226932","_id":"ecsite-form-builder@2.4.3-beta.159","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-4O3MNqaPErqOdown8yx077jqZDAXg0rPPb1fIl7O0GMaqpNSO1YSgbxflsKT/BbdM1YRo99iD0ZU+2clV+bdyA==","shasum":"05114d49a727af84f45985566f151f68f57fc433","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.159.tgz","fileCount":115,"unpackedSize":4628894,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwj5SHNcG0Qa0qBfBcn2bTOg/f3rQPNuZiUrTQ8m3/oQIhAKGL0zGPZuIHfPhaZd37Kzo2RrTEaDuhEYpig4aoAvFt"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTv4dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpY/Q//dCF2bJnECangkhORggzw4QEFte+j1N1H60VQpn30CDFqTlOK\r\nMcZglGEbhv+hzcRcfJg8Z/WhR1ZUG83xqDHsPofOL7PmNZqlZHTbaHHzULOu\r\nntYvR5fa7+Y/pkvwMtcYQSkcW9nFRXujBq1VanAbNdskYk3CCG9DbHeCgNYi\r\neHnS2hAz6QtNOu8hPXyPzUfQmmQ8qi1uoyu5pWDvwyawygwUQomi5o8DzMYz\r\n6E8V3wzhYLODEM60F5N7DldxPzqR+W4qpbq7gI8BecR1PfrLd/zUJPFUhH4I\r\nI+siahnzLxq6bjQuYqsopOguCg98NqTazBpndUHnVIPzFFJ2y2TowU+EqsSd\r\nY911gvC0SkEHWuF751kGHaREW+v2Vx8we91K7uNpbkEPlIhPLkGPJUZzWbWg\r\nrHNZOByRznfYAeZsrjKfdnE43JVngygBZOVQ1yxJJ2BUlNGVvE6B6XDW7yS4\r\n1ThkrhAScEWXjW0cvWageVijgw8VL3LImbL5uanpM1/fyRacxx0V5rqnyPmz\r\nORy9Ve3rm2Yrq2PwzhsAeSjUDFVD4n4oDlt3YvK91j6ri/rRjPBVxCbr1VCL\r\nDQfr/SDoUOTHKNSizerNgnnWUIniqZ26lfVnDeNntakBvjXxe+C0CmQNODvc\r\nW5v6dAGQ9SWDJoameBeRjfe/x/2e7VJ2BLE=\r\n=YMbf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.159_1649344029255_0.8973327271699323"},"_hasShrinkwrap":false},"2.4.4-beta.23":{"name":"ecsite-form-builder","version":"2.4.4-beta.23","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","axios-react":"^2.0.8","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"aaa44c64c94eed961fad0ddea13114926398fb45","_id":"ecsite-form-builder@2.4.4-beta.23","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-yd5O3DpQExNvYaEzjMmRTEy9KbVmmftatxYV1eMrkbiCXNSUmJ6lSzTJO4lSy5r1OIx07lSkLY5EPUxp6d86+g==","shasum":"3a1230da9c066d0eb6f173ecb178bbf580179112","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.4-beta.23.tgz","fileCount":113,"unpackedSize":3818508,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3sPdjnA0MAWOosz+qLyUzlseVF6wMh6dJMAuoh6MUOQIhALgW6c8SSzE6YLkT7CqlwzfJ4dLOd20XDxtuor5qk0YW"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTwIoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+TBAAhaKWi26ulWBuKXrKH6fHh9wIUiuXymFQFwYvOswjlLJV8Dgx\r\nmLVJNRgs/+55+MkcizYlbQl/Jc3VvOCSIjtXb1SqNLl7C5Hr3TmfaVI9XUNU\r\nlN59i0YJ17te7BJ9EgyAgd4Pry9PHMlHAuc54YlAbz14WFxt96uuLRdoN0No\r\nG4rm3Y7hWHvvntPkeOak5AoTJACtz9nfySzJy/GcESagDBlhLqddlOXjhve2\r\nFTB6pggZvisOUE3pwZo6C6bg0OlDcQ+rtthc3oulO10FYkPL1vdLi+6iC7VJ\r\nBxplhY5cS/WGFZ5Y6/B3dfwe/05EJ/icIWSCD8p1aY8RK18PXaXznV59s03V\r\nJuzVyX0YUvpeTQ8Xd2dKTb1PorzsB83FxWn149Q3ugm9gVhukzbTZREwpSdA\r\nDKvtwc9qag2lCHBFFrpKzORJQKZE+WqZKjNc1AO7ZAzNV2gxxA1oJYjGPLjc\r\neEz598C3WwNg56zJhisIeSWcVjViKTZoWS6B8LRCz0Ro2GJbQkos8N5UGfGk\r\nhmjOP1A3611P+5qC3qxIb9TBnWY7zbfJIXx6IyiT/KgrllsWmhyLM+fPPBD4\r\niYqQ3QKk+j8xL5DUEumUlhAFmGiNDonwFCYpDR82oe4IhIBtW1dOPMFk1Bz2\r\nYxAYtjzrnannFSMYLOuP6t5sh29svr3X8Og=\r\n=UTl7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.4-beta.23_1649345064446_0.05385372847844483"},"_hasShrinkwrap":false},"2.4.3-beta.160":{"name":"ecsite-form-builder","version":"2.4.3-beta.160","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"335efbc640908eb68d61d12017d61eb2e0226932","_id":"ecsite-form-builder@2.4.3-beta.160","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Kh9b9kS9I5jl2ZGkPJ1ovVwxCNjzPgSqnc741j9kWGqoSvlzVxX5MK2uCQI7grwxeKx+8mdZQmhGaUB/F5Gh2w==","shasum":"87a18ac0803257bc13d5edfefbce976fe0b85b81","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.160.tgz","fileCount":115,"unpackedSize":4629011,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQgccMlOBnntT/1kBvAia20PkpCmrbxt0TQfhhZw5yaAIhANFfyPmIjb5/dV9WYbqEleBlRAPrl1vE1uB/BQkCUCIl"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTxFbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0qQ//ZoeEdKmYBnnfmnsH++XaRAlbwpGDeSobo/TJpP181W48GyFQ\r\nlNSoyIadUyGas96K6dKFgHVIsMhc503/1Nyg43S0dx8Riy6wSoycZkr99NPW\r\nqp3f214VmcRf+vELYoCQ9GuiE9/W8v7vWCr4q5LraHccxbqHpjwFwwchau6G\r\n5g9mYUEjm8DfbTJkaeQSZIhkLHVFEALtxd/z14kZZ62h+W1+koyABDpuJlOM\r\n1F/eb8il01eztYzOZFr6aa0D0NaNRZwGvLg+wmjHc1yl8TtHeUlQcxRzLKhi\r\nAnkgpzTjn7jf5JwnpwIL9o5+FP9FBMKMYclsbnv117PBHmsvxDfUD/zKjs/F\r\n6PxB7xvBH2ddAB6A4WJ3WYpU0eDNOZaMiFvMI6WHueNpsMcoFl9Wi/GwKgpB\r\ndPqP8+3xYnPB/yhviO/DpD+R3LYA6nNR1vCc9t2rBrtqRcd/vlFHMIn6xQNO\r\nf0zCzKzuEYRe82PnPhSQeT0BP2aXs40bzK4zfnReHwdEIyLweh8WtzCTpPyt\r\niRC+Hizepiva2lYIb8EgivDl6NeFWSmrvG/yeEFSe7N0kZydXDx779S3vt9W\r\nptqZmvpECk/d6I/wysK868LypG+0RMdJWHYxad5qNk2LzzW02UiRRUa5DpZ7\r\n7E75dN9gzzx5bgohAd/EKaWAhwKez+e6Bh8=\r\n=nXf+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.160_1649348955549_0.709820856741942"},"_hasShrinkwrap":false},"2.4.5-beta.82":{"name":"ecsite-form-builder","version":"2.4.5-beta.82","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","axios-react":"^2.0.8","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"e0e6277f45b89ce594e51c80c2669f7335c18f6c","_id":"ecsite-form-builder@2.4.5-beta.82","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-VN7g0NFuALnSPTNLEBkZ66riLr4xlFRJp8CH4Paz9Qxz2UaGCOym0FwZnCmOxOROOD1rpcm3N7/fe6FFV5X8OA==","shasum":"cabe126642c561c12501b56d9fe1c68fff04aa09","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.82.tgz","fileCount":113,"unpackedSize":3827270,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEdvyppYUpKxGvu96GUeyu3RsKHuGfK5uaeHzL52fE9SAiEAxM/i2kbUv6e4tXn3nLwEkq6qnFWr4BHc58kbFyrr7xY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTy42ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpS7A//ZvVb1e+QTFMLCYr9wM1VOtbuFmPgBkheL1Xyn4TsVhvSWEaQ\r\nMx9c/X73gEHtgzy09VAWY09P5qMfJYAOk1+UAMpwo+GAlIQeDXsUfZP4n8c3\r\ny4bXjh5oyrjYR+66pdTxAeG8bpbXmTULvDd4boibtzWrKfsTvZe/w+XN3iZR\r\nWmEq4LXEr6IqHhej+auu+6Ju4fblAvuc+hI2Xlwz02A9WSka+7CFJKR+IEzh\r\nE64gx2EyuWT6ivTuvRpKgBo0CdTpWC9gdAP+8sSjZ9m2c7YRWurwi1hbRblV\r\nPPkhCijDkYF3x/RgdMCgwhC96KkbAkzll44YEuQnndDQGKwifx2A5vskE5X1\r\n1I1C8VG4+stn/jyO3sbwnsZY6eJSQq5En+T2Dvf4wK7pBMnbpZDRqAG1YeCj\r\nyvYFIYLtvFiuU+NxeA+Z21e4r4YN574eaCxVuumKBuTBMz+9kiZ1sz/nsqvh\r\nL0QiDU8G8mmS6RGRXq9vvYkqTe10dvfNAgyifYkMxvMAUE802MEfe0pxB51L\r\n5I3s2T5gsGSz7aYgtlr3if48SCz44RsLnKXlxsHTSda8Hh1d0Yqxqy5zPYl0\r\n7639GULEQLflzpXAeFyi5wh3gqocvrY8U/hONhAIVJ3k3frH7fm1hkZnZcmp\r\ngRo4Z8b0OY66wecnEhx+aCsbLu8OyDSUU5w=\r\n=CkbD\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.82_1649356342499_0.04820967708790325"},"_hasShrinkwrap":false},"2.4.5-beta.83":{"name":"ecsite-form-builder","version":"2.4.5-beta.83","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","axios-react":"^2.0.8","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"e0e6277f45b89ce594e51c80c2669f7335c18f6c","_id":"ecsite-form-builder@2.4.5-beta.83","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-kVKaxDJLB/h2VuCBBxKqa3k+Tg3hQDeaxTLAWGydd3hBleX9Fyzm+ve/TuAiRlZG8V8NC2uRA5066VSuCO6Cgw==","shasum":"cdd2789f17fe8add844052fb19061817cbeb4038","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.83.tgz","fileCount":113,"unpackedSize":3827426,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIClzBBrG3FE88xNNaPwyTIP1Y8gWJwm3Xzu7mRpAT7f7AiAY9vmtgENqdzv5LSDcIKgGpOZHedWoXwKkntKrMAImLQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTzNxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXOw//aPpFf5SUERtRTBYXJcb4PAlD7ZuTOCgAmYj85yICjilD37We\r\neSufQUGg6XzxR3IslzwSGbMtl/QFHPIUENtGSvN+9RdGS9ZhHxcjb2coy+UZ\r\nXcEosA+tsL2uiYFqtocoU2iJ4YcaAHmsJEg6XHVSY1D/KZPIL/pE8TaPbjwS\r\ncQwvN2KHAN7rXIKMmjblOIQ2X/jc7dtuUf4ytlKjD+j6UHF0NgKKKELwczjz\r\nLxY9U8M1jG5kX3+lIy+rtpIeqfJ/K3qVXZN4g5uPfMZGQf1KSo9oUZQoqhX0\r\n9eXu6nHqFhA92MgfwRVgCFS58NpLG2rT+6HHwN9CtoCiijTID4lcflgX4tys\r\nQqsrNqwXv5H5YzbPTv+8o3RaoEbO+AxHPOTMJR58sQRWkUW/eMzr8vHUiCNO\r\nERRq3Ezp3jUbVIv8u8ZZumKduF5PbpVNijTLe8HRVLqR2ygFlySF/ql3Atve\r\n0y4QWNz4n/s9reDdm5IOEU2tQ81E6nqtIndEW8hluXPfjhDcVIoydp70GtRc\r\nFhvjSgVWx5yC8OEpKQahMX9pbFNcOEO2kTWvr1+sFTXMPu8h12MDYHuSgmt6\r\n5x/w8iUw9A70B8F4diX19/6KDsljfwH9h6oanoQCxxlM7e/ZrKEucvmthWMG\r\ncDRg4CONp2bhy1TtoOde0wQXw9SWuBTlclE=\r\n=IkHR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.83_1649357681655_0.3343611821370205"},"_hasShrinkwrap":false},"2.4.5-beta.84":{"name":"ecsite-form-builder","version":"2.4.5-beta.84","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","axios-react":"^2.0.8","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"e0e6277f45b89ce594e51c80c2669f7335c18f6c","_id":"ecsite-form-builder@2.4.5-beta.84","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-h8spbOz+oANHrMgC9hEzTYb6Ow9A0swuERCeNJcnf0dGn45CMIZoQ7Z8nMOAA4j0hHX8Xn6mXQhq9FdviKLieg==","shasum":"0449d990bbcded1811e2406e2b866c3e4a8ad0f6","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.84.tgz","fileCount":113,"unpackedSize":3827415,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvabkeD3DoPqrkM+fiq5/tSeE2MPwxhctzyLEtz6C5zgIhAN2Pd5HSe9Z7XntDlnQdyipX0Um7CLtLh8iO2XlP7sjm"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTzWlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqElg//UGEw/MbqSvbDOOXr2fxh+pqAnV4NVTTj0irmMrZYMVvtQlPs\r\npIc5UFpF15w1T8fMxFIA7legvse+YFLdAcVsALOMgCgKojudNh1fh7r3xu6a\r\ntqvAIA+MtlDzr4K8B9nrx7BAUuIa56V/PXWDzEsg+26FsAq1O/CS8ER+wlwy\r\nxXNoIGBEpZRpRqjwXPS64LCSN1MKoSUxxet/OH6b9TMVtY9EK4C8JDUHw4eR\r\nDPoXa9kMkBL5ObwJGHdcGfrP8c/3q88S55qgNnKHNjGw5bOSJFIRaOLKWxOn\r\n8p1CdZuSdCLc5sPJLI+eaYeZd3oMtdmrOH+EH55fnzi+sQh1lyCvk9fGqZNt\r\ntxnSSZXEPCEIvfk/DV5pLvu2m0+ej4h9C6Pmycez6cX5TIkkANbuWRuZ6J6r\r\nuzRUEFRYoGn9XTiO6dg9kxx6lrLSUcn79ydJB4yMSH/6+fV/k+3oO8vlzgqm\r\nQ9VJYOjhfrG7soezmf7zVxH4dHuKU33yM/eKARXl/4b4q0BPULeZnSWlOI6Y\r\nofqjegptsWbrgk67BuuCtDyJfJUHimAuFfyVclDoWquP+wyXz3E0AAwselqR\r\nf/CsQV+BOqRg1jrEnX9k8aRkLq689cgLUFVYLaXrw8WygqVHKCrmgeoRKjYF\r\nmIxyFBmUbJuxrUQiadVXMcnvkE0LzgFeuUk=\r\n=xtNS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.84_1649358245736_0.329178064765987"},"_hasShrinkwrap":false},"2.4.3-beta.161":{"name":"ecsite-form-builder","version":"2.4.3-beta.161","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"335efbc640908eb68d61d12017d61eb2e0226932","_id":"ecsite-form-builder@2.4.3-beta.161","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-dKDs5Cue8EVt4+o+XYcAqPdjSMrxOrgODDawI6/EoBbH1b0J0WDBi0ZdisR/JD97njsi8h9pHfcdoh4TaBuogA==","shasum":"90b349c2579c398e16ea8dd6c1ea9e5da3da8c1a","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.161.tgz","fileCount":115,"unpackedSize":4628999,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF6IGcAFgjaEoGYJTARt4KwdlcoSeXAsNjg3YCehh3u1AiALqeVXA4Yfwa6KADJquYKAX1MEEeagHoC/hZXyvONMGg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiT7BzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobXxAAlC3uIh2rum2oYZDzIkzoRRwkfT5k0IDCplKwx3rt980TbsRg\r\nsZDWpr0RQE9enpotKZpC4GdWLJGfVgq9rm1wy9Fdbu0Kgg1pgmKDdKlpGhoL\r\nq27szx5QiCP2Nlu1edMlI1I4UYUNGwOeIUNdkHN5Mg4Lud8ov60ItEelWBa+\r\nFYa5aUOrkg7ZqjQ22KHAnQ/GfvJmZK/LuQzdOijgfFdmM2XC0l3isFpwOwG8\r\nL2XnNYQPjIyoCw5pXabFdXgLAT93vaE2NLwfJiSAgVlxK204mqltB2S1ppCn\r\nlSNnCsnDDaBH9eyRSiR07nuEdBOWeobgZkhWebEWCoPSEaBk6mLiWTTtFWQJ\r\n8q3VdhUL+ZeZrpkErwyevlBB+cnPrdnz1YT3oSkfzwU6oyWo9CTPngthAt8d\r\nAMjZZ7sP2l7LIT5Mx5zGGzTRUOJmXJLMgH5QNNLfk+zxFq1No/cO1lK6Q6SP\r\nXMjtoRJ6s2eD06XpGaYey9npyInseesR1KXUQJlr5+wkq8g5qqRn0eWj902O\r\nImDgWE+ucxqLN6mhv5nmN3V4Y/OYDV8xGZ1IBwZcfMzdACLkAOHN4sq3Jkh8\r\n6CyPBCYoV3Iol1wO/cWhz0UWjIqnd5SsUbZILb6p2gJsBFPj5fg33WB0J/+s\r\nO/LVFGoZVsH4AN1ib+833jFujTckizdbFg0=\r\n=C+T0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.161_1649389682766_0.6091707879404069"},"_hasShrinkwrap":false},"2.4.3-beta.162":{"name":"ecsite-form-builder","version":"2.4.3-beta.162","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"335efbc640908eb68d61d12017d61eb2e0226932","_id":"ecsite-form-builder@2.4.3-beta.162","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-+g9XFZsA1f9cqDkQo4Okrz8p/MrjV4v2aWgd9X4v72Ew0pH2QhlmjwX6/rKzplPD89WkZpxAW7kz704QT0W7IA==","shasum":"9f825df72ede7f4e55c752fd36744bbeca1026c2","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.162.tgz","fileCount":115,"unpackedSize":4629365,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEeIvspEHHsO3f5b39Z3JNWUvLKoihp8ykIJlquSLkfoAiBqf7FOJg3Gq4JsSfFhI/2HwVVLWIdDHA+0mNmvcnkW6A=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiT+vyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoeuQ/+MG5+lTPecq2gLj/CE2466BcWU/RjDnCN5deUjdHmuVHtsAKa\r\nENtoG325XNciws0K6Rb0qLH/+nb74tzfVu34MNwfHFPct/HMOuZvaAE4Xmqi\r\nLHmraXFrbaV8MWru87X3Hxoby8EfsyAgi628p73E9YONdY/wN1+262e8O+4W\r\nxvp5MDO5aomGC4OBjb2uajajCQV81ilBLIHBKxD7nDzhXRZVlM5DW8IQY4zz\r\nIfAVs6k3oZsoZ3RilNoOQEZkSLbPQflQ7d6ZFUXriEAgTx4yaprEQCUbnbXa\r\nPsY5g4MGcUbj3FgcD/Ofztxqajgg7hpuZCvvUmcWgzbe1W3QSnZLaV6zp+GV\r\nnWkweHEOtMg6UA007wQf81uwQbJo6AFjI9is4gi9ceBHe3IsnKr/GIgm9eN5\r\nU0a9Empc3jtlW3N2S8f3/TtfEjiQH+UZIXVUCdmkvsKmppe/kgxUz926pcGf\r\n/9eq/FA/MSJflmU1w4a9IdAVz0MXCdADKBrbGu9q+L2L/8X3F8gQLW/kiSiB\r\nsRhoEOXCjVPpsR/uJJkq+gvcsVrjUwz/hTlR3ROpecwzdnDc6xFx7N0bm57Q\r\nL/TqhSMqCsPia2mor23yzDblIx0MIv1+d8nGnZgBQ01wO3wCnhvwBg9EFSGT\r\n3h5EtYUCq5Rl/cAIr0gKuoLQnLkw+mBtYHw=\r\n=5Hyf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.162_1649404913819_0.717711168593921"},"_hasShrinkwrap":false},"2.4.5-beta.85":{"name":"ecsite-form-builder","version":"2.4.5-beta.85","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","axios-react":"^2.0.8","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"81f79728000c4842187ab5d6a24eb3ca47199192","_id":"ecsite-form-builder@2.4.5-beta.85","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-sMVPGFERHKQaIxjw1M4+W3y2JIn49VXKW77a4PY8kkDxiBycbD5DfxAFx9Pm4aRuo1t2qIfICOEtKBlOVsbIRg==","shasum":"a24aabf219bf2564ab77aaf221c322a1394b5be0","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.85.tgz","fileCount":113,"unpackedSize":3827450,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqXPV4aji6ip6hq9mp2W7x+gsvyTcI2sGCTF0m6QdLWQIhAPZ0RC+qdqWB79HK6QL7fsj1HxnsFtnodgbCKzFF4HT9"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUAB9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoeTA//axZKpqhiLdOGdVw8iEO34j89tFsCnDHbJmMOqR99aZ5vNNt4\r\n5DpA5wpvKKnLio91FN2gP213JLfsYK5FdUqfzeoHhF6/Rm0dLpn454MFIWjI\r\ntKw6ZrMkwf9QXaG7db6rFkwavn8WwxCCqMKVLzf2CMZdamGOJm3uETkVtw+Z\r\n2nuvG1AcjSFRy8Ld6aWrJc58BTNOTz1u9OwInNtRSgf8gb6RXupLq6yMX6dM\r\nvtfgeThGX75n+OyuTxKnMKiFoK1sWq0fE4hvQV0pHn3UWJI48ed4yoo+V24H\r\nsOy3NTm5Ae24KlHf1ZNJBA3K8axJNAsrTgPwCMQN2mMGegxqTF8M51sRaj+u\r\ns6IHjjd+YoBujxybkMux8jcsGKzz1YYdFIf7ebeBSoG/aGGTT9G1RgDQogTn\r\n3oY2ELmoRl6Ol9Ev9cvuMu0Hhp6EP8+NnNQInmIttuCyeSmbjD9juzOT4HhN\r\nnwRWU4TbhEJyCBfHFt9p6vSBFTxVgjE16fXavOKHDUaFfoMXEfAQ0dGdLGCZ\r\nwdn0U7E8qKBHE1xLvV6EwMrUDX83Acw7dKHLnYlc3VwFdEHVJVGqd7d/9os4\r\njWKynOwHgHQV5YK2TSxEc/QTP4n7xMGfFF8t3KOTc5TRNpzsu0vmxZNxRCnV\r\nX9+hqVgnGX3sbvdAplCjvLGcYt2CN8qkxFw=\r\n=ofTu\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.85_1649410173308_0.41885756374139693"},"_hasShrinkwrap":false},"2.4.5-beta.86":{"name":"ecsite-form-builder","version":"2.4.5-beta.86","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","axios-react":"^2.0.8","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"4af86529b39e55cf197b7f6908d20e2d3ebd2a0f","_id":"ecsite-form-builder@2.4.5-beta.86","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-kcKWVnLDGtuBJ2xatFeSaI3bDUNLl85vUoA+71xJ1NVnm3K/3iAnqxi/ASknxe8Z9B4H1F+cZn3A0tyTSpBoRw==","shasum":"9a541a5ee23895c241fa5f6c817c1171154541e6","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.86.tgz","fileCount":113,"unpackedSize":3834609,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8wrFtRg2k8tHWRQ3LPEkuPcXmz4kmgA6mrk5YlhfGUAIhANg8m+RC+zw5Zsbn1OaCxf12cKJpzhPxjnuoY6TkMqZz"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUB6/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDHRAAnhaN0iqxpCi+EngB8RyxpAhQpCxawlRAPKSRXwNBbPRMRgcG\r\njCw1QXpHGmPoAH5GNLVNYRJAlti8AgPgFT01b/xojCEssX9Y4/Qn7dJ9wl33\r\nIByCCUPHKBbVoVSpmzFuAYLFl8vWfOdmv17uHFrfeDtcXYo/zLFkZs3TR8qw\r\nlOSC5NTfDEB9ohxnAOn4SSaChbAD+lDn/E5/KD7ehEiUyEPj29SkRKkS/kIo\r\nGIuLHnxPHadk3zci8nvYZR3y0sBOWDQY/SyCmYD0OzDA4CsPV5pPyJ6gfzvo\r\nULrW5HxNtp7ofQO3c+Pvd99fA6O+MdtCS3StyD59TEx4iwgHYeOLzpGh5iiw\r\ntySthEb/pt0A0v2iHM8lby4Da/LbqOHTl0dGHYG+BtEFCUnh+uwPhjVQuA/p\r\nUPxsMxRhejVZO6YL8hSnSzDbQFdX97nM7F7iud8imKd/HSdi/rK6rhip4cbw\r\nrbr/iUEKoQGsSkb23CxOdwm/VorcfF9ps0MJya2BHeE4xJTvirfnQlRRReht\r\n0pZXbxfKmdbx9jcYvAAIw3G160MTUrb/E8wZbFLuzVGxGO8Pww+uLs+DeFaz\r\njYQ6XzC+hHorEubPOsRGHmnY7JA7Gxuiz9xUCgylD/tPNtYeRYzqkI6EyGFE\r\n5VFAIT3e15c2DKfD2W5wz+ws2NQjEQK7mhY=\r\n=Peus\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.86_1649417919059_0.3687628224727624"},"_hasShrinkwrap":false},"2.4.5-beta.87":{"name":"ecsite-form-builder","version":"2.4.5-beta.87","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","axios-react":"^2.0.8","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"4af86529b39e55cf197b7f6908d20e2d3ebd2a0f","_id":"ecsite-form-builder@2.4.5-beta.87","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-IAGeq84P1bLxuAI7bpi1UwlAq0AGBv6J+y2ZZyaDWEebNLyr/YgIH7xwG+YeqZsmRd9JeoG9FWsLewi4ifQ1Yw==","shasum":"948999edc0445c93b523f9b319c5ccfe4dfd0022","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.87.tgz","fileCount":113,"unpackedSize":3834783,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkmmWmi1DkYoQNBql9NW9Bqg6hoYDDmnX+UxR0+OPuXAIhAMDecA/AEvudomAbmQma/dFH+TbzgqsT+9spXAGpQNxj"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUCaMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo42g//Rpe7S+0X/pEvSjkGxXzxvE2A01F/TxUI52r+kI71iICGvNL1\r\n/oQ7rlettu538kcKG1A5WhIZAnHCkUd+sZrF11Zn/wrgg78UK4Ak9aSNo6SY\r\nvVIM5+cUV742r1XbanjQ2i/zlGyxGYFHRBbM/hVKUbDOJwu29U1T2wLdvFF4\r\nwlDUrtsqIh76eae+2VcBbZupb/c+q2spD8fgn9cZWokOLN9vSqwz090nXLnW\r\nQD4vmbc3OnH4SDdq36G/ATJx+iJnA5FO2jmd5EU3JZEYWaYi4EKKG16Z7YCw\r\ne3W9tPf3lSj8t/95XJJPgRvgFBLJFxOOgMW/sa+TdJknCaC4pg3bb20PjTSB\r\nB4N8WD7O7kDfVDe5gptqlRIg++RPqJPrn2z7fYm6XiejC3e4A+NgIwSRfbRT\r\nuwCp+5RWGuNkFINy+cQecot0s8wQLe0SHniVOEIeV+fVK2BXXTGmg8ITQO1c\r\nU5V8Tnk9Qd98bjfQ0IZZnpm/CD7ytpCFKrNAySNV0TiR30sI2o+jhRug6WxA\r\nez07rQLio3lzNW5E89aHQ4F/+qTkoi2yQ/JxMkXX4HmAKp+Tapa1yrH52Rqx\r\nL7iZH/uoP9JNq/3qzJfCX7fCsWQVHOJXouktYVKfbUjZgy4mkqg+3CO0dSXh\r\n/53po5wsItTpbKTc+zupQ46sDsoqH7vmtP0=\r\n=xYsI\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.87_1649419916686_0.18300503711548655"},"_hasShrinkwrap":false},"2.4.5-beta.88":{"name":"ecsite-form-builder","version":"2.4.5-beta.88","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","axios-react":"^2.0.8","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"a15cd8b52c7cea96746dc4019fe72c4e5eb8b26c","_id":"ecsite-form-builder@2.4.5-beta.88","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Jdzdz8JamgFmdYysGC+Z34dL6Y8cv5+QTUw9elRmI1hHIcJbKQCODUpsAEQPQPEfhnRROLMFqer0aC5wKbGXlg==","shasum":"16237bbf0dc72fcfa8cac8bae80a0f22994b46f5","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.88.tgz","fileCount":113,"unpackedSize":3834873,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkkBynSemFrsmiGiR8lsreNEWLfFe5ScW9Mj7ckFyC8wIhAKzeojBlpWHuAIP+P1zy1guQxmqFNAX1Co7peUs1tV3N"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVFT6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhKxAAlmvCyrub0zsvAxOX5DpCE3ecIXVMsw2D4ffdh5UC9zoeltn9\r\nR4lQ0BoAPeBviGnR2y3rKL9QJYqWH2ZZMhY3opjE5e25sc2/YUG0ONLwUJke\r\nxbp3zRJJeYWJdlRKecCqb1SgEUC9+VIp2R4UwU8ZkKtsuURpJ8qxMDTUMFZK\r\nHbV1tvz5FrNoJknlBjI/EsMikiU+GRz7uVn5RbqanA7U0oBTjQ17UwiV51cb\r\n459hdh+xxSp81w77EvoJ3R9e5x2T27Hty3+enYwZy0FesDY7IkoEKmduizqn\r\nTqCjVgEXKRhQr7Zu3Q3yuzqMsGta8/5FAMPFzTE3hq+B6l1QVz+9XYj+A1Os\r\nh+SYJ6hsZVSHCtrfs5WOlrUaZJS1nG/+Bfv1cyi5NAT6l9tkgC5d3dR/IxmG\r\nxeSGD0VvHCgs9kZ7JIAN+i7mQFhW2ynYJUXLl8a4aK6zaxYvTgVwjh5YgF6i\r\nj933RQz1S70bEgv0lrVmidd0ijcPbymfcFFwvp3t41Wj6QfSY3O07z9CkawT\r\nHEut6/WLLwKvupulwLbiUfrUzhQsDL7KUpKnQA2j337mYWqkN9cfAWu8AWAF\r\nxvpNaPNs+psNppxEH97RE8VlnSYGHsNgHA4jneRqUo9zS9EyzPLuyzz1aZ2p\r\niPhSLh+V1QCbaET+ZM94HRY5Hz4buPWUDxI=\r\n=WnlV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.88_1649693946562_0.25675625805801583"},"_hasShrinkwrap":false},"2.4.3-beta.163":{"name":"ecsite-form-builder","version":"2.4.3-beta.163","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"335efbc640908eb68d61d12017d61eb2e0226932","_id":"ecsite-form-builder@2.4.3-beta.163","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-9owtUIl8WXP6XWxK8f5Ku2oPPttn2ISLmQZ/KNCLzf8hxD7FAe9a8ncYV78UMMqMrAgT4FA40NtqS7vNMJ4vcw==","shasum":"0cc6a905f36389aec14aaeb0109d21025d3c97d1","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.163.tgz","fileCount":115,"unpackedSize":4635182,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEiGDjg/YesxMlOpM3mPtndKDl2ytZRukN0QbLqb5IfgAiEA+znQQLfdXPoAawSQuKJrVrh8icf1HiG9ns5j+tTq+0c="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVUGoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLhQ/+PPPi7LsYsmYlVYzp+sEkqQfp1kvb3IN7C9hYhW9kxUzvb+01\r\n/3F+JzW2SSpXkCNiFrsPRQUDZ64ElMNq/cyCLfxe/XQPsZkSmGhvRfmUxHi7\r\nVXiTKlKdlXzJnvrqay/YHuB/Qp76Vh11ZWELoyKE07sij9hZdmxxs2yQ3EEu\r\nnefKGGfy7ut7h4mOar6u1BotaUKgnvTSpnuOJc9GzE4ymH6zxuDYMcZdCx2c\r\n49QN7NacmXJ4sPPU9FcDsMTs9Bm/iBmkx4fvRc7SbeWxzULktxPj+mlqTS6y\r\n1El5WVwgzzhDNXWVHyxjqdfmu4c0l4Zz5rZknl8wC3hZvnoOgsAYRKkUDR6o\r\nabKNU3dMBy1ZaCcKmmfPQXKKUD0QRdPfGAqpTWthQGLKp8MZzdqcfkNyaUgL\r\n4O2E60ohJgPBjEiWfmrB1NFFpfb6lIXPp/Otf5mbq6d5LkecIT9qeP8OTLkr\r\n9pcj20ej7cKwjaXt7mRvL4XOqaj7c8MTMRdzrfN024UzqDCUgD+FJtj5epiB\r\nIDf2XAysxl/ZjWFjSP8RvHCBRN4naoNYs+Fgo8Ag1YzWU35xiURMcBM/TzbO\r\nUB84MGD2l4+Eb4mC2MyMtceegSY+7QJR5xnYPoeJ6eLjHjQREhcuGMkhi2Ot\r\nwDBLUK24nqhTnEwTt/hYq8LH7qh1t7Wq1Dg=\r\n=6HBe\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.163_1649754535913_0.41876154699105617"},"_hasShrinkwrap":false},"2.4.3-beta.164":{"name":"ecsite-form-builder","version":"2.4.3-beta.164","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"335efbc640908eb68d61d12017d61eb2e0226932","_id":"ecsite-form-builder@2.4.3-beta.164","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-0LErjIrjG3OcBfgxMpS3n3f7J/7Se3Aro35+0HFoCavdxa5WtAausfp8/gXA8qHqIQhNzjYApsZe49Ps2kLsFw==","shasum":"7374240742bbccd3a40a079e019e86df0fab36d4","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.3-beta.164.tgz","fileCount":115,"unpackedSize":4635182,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDl6R+sGC12IlmW/VPuEenmUhkQUGTFeaTMitN4triFWgIgCVwt8loF/vrexkgwIomdYLPCeNYAdc4ayorgsRknkE8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVU14ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLSg//d5R4l23+8WKe0X1RMB0cL1P50vu9AOBPicHXG2vlUZlKVyjm\r\nZAwp8kJTjTnrX8UoB++gsMhOUVAoyFfa08jb+y4F8ole98qwL66Y/DO+peHo\r\nYUARKAgYYemcl3VVYLWt8JQjSZ+0kF0gLBvciL/ywJF/3Bhz6hmk94Y6dFuh\r\nDVdRLXHl5m0QpI3lJv4iq05Ujmibg5OSqd1d5HyRhxLCAqaIqcj/UhkN3SQ9\r\nc0gczT6nFcALJANFf4eWMSOKoqVetM/ZRWF+OuWYw2458t+nBOCk/ivGSeuo\r\nmVGh77wPsc+T8bxx6hp4sFX/f7lRyB0zfozgaIM2vW8/F72pZX6MEC0EveH7\r\nbwq5xBJnE3GJnrkdOLzqBqokpn6t7JKH/+rmiaALMw0CTJz+QlsB83i2o+a5\r\naMrzahdM7hpl4JzdEXzlnojPXhOoF5QeP6bVTeq8jCKPLAJZU/Jo2oOyXANt\r\nD8GmTCZUbL5OTRDmF2zCTAjjG9vSYps5BumxjnMhwkLPcGRJ6XV+I0CF0/76\r\na4a2yGXN3+jZigQZutwaA47TuKKAlOBBffdjFjlSa/BAUesNUegCpEh/aY6k\r\nGfrwLCOMImvfK6/lFvHgA2XNH4SV3Q2kvcsjHXqdNbWMT9vf1bjBEfLmrV07\r\n+3LLoXDmwTzGAnBR6UK62gU4PlzcJbtPdcw=\r\n=dnLb\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.3-beta.164_1649757560033_0.2910284487551329"},"_hasShrinkwrap":false},"2.4.5-beta.89":{"name":"ecsite-form-builder","version":"2.4.5-beta.89","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"2789af8149924fc82606597a58c8140e389e34f4","_id":"ecsite-form-builder@2.4.5-beta.89","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-cp6aAKVlbueh8CtCDvpdsG8w/LibzsFy4BZ7soYNp4R+864aOLeI2jJXAve3BV8iVDNN79LczhwqhSaLi23QUA==","shasum":"2198fe52fa7cf548401fa8deabce10f5e99ed3a0","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.89.tgz","fileCount":115,"unpackedSize":3843833,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaqf7wWrr0uENI5rm7bBf1CR2+9EkEPHbu8SfbOo8P3QIgWE7X6ohsSd2m0i0IYpgQcZnckshqI4g2uwyqJWZxWxo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVl8IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSNw/+NZS+dH6t9xvfvB4xBZ4I9wWC8nyZsrGrSAdPNQZK7UofMG3p\r\noq+S74KLekPFxl7xDI+70+4O+TAfVcDSrBPqwGu61HwDHU/76FzGV4hehFNC\r\ncRGfFQFl939iWBSWDxwwm7MlCC4JDlRz5TQdEuzcg45lp6uYZmUZ3UCWugdi\r\nbHT2lUqWTiGBYr+d3YDl6KIljFlyBvcmmgT1FOxjPrQpPV6IDM2YtoQoWO7S\r\nSdwdbXqeRKB/8U3XTWms0SBe5noGw4KbsS3Oq+VPcemO9lcOHdsS519vMcja\r\n4glA3xOebnxlsQ4OgKltFA9rwvGe/HI9LchbAbPMFPltm8pSFJ4XMXJb2Xgr\r\n72uZgHhMvMoHIClTDMOL2YCSqLepqfDN+ykVJj/5+BI4j7/D9nI3jwBfE7+9\r\ngMdq/AK2bDkhOpcm38TNA51EhM3XQjYCM/Z0n+2aM4F5Lgh08L5aATY6nYik\r\nVDMUZRzYu7gubt1fPA23qhDubAJertTx07/SGVeK10zVsPIYLI0FthAFEBJ+\r\ny2TDEjy20RmgH5pYm0mzciv+IY+Fi6ap0Tjqwk3v+pjf3urgjJGu8w8MBmxP\r\nBb0fe21nQH7TO4ixnPH5YdBuVprfo2t2j6VoMYg14NC2gi5Hjj7WJesBs2VM\r\nNtl7ReD3sgMbQDHuM1G48eia4m3qZYkx/Ro=\r\n=VWyF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.89_1649827591812_0.8253225970372893"},"_hasShrinkwrap":false},"2.4.5-beta.90":{"name":"ecsite-form-builder","version":"2.4.5-beta.90","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"246bbba8918e9d9bb99d808e0bc9c5017897f7b6","_id":"ecsite-form-builder@2.4.5-beta.90","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-KNwIki7o8WNpPVnsIf1Z7fVmlFfZ/cMMZ/KDEslU3isPpOG8HpEpMxYOaq2Bp2Aeqf+TT+O8vw01jz+Dfpckjg==","shasum":"fe9f0f85134ae698b5532b9d442d54a8ae506238","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.90.tgz","fileCount":113,"unpackedSize":3843329,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAoORilfkzddxzoTf55B9mRbtCXu15lUqhvIKGExjAC/AiBhu2157k5ypF1+n6JZxYeT8WLht4ZsW81tYYMNduH9vw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVqQfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWQA//eRHKtXOMtHo+DkgHav6/00EsEFKT9D9Cy7Dl5yahxHvuDvTy\r\nHSmi6lgl4GnQ4IxNJAG28RKpK13hVsvukmHBESxQXIOB6zoaWxFjGv3J3all\r\nvGq0kKIe64GeuFZepQTsMLaZhFrcrY6StcgNgydbHGL6pxXOkfVf71JsPQl2\r\nGZ35ozkhn3lU898zN+opngWBAcc2RQo3H8AU9Vba/2Vq2tdu2nbzFIDX2WEd\r\n7aDkRnVOpkVWpEAIYDwk7lQQbGt7Ygf7EXxK6qhY+fvwFGzGagH99S2bImyC\r\nsfjkEMzjmNFs0mJf3iCK7Klrskll7CcvjRDOcUH306+MeSw+L5LAh8tm/EvO\r\nT6+T3Wg863Dnf4VpgJ5oBpF/xPMTsjzr9AFn7CZj0lT5Gc+kzaygBvstMYtd\r\n4RhMeh9lXMB9qlDiNSbemicScOUpWC3FeWoIzukD3dTwuAb1A8IHlIMlQ8NM\r\nl+p7eZtXFV4Su2DnOyFXXevNpklrXchP1VM3AMrsr3jVomjneMRTyF8LO8E6\r\n+bYTdnOJgu+VbpOMd8mgKAFB1S5ia/HSKjZC4iMm+Iu+2I6UbbbwGSVzN7lS\r\nmiFpd+ilzyh0Ha+xvHDsrgkEVg+hfK/4BbVGor+btytM3STNvetd6SCK9Ol4\r\nwWyR3a1dxhmttckeO35gUa5cLekIU0P3Zjc=\r\n=8mvS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.90_1649845279407_0.7096724094342162"},"_hasShrinkwrap":false},"2.4.5-beta.91":{"name":"ecsite-form-builder","version":"2.4.5-beta.91","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"5c5b82ddb826c11266b67f3a2551d8ccb78e37a0","_id":"ecsite-form-builder@2.4.5-beta.91","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-dIkKg8xH6MnE1Kk/kjwEv2gMqkL6u/pdP9YgAdokbocGp8+yz6up40zvRvwd2/u6gRMDdQwgCfsJTVsFHRMYSQ==","shasum":"75b7e2bc54503924a0b971fe3350ce219624d993","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.91.tgz","fileCount":113,"unpackedSize":3843673,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDn0kWIHcWeQaB29YiNM/lTKOskng6qCPLY68mka7KlswIhAOvsjZmNFLn3mI0Qli9WjZSi8xKLSrfVrLzQ6W8A/2Rn"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVtKSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqucg//aFHvYURnpLBFQ0MZaBogNna4lzakYt8iXxI2sstYj7yKiHEH\r\n7p2IA2fZyuaN+lauffMhqTXa+x9ef6waFz0sUSodrXNKEZRhKcimg8f4ifmy\r\noBX7Aktv0fJzQr7BSQkFoOcaXyg1im68H+Aonz8D0uIssY6jsvPih+CVbAqv\r\nPq7lnVSSmPdFDNQqDYjWVW0Lp/jrLWoOYDtwdJyBOwWrOLkT3P9NO2W4/7Tk\r\nabdZdNG7Q6vGwzBvfaczhuhsVoAxuTUthIMoEkXHpszHKYO4zCfKvbiH9Wpt\r\n2twKG/cAiOez/hiGtt1TjN3UO0Q2ko+Rp/F73pQxq5oB5HTmUsgR3IMO7HLm\r\nnN7DJ4quToLXoqmXIzOdMEfZEvXlknBJnRYTHLPdm0OhRDYDrPdah+SSzYc6\r\n+wo45soX2nVG/ATK9zhMJt78TiO612mePrEntvdVA5Nkh4+0e1VbPZzYFyVs\r\nkhqWn59xvbnY+S4ZmMhMi73I7WcQag8XhRhGe0mQiq3eoDQe4mCMOZDamrJS\r\nDqkZ3juyO7l1cb/O8vW1MKAUMmpUk4Zsk06hbocuBk41QbBBxilxq8k5LgZl\r\nRHLyvan2BKU1Ce6bSFlWo3uCbfH/u99OW5xmeIjXQUbG6+FCQbtWTS1CPaEr\r\nk2FhURjXavG1gkSdgaaSqRWRQO5nnl50LzQ=\r\n=KaWP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.91_1649857170650_0.5037464055521521"},"_hasShrinkwrap":false},"2.4.5-beta.92":{"name":"ecsite-form-builder","version":"2.4.5-beta.92","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"831e3f04ed5fc5cc4ebdac99d25f74488bb4e7df","_id":"ecsite-form-builder@2.4.5-beta.92","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-t1Az09hrWQbs3h6n1NoA6kjqcTRRA9pP5jtM8/SyowNtnHu3P+b1IPGFiG/nS9H7f/pG9z5m/z2TeJj1rMjEHA==","shasum":"5fcb0847f6ffb30ac5909567947117a7d0ef9080","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.92.tgz","fileCount":113,"unpackedSize":3844160,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDSgUX5ALGvXIsuS1b9ZcO46BGgPrmRbu8CUUAZlw44UAiEAlRXknrD+GUcb2+Jnr6T+wsdpRhctTByNk4yCJZ0VaH0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV6d7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNoA//YvzwB/1SMVXg4JIaE3w7Fm7/4VcXVu7xsIUU0tEXeSVYFC+e\r\n1CsLX0uF/FE/7NDKOuKUUuKF4KQbRlV8xfEWPodmG/PGnhHqOWG986DSYH1M\r\nQ+kfAwB3jL+iEj8KCHBUgOSOZkSkl9tfTy0kqztR8rpWNT0l1u/10GkeTo5z\r\nBvEbjtLATZDk5k+EbmVFOox9GqanIlfzE+5w77XXHKdH2wwVBt5cBEJtzvzn\r\nmet/0KWawF/YSG1Dd5HGVo1sGSfBouUfSm72XrjVjnx77Fc8QaIzBPPikcDJ\r\nVUfiizILn/4gelTw5zJDbttBFkDCa5YthEa5RsicvTgUJM1uqHs7SrNoHHex\r\ni2hXpXPezU/BxZD0ynRpTZJ/wEv+PN5SZLYLQzsq1u/0SUugL53mWe3h6kj1\r\nn7mqj+CHX4VCAnY6xAByCB51sCZxOlTMOIcd5Ze1uruJP77Wqv5H0t7kX1k8\r\n16powp3+ePJE9CkaflzSPsLz+R4g/ap2rL8GeKXrRww6fo5+Ft/C7nixhd5u\r\nuuArr2FknqCiEfMUyFkVJHrEAc1cBW37fbBes8HJ5i6/+IEdC44Tgv/H/EGi\r\n/5Kj8hvILRbRDoQ0fvwdP+K5zvK+5TwGEWJAUnNacPwCj8H0qvGolX9x7vWk\r\ne3Q1o+QDiC84JhR0M9FovJ45Vtv8j39ra8g=\r\n=3Trl\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.92_1649911675059_0.8561374192819176"},"_hasShrinkwrap":false},"2.4.5-beta.93":{"name":"ecsite-form-builder","version":"2.4.5-beta.93","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"40b506449a52838dad813a68392f59a6a7320f77","_id":"ecsite-form-builder@2.4.5-beta.93","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-LjrtwWC/iHwr7sa9FiVSP1k6qmc/rIfp22C9JY++C6AX9CRmEjvBOM3+eoCZ/t1GvXdasxzW3WfneR8Az4I0lg==","shasum":"db4e01d71063392f3e911b50e8db38da5d15e869","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.93.tgz","fileCount":113,"unpackedSize":3829679,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeWg1sWFz5Dn1Jb8VkL+KfTZHO6aZ1ygNblq74cGuduwIhAPLv8krTB4RDVRRAm5Vw9RjpiI6Rn0UlpkqOZGACz7Y7"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV/c6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOVA//WklKbg3eSIL06gK8atomPvEhGUXgWpqQix7g9w4BsGQTZg2B\r\n6g8uqSXXW62tXniLwj5kIST97FxZWnJUXcCtzNOmc99Xe7B/XbiwEY4h7j0U\r\nd7S+6wwY9VMdwLCBoDyiF3XPaY5tr43XaEPR3++Y/ADM8BhM1jmayCHnk7Ox\r\nVcWUPiDOqh5VjwUJ/yh8hH/SgewlvcN/JjjH9wyo18iluHEVOiX5JZ7D1eem\r\n4rAdVsBrCyHIp5MZbsN59+qui4wTcHP4B5V8vF3zj9yJxplJE9IUUXVdy4yD\r\nHAY8Aq75GxntY2uAvS+givLgNA6daXhQTBQ5v1lOw67JQqtGNAJGPjxmT1L+\r\nx0IK0BtuUNGuFdy3hvbeWsK2Uznx5BugCGJrsO5ozLCSmLE5gKtZd7+kxZXU\r\nsGCqI1TJYDbuijWDNWnczojYflyj+xazBZiNfzYthfbQMyTpPk1ICO5eG8Ax\r\nQY+lkTbO8wUroylKKFWHm4MlgMzRnLcYKnX9gU6TbsU6TS1KKiJJud7z5sqY\r\nztxRPVOxlT0i91xEXjvFuXayHAt3PPpjbkU535jlcxs6A6PQcUJ0MthC0qCX\r\nGojGsGwLTi8pFDlVHANjOXXpMoo35Mar+SHMFWUixA3MnT/pCralMAuKdusb\r\nVVLfeRsdYkat+U34X7ocxZ454WAZYwSMqt8=\r\n=8QKa\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.93_1649932090528_0.12689723991667945"},"_hasShrinkwrap":false},"2.4.5-beta.94":{"name":"ecsite-form-builder","version":"2.4.5-beta.94","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"40b506449a52838dad813a68392f59a6a7320f77","_id":"ecsite-form-builder@2.4.5-beta.94","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-1lPQXQZKm4R9pN9p0pITzzvkhHr5XvmpVMg6FXZYnNhdzt2eIqkFcoy7OhcSDbwbOjKeSDYHOiuTvg1OKsxx+w==","shasum":"e05f57842a5671fa1f4caaafd69b919a47c02de2","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.94.tgz","fileCount":113,"unpackedSize":3829717,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFLpn/REVE+jRvd1RWik+WvuVcXRfHyrwWAmQgXFp+aOAiEA+wZ/Fbq79n+7JFchCdOiKGxcdnxB0Q8bjyHw+U8mOlk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV/0JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpi2g//QbjEsh0hwo+e/CyVZsrkXvqMQxOnuewTi7Txv9g1ENJNieYE\r\nDh0GjzswoBWua++vx1EiVfs0RY6jjN6n9gH1s90rTU3MEbPf8n4gE0fPqHp8\r\n9lBFIGRzDMDgkUXmfwZ2F4xmLbh6JwJ7gRTrjqWymqaNNPtSDOxE9lyOM5Ws\r\nI0nDDiYN15YXARYHRjYk+I52JG8OJWpJ0IlbQ/fWsAcycNKKOFz4ZoaBGVFm\r\nyK0fkmHOxkFEvsKplCnS/4x76APVg1JhPzdzH7btV6VSFk3ctu4ggI0QDJ4d\r\nmHYO4oN0J49Kg0qJ7w3yX6yPoTMtX9xWQOir8FnP/8+fLhuGkIT7MaWJIVvi\r\nWiqDQ9uOSLGLzfDBJKd8NVuVyRHnzLNz9NwhG86WnCVV7Hk1ZL8mkdJBeyz7\r\n7xTMubUAC6qgAUSzHav0upMx7IkKiUf02fdCPnOTzkWBwUrKm/VoPRfb19uV\r\npsQWHr9M7w5aH1eh5aXfoaYa5yHpsWEfRHTey0OMQTBgsboW6iyPLfpsM2Ps\r\niNf8Okwrp3QEFZ/GUBupSeu7kmVJvb1Qs8QdefEVvEqNdOwYwYU6jZ1xHTnV\r\nf+yWC+P+ZUQRt1CzmJ7HjkIRbDTK4nfeZUKNdAwotFnm/zze0cYCZLgIXGWe\r\nJvMiCu3x9S0DPwsSeKDgSTaysXtilGUu+wE=\r\n=kOsi\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.94_1649933577325_0.4317189617909192"},"_hasShrinkwrap":false},"2.4.5-beta.95":{"name":"ecsite-form-builder","version":"2.4.5-beta.95","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"40b506449a52838dad813a68392f59a6a7320f77","_id":"ecsite-form-builder@2.4.5-beta.95","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-auKHSXY5qKhpbJY3SKarf1MRHtbYVoCSXKiQZjQz+HR8hfzOzGsk+JSc+ARdf13CsArkpOT9dZGppd9mzzoCUw==","shasum":"85a6219ace084e1b05729262027aef2bcdff38bb","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.95.tgz","fileCount":113,"unpackedSize":3830834,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0/wvBVC6xLz1oAALMHHpPsY80jThHLvje91IlGWGC8gIgcTb7uvuqrqE8rTuCgME05BASavQGvTxAy1LWoIgBFdY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWAjgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXwg//WeqVcGPA5ZNVxfgqAu+NNf0JFLBviXOQKbD6ogrWsica+wdB\r\nmLaCx2jIo/8fdpkGCO4S/HPqsn1K03fxF6tl3JRFVY/CRyaXvEJ+FL2QfKde\r\nY92i8VDpYWMTuX6FrK6c9P+lJae/VGP9nIirhbd/nVVAZkQKriGTc2yIroWO\r\nkaexgDFvKi/iO1hLjjyDxDHts/cTjdD93bZVgYMOQtJeqW4/GQfcaTdd/q6s\r\njGprFzLj7zNWHidXVj+HJ1djmxRuZJtjBrjniDZi4Y3/pF11M1YkVvRq4T8r\r\nytDmrG6zX7hT3JyrkI2BFU9+Nb+bCPH4GWLDyZ9WxjF5IjOuphDzCemmMZ+J\r\nhEQWTAMcdKe1HZvViisugJHIe/OpIRXjRFgDj6nrTKDBVKVK55z3r9edIXZF\r\nTWtaWoYbCNOMnDdat/0zS4F+2vTmghWzLYMz7yMVsWgHlfmTRZY1rupsUBLe\r\nd2IJWpbeXC8bGkcF09fr6Toxo7Uc1JaCya2L0o7JwTySPEP0PC5V5Im9oXjX\r\ncKf45GqDB35LsZbvSPQoGmd5hfV40XCVE5UDnKr2Xat7GfqZ0xxgoY44f5ek\r\n6BerP5pQpzkOSn3w95pNCJohZCyDHydSSM3/eJEGNrPjk9wS1Zlqy+4ItRMA\r\nlevERGZ3ml14As+UoJxSEQRIp79Z0TMaByE=\r\n=E36w\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.95_1649936608653_0.26856614605388796"},"_hasShrinkwrap":false},"2.4.5-beta.96":{"name":"ecsite-form-builder","version":"2.4.5-beta.96","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"f1d2483358658a7ab23faf02a58605183d81d84b","_id":"ecsite-form-builder@2.4.5-beta.96","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-JzQnkTkQj/GuOHXxgHnrfiRdrshQKTsSKqJFvHveHKFM3nWmBvEURbfJ/SDYQ81jwZkZkR4Nnipe6V6yG6uNJg==","shasum":"2d622acf3d03bcf4d4f88b8b44f3337ebae02578","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.96.tgz","fileCount":113,"unpackedSize":3835616,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAlShOrFJMdsPEvhqU2LR3rEzEHU7ZAEJHeEc01iQ3XmAiBegDzdOrcAfbv8ME+MIYaF3o+kscXlQzHPSo+LS+UbeA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWHUCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTyw/+PGY9eDMa88SiAKgbozQ/SLuURNOL21+VCma/L4MKWuGHJhaJ\r\nVa3GXLmO4DhKxJt1iVJ44F8fzFlY0OUcOeHyj73Pzg1krzjA/SPTAGTAk+8S\r\nP6vhyTQfnz4+GNkHqGmbIrWIiduumPvPdFJ2aIzmbkOoHdfehY8EkTVqu6ve\r\nP+mxai7bLlpRpbd6oeqeKa9x5Bx5z9OQrHVoPMsp4Lgcm8JdGONmiJ66El1F\r\nq2Ko0hleHw1U/r1LM3ttrs2rzZP7MFtiWHmyhONR0VuKcCxLOTn0z8p5Uutm\r\nSlfLytuppoftXccBYHQeDJdHz51b/emO4kg7lt/taSsD5XYiD/TKXWdh9kq7\r\nO9EdJUDxidXL4h+qccRBH6hiQboFLxPTkQgnyxvnKw0vwZAd5L9M6iBEZ46x\r\nAdl76SN98kkI5c5WFeT7FeuqNcurDIv2mFQHW+0gNm7uPIgA8f+HJG0PHSeP\r\n8DTyVWbtw9nF6GxiDpl3KU+xiXBJV6jbDeb4/hwY/AgogubOx5Ttw7K6qLvW\r\nVBOkQ2D+S6KrMx2umAIwuGYMhZ5ZBXmHbj6Vc3FFPLxSM0AbLDTwou/6Vh8G\r\ntkayrLkl9SHdTehf3X9XnFiYsl9olHMvWDBTIHybAPM2CVfZcJbW5dE7cDND\r\nypIf5XEJ7mXj824DIbYZtajmmkeDHWhuedA=\r\n=LKA+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.96_1649964289853_0.6167053087329784"},"_hasShrinkwrap":false},"2.4.5-beta.98":{"name":"ecsite-form-builder","version":"2.4.5-beta.98","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"77d635d270f2dfc8036a4d56c94adeba3c40bd2b","_id":"ecsite-form-builder@2.4.5-beta.98","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-3exBWqFJzF0y6tgkb8pIoGKARYQtf56mqlSPvcQai8nbXE7qa+FQqxdIpuxIvTfQ4AhxnTk/RdtSJkI+uQXFng==","shasum":"2458abe727b6fed9dc14c0228e60163fa0518554","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.98.tgz","fileCount":113,"unpackedSize":3835723,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5rOwzJBiMSYYD1ReX/uQnS5P0NJAJA243yU0GbCIi7AIhAI2Lc0iYh3RgNNiFQ/3qbSQw9J1hkQ74sqFinMSkCLhV"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWUvAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPbxAAhG7yQxbYVLPijLI465INzVlxokPz/OEC3jfZIatxaXBjJ9eg\r\n4RKAdllYUGj7EyV4uZC2BTXX80lvJDbF6Y9sDqXZIcxieDHMEVG2Z/wPLeHW\r\nTa1PJXSJ+zB7orBM0x4loWSkLqO2Cvf0R6ftFSgMrbeUri+ukmFxquwtADx1\r\nxbGmWyF7V6grTfwBFY0AR7Xt099qaP1kuocMmcY1/5kpcoEEaztGH9BEsdVt\r\nGM4tBWvjy3eUelvJkZK22j3FK+4iq0phLYFZ9tymJFhzUG+igFipDJGUbnPq\r\nIT+UXlQJv94Ar7o3Bu2CvQItZEeS1h8Ufc8Fqcm8cwxBQBv2wDJVWECdA51f\r\nmTC1Bu90JFSwHeS4WCJB8wqTzpwPqrB80XnW3fgJcTAdEQJA9hOVxJIQMjzq\r\nfXcPKXEkgf4aqVbq2LTZATht2o0W9hPUDBzsXIrYf8PKOaKbi9Y7BZrzydC1\r\nyQ02X4PzQIynLUQcRj+T0xCUTFh11by7qi4prl6TNqa72JOGtbr1BC5wKAkv\r\nqqP/m5LZYMpaUGKCpJ1LZJ+ni37VL7nZGp6CHcrFKm4MgTQxfcI/xlinYncx\r\nQm8SW/oaP6uDJE30K6ieQ8b+a6VyeVd0tc9iCfgoBazHZBtO47U7lvBl34rV\r\n2oBz2fSNs5rVj9PmyN1rBW/CZ4WBnT7lxRU=\r\n=KDlX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.98_1650019263842_0.2917717423459676"},"_hasShrinkwrap":false},"2.4.5-beta.99":{"name":"ecsite-form-builder","version":"2.4.5-beta.99","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"77d635d270f2dfc8036a4d56c94adeba3c40bd2b","_id":"ecsite-form-builder@2.4.5-beta.99","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Pa5pxxinF9vcjtVVJ4G7+MXGDj4z3wxIXD4reAZQR5443IeKOeDfyC27i4WnluPXc+q8CtkM2HwPCKONnzhacQ==","shasum":"24f39c814916217c1c3a949e0ecf174833819ce7","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.99.tgz","fileCount":113,"unpackedSize":3835818,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF1JFV2aGtsRSaSf61FrgsdEer2dtJ5X5AkZQSmGW1j2AiEA1MVH42dP8nac97FFEth47ELRE6Ck2DqtTemPCaasfkc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWU90ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhjRAAof2fwzPhOdJ1QybGRGIQR/gOK0ld9+kDzk6EiOFhaD4BeBxM\r\nLZnFvAoJtUb/ttz7jgn+MgeQnpZYEcLgh7JFYky5Xrb2pi2rZdeI6iojKmNd\r\n6uYJx4NGooYyenAfXDsY6GtwqDWK2Z1Qgss0+MZe7VMwKiGWtw4/JMKlGWGV\r\nW7EPUsxGv5hWE5wnRoWJbhtScNsWUTEjX9Ye9n2qSMuDqDSzoMyzBWpEQUi5\r\nSW7pQQhw6baEQ7DDh+CDYphJ5rDcGYQNKYjVsNooq7mzQqJjtWPOe0kTeQeA\r\nYJiefq1+t2cRpPiSfGgAIffIdyAw2WhftxyS/WYRoCnlookcXoeTJ5FSooaI\r\n5Udjpq0NK1phUwVwEWPGNF4iW/YgkUt84kVSe4HoS46elTrH5+KkkrBbLd7S\r\n2cle7jDhvamODwYTKT2S2Q6v7Svba+rcsiYvpfr1DvkS/uw45htJfifQcien\r\nwUO7zdrgywY/cjxF7GhKZJqlMW4bbazR1CGDaNNxy9NUk+bjvmYENthjtB10\r\nn8ZTsV/acu0FUJEilRGAygxSgopaWnNkRvGwQXtsFhe4Rn0LGZMkr7nBZ3d7\r\noUqNrp1Du5PtZiCcbtV/J40BlgLppdZSqZOPHb2sO6aHcHorTOew56NNA12S\r\njIMl635klmvMs9vX2r7X+BY4xuS+Q+8ERps=\r\n=DEbo\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.99_1650020211781_0.5190262573324917"},"_hasShrinkwrap":false},"2.4.5-beta.100":{"name":"ecsite-form-builder","version":"2.4.5-beta.100","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"77d635d270f2dfc8036a4d56c94adeba3c40bd2b","_id":"ecsite-form-builder@2.4.5-beta.100","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-1tH1f/wiRE4NPheVcdT/hns2YN4qBvteSIj04pTA7Uxreo70n2x1RPQUoZvyAgbh4DkL7nWBXDYMHJnDO7C1sA==","shasum":"d01863d0c451f473e68221d6a16f4e7de33843b8","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.100.tgz","fileCount":113,"unpackedSize":3835718,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDNU+UVAmR5n5mas8fPJTLCbVgfe8EblrA3GYk8bcpCsAIhAKNXE3p5hp56hR7qvjJgKXRUphniQb4Gmd+Hbl5mdm4r"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWVR+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqsGQ/+KSarouJ2cNkm3ayCxV9TuMumlBBheshDk/4+76BY8BjO5Nyn\r\n07bbS7s3tuWbJ7oWtFTqv1OCTi/CfMDgx4Ywrwh2hU2j705JILwqdTBTOIkk\r\nnnjJe3EK72YrYwbQtQJVRHnYTL46ajpIZ9GKkdI4hQEJQiklDfP7HnqR9wye\r\nRfsOrhPIFvYVCSJ02iNjka8U+YjngouLE4ZgdCc5Xu+WUyaFJJ3rzWu6TBaU\r\nG4IGklvt+58NTrYpvXDV1uAmiNPnhYdU+S9hpu2wEVkdPz8e7nG8x0FEtKth\r\nEzWpimFrjSW4faZUIjN95ZQP4wAfBiEbQD72y2hMwxPvxAblZWQymCbn0OGW\r\na0W+pCN/LwfHgsF+WH4L/AyfUu/IM0ZDAOxVd8izmDw7fkDCA1KmAJIFPi7Y\r\nw/JBX8q84RDU7s9LL7/RXzgAxZCm/GS7UpLtoCljY1U9mM1e83145E+EDSGc\r\nmK6U2moPPjjDQ/A34bJ3VdMfgdyiao2S4S2o8h3tw4gc0YlXQLVDs+wmfTCc\r\npK/MqXZBD65mmRvucCEbcGJIdT17VZL1zKvr3fKZxNVrLVw47/UiyL6Q3Bj5\r\n1vQQWBZAR9AbAlEg/4I32iEU7ZaDobgaIUYTjBxvFDmOPvjFl8f+sugLSujj\r\nw6wAxra2t8D5CUiK5Wtzm6NPE7E6ii1gkeA=\r\n=HmCW\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.100_1650021502424_0.2211507979150109"},"_hasShrinkwrap":false},"2.4.5-beta.101":{"name":"ecsite-form-builder","version":"2.4.5-beta.101","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"77d635d270f2dfc8036a4d56c94adeba3c40bd2b","_id":"ecsite-form-builder@2.4.5-beta.101","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-2pb6pzrXbyCOKprRAr4ibdGKZxcGM3aFnm2uzAst1C8wZgo/AZ/v22LGQTfeMgenihWIsOz4EEJ1SQweL4XH/Q==","shasum":"3209abd1c917481852ae966df48f4e602a8c15cf","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.101.tgz","fileCount":113,"unpackedSize":3835684,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBPM9zhRFKuyc5aVrpIdruUPFbrp1Mv5L2BWk/IUQ3g1AiBaNPHiooioYld282hMlbdMr/ObyD4NgKVP5ChRyeLP7w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWVixACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOtRAAobcifnD3q5aipoNqXWJWz8D6nqXWmJVYPAeRCHiOTgRcO6PP\r\nxm24ehEnNP5Ct3cNeaRxubs9FovRrcP3z2ZWFWHDHd2UhdIsFelrgPVW3U/f\r\nOugvnfvqhDLWyNPRbzWZ/qlVMqmalGoqAmn9aawdeuKXoxRFJHQbMnLXMyiz\r\n3IxN0uhzlGmqgki6JvGGCFYzbJAbtanZkxhRvWpvMLVDEG5ZTGZa7s+bWFzv\r\nitDIbUYtnhcc4zT0ME4lJ5SQ+I+AnNuKrCt+sLN3CVbvQv2e10JLV9A3p1IR\r\nq53dO5Nj/hvL/YwLmyP112cIIWErkN3B1YUR+x5ObkpgywnGUj+eLXnWC5Mg\r\nmth8XhT7ke16azVV/MZi/2vT5nF76jUfd8kJ8JvCXnFdAJ/QOy4jzAUGwDBn\r\newLkOlKubEZK6zcX7c6hBKhXEG0GEk33cRhZKw4qZRjW51iGhKwo0SFWsbz1\r\ndsmfT7uoAPdFFemFjaytiluq8cE6hZj0hFDCB3cVp1SwwY/3ROuMw3iDeF33\r\ncoicrTAOznyh2qUUm5H/uK/RIgFs2qCAWM31/0aajspUxhw4CelOfiKvfMdJ\r\n1PNUJZFetfK+rAO+64wGn0P1jmaS/NeJEQgpTlg9NboKL7/5HBGOM1rIMPIf\r\nwAf0MaIUxJiafOxfBwVv8LIH6lQG2VJSD+o=\r\n=Bsiv\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.101_1650022577574_0.6741436278223589"},"_hasShrinkwrap":false},"2.4.5-beta.102":{"name":"ecsite-form-builder","version":"2.4.5-beta.102","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"1e5b576df6310506a1d64ffb5ca2e4fd2f9e5bcb","_id":"ecsite-form-builder@2.4.5-beta.102","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-YYrvnmtn5rDYKzDCiJvpNdMlmXh+qLSm9bVIIlfs7mqptkJZv2pBIy80+tBfm0teq72NL70egU2Z8qqryAuwWw==","shasum":"7b5e055c217382f5c71159b4bf60090773c94c89","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.102.tgz","fileCount":113,"unpackedSize":3835758,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrwXZ30ENtcazjsCa+D+PBF/a2dvPsbEzXT3MskapY2gIgLoZZvPvbzu2ThdSV22HSoHa/2uVlQ8EhoRxwLM/DuR4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXnkXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqd5w//Q5ScIhhk+D/C1nLhD89V6ck6QdEpSkpXNvG4Bxs3j0dBLDik\r\nQNM20Bxc9UjO7bN/qo5e8VshbDSkVdEsBRPIHDIRNt0vympTzqD0LD0mk5Wc\r\nMlc4NkxPyXit1w1xZdJ78XzXVo1hKVqOQnpCMwG2UrtWtIExo0TqYbh2j7zE\r\nvOL5wO0dTuZKl3Cyyq5oiW+A/BCUtkiJycMLKq5XaIR3Itf7jLrz81cYQTuH\r\nTM9u9FrkO+DJnA+MuFwqj9FkzFaQaIf1MIbg4XSYUqHpIZPXBOgzKEo8otQr\r\nl/oM6LAXKz89PCnjKsxQ6x6/cDAHndNZD5dEIEJNb2uAkMlrmMRXk/BnOy9l\r\nRMtibsCwaPija/Lt0RzefVaokffmkn3RHcIjwX1fkogjA44FVYjJ+3AI8Ao5\r\n+WLvrUYauUh17JcrxjnHef1NcW0gOGoYokSzlKtk06T1Ig6NLA5SUViRULJi\r\nqy+cfLZ0Ew2oF1m9IHydZZCJDm5YOisLpg7k2UfIvGmKDeBMOD/lmRBmkOkX\r\nIshOcCA/lKBblwWu6LHN700E3IK2Remj5LaOPr9v8Ckx/APcav5pBAIFd1fP\r\nK7FL0n4239Uj59OPakVeAjpud/xII2ThT7bC47ZiNjYk6iP607EKdZ2fhCKY\r\nwyA5JBPu8qoA/XQZKxPqvRexa9vV+zzJbbE=\r\n=ZoZI\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.102_1650358550980_0.1479459680590971"},"_hasShrinkwrap":false},"2.4.5-beta.103":{"name":"ecsite-form-builder","version":"2.4.5-beta.103","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"65ddc023b47fc2c2aa915889862d2d07875040db","_id":"ecsite-form-builder@2.4.5-beta.103","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-YiZ0mEQjoTY0lOr1i3HuJ3pYhGGaTO4tnD6e474f7fnH9WNZNLcCY8k7d1VxDe/C7wk1QwQlz+Dcn3Q+6OF1sw==","shasum":"3d282529100dd5391cdf695b6d255dfa5682f0e7","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.103.tgz","fileCount":115,"unpackedSize":3837437,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEqegtj0l8jPJ75GjzBBbGMIC1OZ1MAC/raKhciHoLEbAiEAlN5Dfv5FToQ/6ICexnJyhSFck6Ql7G4feZ+3MADegC0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiX9QTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4Tg//SKcJVwp/pKSpYchlhAarMpEgqnKHnim7xUlVxD9MkipnGUIY\r\nXLGL2M/RFOIdVr2zbYzltE6GuTNJ7wOIvRtWGw8nsM6JVGmuaR2bJz19HVPB\r\nmEeE5MY0cBrB3Xsmonf8yk1IP/d2suYlpbZyQ0ZblQtuzJcEHJKi7iNefNWB\r\nFaiK1K0VL/t/bLo637cnzVmwdRDl6p23n/AL6W2nSwtUFeaqFx6J225/6i2R\r\nFZoIcPY5rkGARSQMy6eamrYKaqqa4taxYfk5R4WM/d4Ce3eLBF48TooHYWMM\r\nRX6QC9wDUC++L7Z8ZU6rPyNxYCpYf1KmK09tn9LU7cO5GfFcHyJLR3HCBOY4\r\n2sUZxHq1TpTsFirf2HzqicTRohhI3pP2A8wzXJgwtBpb0CTgCeW8s6n20qjz\r\no5Jl9vD+1yM4cISiJCXMM2VsgonuKmeqDju7RB6+HreKqvADL51M1hjxF5g0\r\nPVNQLgnTRe4IVgE8wwLeKCMml6t1INekj0m1deDuxnaftjObfzgczGwA0Hop\r\n8tXkbEHvX+oOp/ToZt4/p59zTaXYupMot5++qzSHZ11lwLtrzvWaAtooOhok\r\nD7iMHhj/UtZ312gn2pJlczwSSDJ/+hNPuQGQNisxxHiyWbebzc4lgaVO6k7c\r\nCvYFmCdIOSF7tG5wLizZWfqbAB+DGzE2CNc=\r\n=syF0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.103_1650447379339_0.9619882454924822"},"_hasShrinkwrap":false},"2.4.5-beta.104":{"name":"ecsite-form-builder","version":"2.4.5-beta.104","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"65ddc023b47fc2c2aa915889862d2d07875040db","_id":"ecsite-form-builder@2.4.5-beta.104","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-rTY3sKLpGafOxL+TQw4uD9otB1NMUpbhE8mpDPABFePEc2eVQQrIXxtyKeBxJ+1dnyn5/lL0x02at/jhbgTCfg==","shasum":"8a821cd5df22c1c81f732e35c8f1a0c9eb898caf","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.104.tgz","fileCount":115,"unpackedSize":3837347,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIwH/V5QkKpW1ZHUFDnW+VppzsnveKVxO+G7uOMTe6YwIgR+AbTMm13ziWVA5QCDAUXfCysTq7y34WZQgwK1Nm9g4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiX/O5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqqJw/8DMhrATXV91YDgm2G2jyeT1nPr8EM4s2SyqnUAesoOapXhwIx\r\ny9b+hPFWB9AKXYPFVAUTUQxmrabOIwF8iqFqJfjbxOqHIsd3bKuxwyEGpYOS\r\nqzSyJkE1z2RKxFpCw1PBHvJrvO3M01PUfe/E5LzncatAYhIIRdE8aRi0Sk+O\r\nvK4wa+mBNllZElGE25KCQ7La1J+XkOkMFCzkFF5WNrMnBfFSw8kUhvgcr76s\r\nYqVuS5VT6ivwJKIL5sPLDwAI/LxHTpQQp5ZFPJ4RF1WTNS3vEQIMgYFFR6u8\r\nV3bv9vocumTLv/Du5TbYWbt56ZooA5RIcOLifR90DrFwEFo43+R1tIMcIyou\r\nfy6bCpz31Uzdc3hnjjMZ+zZ5qZGl+gI3seYDqHFh1XtR3wby7JEP7gMX5+CW\r\n7RLPLKKIiY8UDaD3OlnZLjahvSaVVDlh6lsBZOV1I0cw/MSrdRHtT7C+hGVR\r\nHyspWc1ZyrjCVNAowwDdpYSpNVlZ1vEG+DbHCcu9uY0vD5HvXe1k9HlsNYzt\r\nJsIrm+Wf/Qrf1yD5CfNmlByFphD3YzXD/QE/vabt7gdsVCtChGx/Lq2F/a0f\r\nmbPOO67zT+EGXSIG/P9kaOpn+NBmDblbXXrnQ670ZZieQY1vSgwbccIhwBbT\r\nVih5EJO7IEvkvPrzW5esFlvC0jZuBipqi9c=\r\n=oWl1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.104_1650455481365_0.9419498314643056"},"_hasShrinkwrap":false},"2.4.6-beta.1":{"name":"ecsite-form-builder","version":"2.4.6-beta.1","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"5c876e290d065ef0b2d39524c26d307651962035","_id":"ecsite-form-builder@2.4.6-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-SD/syimY2MbTGR+c/rF1KdCtDSzDjk04ddZx0aOMvGGLQOkjWikSBOgZfz928NM0pW/Ml/i9pn9gPX1/GeQoRg==","shasum":"e769d8f8bf1e854b74d853ff2f8d9a328e40ca7e","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.1.tgz","fileCount":166,"unpackedSize":3910726,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICXN7gx3FJkkUCQN8HkN2fFoKCpjz+zsSWlp8Z8SBP9aAiA/cxAGy8qQs6y6IvIgc6JTStF/2JbPSJcngyxjm1o3oQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYop1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoC8g//d11mBxOVhvRwRY53WpPvCV15T88DdaUaRhRJZxXI0XvNatd0\r\npn0NViHkKDWRBhR6XKHMghIuQFWYtQel8UKAP9eWWi+ljlGR6GzJS1h+mFUD\r\namexB2rW0t8FZ/7ISHkJ3gC4JgH+lb2/HMmq/ZW8O3WltuH/oCcxaTIfkoga\r\no2OZ/KknoIPJFWdWrRzq0EGtGP3eUlnCGUFSIRZSYGz8kchBWoKVyi31snd6\r\nn4AHuJQyT+c0/8e5VkC+I3iZIveHJIHOF6VAQvk9JBUJpeDAlqCUDWRoiP88\r\nmFwermERCFWUZ3fzjku8l1mcjLv93pZizTqLwX72r8dzv1HRI4+5F35meHfu\r\nen8A1T0B9Id1n9qEa+PWHVt9tPeYx/4WwkflHiSr9ekFZ4MFT4WFMTbCG91Q\r\n09zhb/rP2XnSjfvHtQwodxOjLn5a9zChmw1KPAqrmWoNkSd+5Vh2y42GUJiW\r\nxhXWiICHDkjibxFmnRJ0oHikDwaYWYms+UdgOZBxD6h6Vdf2oEEEAYqxe32X\r\n+2lnI9Kq+AGuFtK2D/rNwD5oxVxTa1UbQGogg7t0A4DZ4IH0fRgnKABSq/Zw\r\nD0gdATmAOefMtWuTnwc63QPDkjXfNFJdvWnsE8fM0YIlBFA2T98yyunqDKm3\r\nsdnQE0HiY7+oKfvUTIGW/uDOGddUdujUb+o=\r\n=tyg+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.1_1650625140724_0.6784063491788084"},"_hasShrinkwrap":false},"2.4.6-beta.2":{"name":"ecsite-form-builder","version":"2.4.6-beta.2","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"5c876e290d065ef0b2d39524c26d307651962035","_id":"ecsite-form-builder@2.4.6-beta.2","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-RElwNpYBD+dZ8BUQqLUJIcI0AdRoerDaw2JTrmFSpxBR8XL5cMvt3bNmkn6VVj2tBCvp1ZOHh/hUz65fENTOPg==","shasum":"cc190bec299b2dfcfc3c47de09113e2928d68330","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.2.tgz","fileCount":166,"unpackedSize":3910726,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE/eHH9xaHYXVgeTWCTE6vZFyLGH2LKk/ehZbN7GIsvbAiAqH+72COOvyppvLXEIwajwDkZsRnqYVxNVzDGYWLfCkA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYo6eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokbQ//cUQcvFlsEa3c1qyBmKW2v+nx9aDYDkbr6q7thvwuBDddJrLV\r\nFScfEsK9ERaH/gIqdF0747EIf6DBlgauOtWNMEQcBd3RaMFY0Eh0xhydGF2/\r\nH4kKjss7xX1mhuI7FCBKYzegAmJRlSk9NHg6wKQuqIJz+hWU/Grl3kwvS3uM\r\nqSFlpR7hS+IuuFp70gMYKcMhe2XSRViijULRPmWBwsKmsOexBOnFzrOU5AP0\r\n78J6H7LFGbz+qT1rSfvL6id5man+1VGUCKOObHAfE3A+MER8SIUYe1+zxLtB\r\nGjqG9pWTzp1GWAIiOBTSEUAeqv3zP2PAB5oGNAyK1ZcADiK2YwE33sOOLU8Q\r\nQloEe43aSxsP+nJTHSXqecKQ7i8X5I/T2tcyYktaN8/pllcdz6awrwSWt+OO\r\nCTNceKf2Tqa0SYCgj4OOouacfunGTcutjGpUyy9phEJZIZqX3Y7yOfDO+eZL\r\nuQzy/xS+HVlMvvvr49L3WxUVvs+pzrtvZdgGlGXb1yvdLxwnRn3P6dDK0ZPf\r\nUSI2ldaFqLiZc0FQK6PPPjM58SGJ+Pe6Stnam2gDlvMTuA2gKHv2D3ukB/D/\r\nH6CFyEtsr9VFqrYIv1h5NRYIY1tLU8pYPZkdNYgEUStwp0GmfK9QRAynLluk\r\nW0t7cLFWAzitsv6Ep10h3Hrca9c0E57VKPs=\r\n=OhT8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.2_1650626205971_0.21827306755848563"},"_hasShrinkwrap":false},"2.4.6-beta.3":{"name":"ecsite-form-builder","version":"2.4.6-beta.3","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"5c876e290d065ef0b2d39524c26d307651962035","_id":"ecsite-form-builder@2.4.6-beta.3","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-B+3OnNEPWx7ri9mUqkGwz+lPeTnV97FuBMVJxMcUhqrV9iyArrhxvkXlpT5kNllGIQJOZRFQq8fgtkKYpkuGsw==","shasum":"c37c5f2aae1c2e061709ff81e5261059ba7b796a","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.3.tgz","fileCount":167,"unpackedSize":4077233,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvpWDqrttq4XccwXlRKndBQJwyo1HJJ5ITEbGN2Fr74AIgRhKC1h9LLi9jpCblNdkg6rALpCnv6oFbiM97AH+mgyI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYpJxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrnfQ//Wx9As3LUOpVPVlfGU7YWp9eaQLr7lmlp9p30jY1a68rpEqCX\r\nXedxIHN3sNEGEdFReIew9oACd+InGxabd+N/wk6vg28H08dpvajaQMDw88Xe\r\nECQXek9lSfd3q/ZFP2eYOCym/LTYej6ZEmFw53Uiug8n4zQzwjH+tULKkOiD\r\nNzLROYKf/zMb/kH/9L1xE0roGtyzdg9rpLh+3ANwUhBTfbN49ATb8I0nOvpg\r\n3e8X0RImerBAunjJmVO1AQ7x/3OOYuaNfKzBHNpBtb1tKCrexDCZHa4tNObo\r\nTDi14GohGxd0z8J3VDaotFSdgB7yZw8cwKGzzo9xAwniTyquK6Yer5l0KcaV\r\nzJN6wDS7TPJDczVYVtjqmOzzTGBiOsFO/0Mj6EJq96vvcjKBZFfr6qNulWLZ\r\nbfr3wjd6U1CUtM/xhwtfI58X4k6PP1Jv+jH0J2TLKEpwF5KrmjCIPXoOnoWB\r\ni6cH6sMbD6u6ij5etlqSa0HOx8od94BgdLDbj2ZcKWE96IAFGFFTpwPKZw87\r\niaSbXJpFBebKbsPFXU5X9oRgj3aFo3IrbaEpYua+C9HMmIDEN2Nf7jyB84m5\r\npC46rgkGkMxwUNN1xvxVQMG5sIXwPIA7Kkz3BAeaK1f5eLs48a6s3lEmeLkG\r\n/pzgXcoSwcisPiWFCLoGJ5/5z1ZQQLIVsaQ=\r\n=bdPt\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.3_1650627185507_0.9679461463091898"},"_hasShrinkwrap":false},"2.4.5-beta.105":{"name":"ecsite-form-builder","version":"2.4.5-beta.105","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"0627a1d9cfabcc0886a9c7e3c878500fdee87ade","_id":"ecsite-form-builder@2.4.5-beta.105","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-p4ZDzzbvS6DzSaqdAaUPnMpwLv382zGjfaQg50NHd2Ylis3QIrSBsWLpaoJyOvxw99G04DmbitPCsLSJD5aklQ==","shasum":"69f92455d48188cc78e91bd2794f788af746dd3c","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.5-beta.105.tgz","fileCount":115,"unpackedSize":3837797,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAQdpIGePYZWjnjULPr2REOimMOsOzA4Sue49JKkH7xWAiACN8kpu9RWNfaYbJZWzvleOLO14CgVwwTqwHsWvuQjcw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYqMBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAAQ/+LiTN0S4pp+oMDF/fX5U2zuxzeiqDnX5jSrizSWOuu0bG3PNn\r\nalIYWa2GRYUKjlk14yZcl0NhV0ZOdIzKypWaauGfsY7q57r6+UpZpFWkDt5k\r\nU2gYkojzcm0Nbj6mRAf34SOZjHxVX9HitKsCOZI/Vw6bQPUtB+jtxP6vMVHF\r\nh9erqB3gw427K/RCTokQNfuDSdW61Dfjck5++GNQw/OWNYkmTSzOyCf+AXy7\r\nNef7va2RP2s7cvu6K7AIbtnnOYC9YTCqh5Mi8AL+Q94S3Yaqx2MDdPJd9co0\r\nrtXJlnmzcyet/osqpUQXpzPZsGYU21zDpW1TuTyOMs6W9wIiMB0xsjVGHcYp\r\ntaBo98Bf7ICOMxImS4cJW4RjOz1EDrHxQOGhrDArEFzS8004lBy+IXljD/vV\r\nvxVdnJnwdnkMZfasAeDMB4+J84r1r9cSW4kG24+IDfMPFvtfXk0bLjf8AqdA\r\nGAqzZLQJqLV2WGJhpCHjQstmhkHWEBSBBvNGg42OR1MPwfTRo4wuYyYlbbIt\r\nb7sC9yKR0TkyGSjcq1kD6Z8xfp4thyTqADLzk0IueyYXdfZN5x2PnCAoZE4V\r\n5E6xCd8vcFaQbyVIQ43J9Nka+S1vgUe2yn0yA/92GLEd5KLaN4xpIkNr87l9\r\njp1EPrVMjSv2zND7rfVvZEslGk+/9JWOkRk=\r\n=zWOY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.5-beta.105_1650631425025_0.16073823918868246"},"_hasShrinkwrap":false},"2.4.6-beta.4":{"name":"ecsite-form-builder","version":"2.4.6-beta.4","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"5c876e290d065ef0b2d39524c26d307651962035","_id":"ecsite-form-builder@2.4.6-beta.4","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-g1g8TfXc6JI9FXkbAfGfMe7UWDZHe3d/86pT/XXOoz+iYQXRUZndaB6Ix+xThCatl7MebzSK0wMS1D9goCM23g==","shasum":"4fb4def8c8f5b08c97bd5d63e4cf85e172475ff8","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.4.tgz","fileCount":169,"unpackedSize":4337876,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHALhjZU5I++b9cmaCy7eirSsOghmwkbIXcIpLBd6YsdAiEAgmp9SSx6P9ZgZkEkc7M2azebaYrnUx/DNoXbqHNVYUc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZQg4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr90RAAh/lFv0BW7WnQ66ux80J9SrwQd3dcxSmRbiF3WG0mU5X9cPd3\r\nQZsuxZBhh+wySyW/KNdzul+dNNQAJWYlUMoF855L11QNZIwzBKdohqG09PFe\r\n0N2+/hYVqLptJm2QE/RfDnizf8OuENABxvZn6LL54SRR+1aSeig/XjntpARs\r\n8kgwWRX2co7EUahkQi4boeO1Aizp0x8jE4aOKLvNJ3BYU5g8VrWxTTkQme6F\r\nJoNw6WLny5+PSWbY1pj6V+/35AZfFnpUlcjhlB/6fSNkaIlC+nmgC8uxMZb/\r\nIuk5FRgdt7S6wbyHU6aFWYgiVBuEV/9ae51XRNfPDlCXXRTQApgeTVuCHk28\r\n4CKSPbdbNk/Pkx2SDAen7ycgqihoNhldsWxf25Y31KN9htqxVLoZQh9B/n9g\r\nOTL9G7B1sP4Gj+rNPiNrJgEIHmR5+RCfB27ZtGmneb/Z973X9gYfB1hq0OmM\r\nhVZRPOP+m2XiGBrOnvxbQnt/1psrnhrsjcwfGRVr+/yMYCUboFbjGpM/aQSx\r\n1Gtkz8MfacrC6gtIBGJJUGcoHl8WjbkkDxsh8JIJv7nf3yB7w7UjARTzOmZh\r\naEnd/SCGO/+DApVViBN69c05xJIRPw1xGGvC9RIWgP6lHGLPijV3eFEOdduG\r\nwiST8kl2/yDsSsMS7tJcQE1LI2iUWzSaHFY=\r\n=SBLh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.4_1650788408345_0.219893550323081"},"_hasShrinkwrap":false},"2.4.6-beta.5":{"name":"ecsite-form-builder","version":"2.4.6-beta.5","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"5c876e290d065ef0b2d39524c26d307651962035","_id":"ecsite-form-builder@2.4.6-beta.5","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-ChVUrTcgES96rrJ1pHmJ119olqOFiJC952aXA5yQfoq5RNdp4JkNo8CpM2vEwVhWtSpt6pW6WurIL2wHcAihqQ==","shasum":"6b04d9a506d6a929fda94a1d154da84b9cb096e1","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.5.tgz","fileCount":169,"unpackedSize":4320278,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDv5BMApeMGjEMWt0XNHC0OuZ2xiulpu+z9MwWM3wLRSQIhALei43dCtZ90SRwfI/dfGKTW2vzGbYX80lWgQLJYOom9"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZUWMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqERw//fQWvxGPQZimugYLcLIISPknE6mG6LOovJRSE04opwT6T+UBB\r\nnBs2aFelgCI5u94SlNzNk/qDExdLAdqDJgMBspymiyvHzLfbfJY7YcTl5LuH\r\npgjnFDEpibBPTvfW3j99b5EKcXUVgANMcA/3Isp68YbfBwefJy712EbwRAvj\r\n5DT0/GpbvFnDzP+JDxJRXh0WKzFqJS5nqjLZXBBzfrRBT4VmUdzK1C0nSOl0\r\nFUFSRjMgljXETiNbL9f+fjNgaJj5XBLzJrdajngQeFjCUuYPm4hHhJxg2GvU\r\ni09lWq4XHoxtJCAsyjKQicJz/DCdwTpGqr94N0N+t+Y6w3HVmHYGT/WcfN6U\r\nYzUx3SyOMoKRgGZ0bzPnRz/pct30ASWUL/7Qxa6wvekOlO/3bBWrLpsKR5Vh\r\n6Uo6uua+XuGmLp9Tu036Hpsj7qUJoc4HTqIBqzczKJgwPM5xyyuFRAGdExWN\r\n+0vMVIGobXrJZJybQI8O8QEBOa6JzeIkMJX34wVFqIrxlfMMjUzYodB1wI5Y\r\nLTxMA1peRmFehhNQ+iMcmsspCHiFfxiZO4Nl1HVl6x3uzITSxA/iBh4w9Cl8\r\nXCI5+84oz4qFF6gb5l+0XyxNqzZvKZbtLvQ2BTmcTwbXbjPhmhAIiDGjoRUj\r\n7jgu+V7zol4yUE1bdkqcu1NSvg23Kax+VYQ=\r\n=m3nk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.5_1650804107920_0.9481314592047541"},"_hasShrinkwrap":false},"2.4.6-beta.6":{"name":"ecsite-form-builder","version":"2.4.6-beta.6","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"5c876e290d065ef0b2d39524c26d307651962035","_id":"ecsite-form-builder@2.4.6-beta.6","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-ifU28GoCSFdMNduMoNTt4DvnEiHhIUrBfQ/0jml+lL2Mam0mELdA/UQ6F65cUfZwYsa5Nfu9gGQcFPdv3ZBBPw==","shasum":"08303f74105519a5cb956028bc2336ab5a017984","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.6.tgz","fileCount":169,"unpackedSize":4320452,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGuDQ49rXohP43wX1sAr/QtRkgokfpkc0iHS5mscT9dgIhAP8qY8SSsR/AdPsg89LmYacrNM44irlT3dlC6SFKBUNm"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZVtIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqiOQ//WxOrneY3VgDZSr+8q3FNNZNnl2EXD0ybvDx1MuOubEOY9Xkr\r\nnVGfaxDT/ZFL33l4yQVb1ZNL1lIATUyBNBS2eHzelgdXc82AiGQvDcYCvQLs\r\nDpVMQcwh3geBFw2VFRejIPisa7uT0Yp4CxUyjJa4r8GVmGFniXU+0hxyY4ZD\r\nP2OTNcSPHnOKIDcZ5xB1zkX77e8TlcpZgDDaE8uKfetKPJzDQyM7y4n1F1jm\r\n+E/wpM7Rd78W8c7cGfIupKBE7hJatkB87A9lB4Lg5uOHSeKmKFyoFUuy5OGy\r\nSBFCSVvsCJQzdROgz/PTjfTcAWejWNR4LjlanBGso8ifmE+S8xw6U1Z1htRy\r\nXDNfKL0l6jgc9E/liPAS9S+JbqjDdC4W/ssIIcWVVX8azsApGAC52CSm2Rv0\r\nt9KbBOATbEyZA+s6k+z5SaY8t+54zwoFBFKxG4dBPjk+UquiY6xLcEzR6Cnb\r\nWynylzv5XTo6xSrPvHe92aDptx7yFNAux1gxEbpXTVRtCfplm2oIpBirnIRD\r\nNdCpBWBpzkEGSQq9kJmOGZvhQYB/25RKvGRZvsN9LLOkJz5w0ssRcu3Lroxa\r\nEFLDmBbL3ErhTd0cFACgHSj27eI1al26DYfbsvguXlW0Rb3rjdSMel+IRUR8\r\n9jCrnPiNmaMc5g93wn+B6Xq+fu/aqf2/FFE=\r\n=avgP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.6_1650809672136_0.927071419960751"},"_hasShrinkwrap":false},"2.4.6-beta.7":{"name":"ecsite-form-builder","version":"2.4.6-beta.7","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"7417be093ae044d07d5a535fc6f2c28c9b5e2e4d","_id":"ecsite-form-builder@2.4.6-beta.7","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-9esm+9aabWIDd1GQ751o4YCXPR92dH1pPx25fWM9WOi4wjocy6RCM6YlIIT7eazxKjLpBUjp6pw+/TMlvegDFA==","shasum":"bc9fb903017de2500c791c2d9fba56da2eab2e78","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.7.tgz","fileCount":169,"unpackedSize":4320942,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAtLO4CRF1KqADHJUEVdFlg95dXSO+6D0oM6K9gP1UJkAiA8NegS+DydQ9NO4mPIjoPsWj2d1Qjdy8JYDofppp6K2g=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZYiUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpt+w//VtvgeXAydmCBJx/X8eeS3jChMcrDINdf9MaDhmnoj+AJCqtW\r\nTDpp4Q8tfE9rGv84jqCxWwWvN9xSEnP+PVF+1Hl8FcMc2wwxgfwAqSb3NcrP\r\nH7dK07ebj81lvIbyL9Gr8gOsonW4rGNm2jlr4DD2Lpi4NQ0tTb9B8DQ+Cxiv\r\nru6HGgNu59TbiKD2nFBi55/60wGh4zq0xp9K9feJ3a+YdBVExwf/DpCEU8y8\r\nyqMXE4dSKQVB0X7Ye+V8/rkNu36px5Ip+rji2yNIIbGt7IdkiBWwX6VLwacN\r\nSzKoKDMVfwr+hHyhndl7J+haFTHe+hhUXHfoqXTxwJL/U8o33MqbH09Y2tRz\r\nXcS31KqxePr1SnpMhuAIXm+3znyz9ZPBWmPKm0czr5yG0jw+9/cA/lq8nk0y\r\n5PE9XA7f4rBplhmTzhFBQan4JL9Z/HnzOCcnGltu4VE7sapA0v0XusKPhQT6\r\nTvvyyWgCCwGiwZ8J4NjdI3rSHaBtL3+PlCrmjSQBa052E7sc2nVT0M/GXcgt\r\nICfoioxZPsuVJahP+EtNeq8eIFJ1gPKUEgFSKVYJ1easCpMvXaS056rEbTZH\r\n0uiUYDU/aBX7EBk2lZBKIjxEMtJx9vlwwrtq9CM0a7+Z60VKCRSfn2z9TFlF\r\nx1lefw7+bcGYeMnLrf9VFRcPmQrqrOFGoF0=\r\n=D6ii\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.7_1650821267787_0.04368591782783948"},"_hasShrinkwrap":false},"2.4.6-beta.8":{"name":"ecsite-form-builder","version":"2.4.6-beta.8","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"7417be093ae044d07d5a535fc6f2c28c9b5e2e4d","_id":"ecsite-form-builder@2.4.6-beta.8","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-0EE+Oi66CaIXsepeSMIgkbTQ8kc9t3bjkTV60TCqPi2nsCecdo/ePuu8ZnuJhiMDXl/KXwPIRvdweORAt+ODDA==","shasum":"a3462a7c115be8b635aac8288a544d95b3fc3868","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.8.tgz","fileCount":169,"unpackedSize":4320940,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFop5FY9IakAGfTDTh6oTrLNjEJN+WfFJwOBcxXHh0mRAiEA5EQIsPysrB/qU2+MDBP8w47+ZDT5uhMqZzo36KSUVt0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZY1NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMLg/+MPs0gTcolVE54FnKUPUD0RbgaUaOoT6QcMWx+GGj1L7pIS2e\r\nxbKHbYZthBlUsfCCTNA1wcXBlFIFAPENFeDQG6/9+H9kGZrbzfGqwSzMm5yH\r\nCPTtuv2wcjj+hxa5paYxC8aGVzjmB1cy+/6P7ESfcYgJ2XrXcgmDN57pHZc1\r\ncMTPy1d0yqaDnAW7Lt34I6QSPo1PsfIbnO/HsavEGES5LKCZUKyx5t3wMe11\r\ndDE+MwKqaIcPuJwX89EOEawes2FQ0Pq9/lHzROmAttxphwu6gkKbhCBdjTw9\r\nbcyyIDikaQeX5YuGybl1wOcYuf6gTAQyHCBTnZnMgfZGn2c0DBE+I3aL2dcS\r\no9QC9osgLj8E5TbFVfGwoBstlzXTOV/F03MBD06sap/1BELtk/TQzx+6sXQl\r\nL1Bmy9//t33CpW4j9vBMl3SZmnJqRw8VlT5PDfbk8QVb8vTMOPuuo3U97Tya\r\nrmOjFkqEpP0e5OEKIxUNYuaMuV2CYN4wCp2ZnWaNis2QDh33bapuC4GD9dGB\r\nHgmmoFwl9dJfUyn1TxINxDEkrpjibLxNpVoq+xqoNvLbOQdd8ecebQcsLpeu\r\ngXs8RgwYbbBDAlbcVWHIUktPqVtW6aAPJbhvlPfSPGsX/a9a5Aovz7SVlGgx\r\n6mDO2RctviBNh5J0/34ChrT0iUtaCsdMbcA=\r\n=EHH0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.8_1650822477591_0.5127414484031128"},"_hasShrinkwrap":false},"2.4.6-beta.9":{"name":"ecsite-form-builder","version":"2.4.6-beta.9","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"3066d7dff84215d6fd99c5e3526d36336b811f08","_id":"ecsite-form-builder@2.4.6-beta.9","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-FrCqewPUpKdgxLlCmtdY3z1O08wd/6JHSFD3Q6+slZDUJkqcUzKAwwwa8eSSAaI/DqLWprZJTkoC9PTxKXAWLQ==","shasum":"18e26ad4d3b03a9917e22aaae22ea71849b3dfff","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.9.tgz","fileCount":169,"unpackedSize":4342683,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXFDqrzemAIflQ8kn7Z/7+HiZQVyOlcSRdyCpxLtwowQIgfOUrnqCmh+I4M+/3xnE+C2iny1otNegJ9gb0xfedXHE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZqYQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNlRAAkc42Nlb/HlaHwY1FC18/rwpXE23nPxF5XllVr1Z7c68yzfMA\r\n+6ZPPb++Tn+Owk+a9kydZq/FrSKTKxdpzgqMu+eipLWMsoFk/9XX6I/Le+Ng\r\n5dxG2M9Yq3FB0vqDKcDrezcODSpkjhVXB/C7V8/oI9b3ZXRY+GnA+flRRPCm\r\n7gDEuBRuk/OQKGZJ6ZG924//pNV9gF84I9+w852n/uqPKKgIJW2qSA2SBYaP\r\nWFtFi6Z9kC8r4XrVpO0sv+LeNOLNQovuuDnKH/pDlAbDfCsL3lEpqFYmtAif\r\nyPG3evwjCUFsSgpE1XqJhMSqdnxuXaECcXsdv+qUa65kghMUkKdHwpPj9/es\r\nGpe8I+P+AHdAlzwyOqcmku2lQS8x2oSDxb6EhXZF0Wt8F0LtguDzoMGDQbXD\r\n1Ue0wqYMVKCPBMkNNxtkTz/oK1cekx7l6XbB+WL4PsRUl+WHlYviAOmR/XEz\r\nrtjV8vGywW9s5jtajhcbbCSeTpsdnybadj6JJe4Y84/KRYnXztSlzCd3Mg3g\r\nfeXneVG8tuukvbOK49BdqafLzx3r2BlTSEXhSgjjfggAuKqRIUStNGMVRuhM\r\nTEGv6KlGXIlfUuObw8xvLpHm0c+tnQfvVqS1JIQBWSocV00fZfMp/UmNegWT\r\nx5aNnsts0y8XNyP+CbCJWbG5LRYUbD5fgqk=\r\n=g6g+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.9_1650894352049_0.4903727524795469"},"_hasShrinkwrap":false},"2.4.6-beta.10":{"name":"ecsite-form-builder","version":"2.4.6-beta.10","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"3066d7dff84215d6fd99c5e3526d36336b811f08","_id":"ecsite-form-builder@2.4.6-beta.10","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-HCuy33XB1sQKst1N9GojP1XGdYTbgF+GsIrw4l/VoSMSVqyFQoTHcnDiecknhSCAMjM7Jj+09UNE8uj9K2zNxg==","shasum":"c184a163e5dfc2046c6a0da80de3e5e8ac6bf073","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.10.tgz","fileCount":169,"unpackedSize":4321222,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7fXJVphcMgfIdDciR93K94envt3CeNimoXWBOobnengIgNQ8KnWaMD6SM6BP6j3D7Y1gxEL3ZpGaMqTj4K3yQnaM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZtbIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOvw/9HKxLryyh+W04VlpZu9SdeKAwL4kDgMQsVAZBxJiBkAUI9la6\r\nuFWTDvuG2NymF1ducL379MJ8VMpnEioDVyYZHKM/XHxvskqqwpjYa/hlI/Fi\r\nJ+TYLNGpqMhhOjImDLV45wg4oXi/o3EQ5j1lonVoLqtrYRMOoFGFUUytWm4K\r\nnd5rZAUTXvWyTnF1KCKDg/Gyb5BSTMGihJhxwOEMr4ccqexDjiVNY50ZPQNe\r\n8QukPJIiHphIVpy8nDsK/LzOBHA+wjoTfT3EO448MA6w+M4nwdcpbxpT3Ebe\r\nlvYO7E4lk6I7rPde6VFnBwS3DWejtG3CMZzTqF741Vnzx3IXQqzT4qe49qbt\r\n2WFnoLJPapuRP243REAq+fajDRKih4lV+h/3qfoIozp2IpF7H0VT050zXpTW\r\n8FO3sumvFx7MHBWbKgQsmcISTl5JOhKFlcHKUbGoI/C6PnJdc177ldzT57VH\r\nOCdUW5eBtHGH9cSDrt8/XGaaLg6A5xQIOL8Fa+hr/3dz8YYVJ33U7R1Xavnw\r\npOQOgO2AErDLRjdA1kEcS9mSkGFulgh0D9uH+cvr45HCsk3mLtQ61gzbJ5Pj\r\nF58flqSBnoK1TVku496T8wbSi/UzKZKAXZDECOTPHn/OmuHNYZKYYzFKCkCh\r\nzBZrUyoMJVLdbsCgESUG3tG+v0vtwIYInT8=\r\n=3tmC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.10_1650906824234_0.47753234555923596"},"_hasShrinkwrap":false},"2.4.6-beta.11":{"name":"ecsite-form-builder","version":"2.4.6-beta.11","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"3066d7dff84215d6fd99c5e3526d36336b811f08","_id":"ecsite-form-builder@2.4.6-beta.11","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-t/Fop7gSpgzQHNXS+kSxLcdglGslv3feX3U0UGp7ctpLxFNryavlh/a4wvrDYsL/+6rvuDf2H6Wsn6KR4I4KPw==","shasum":"9b9b8ababf8d972d1fccc041830abcf5853179ea","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.11.tgz","fileCount":169,"unpackedSize":4321203,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDffk9Nz+hbysgw9IrXjFNJT6qhQP+cDiNRhvKmDxjPYAiBvC2F7fMXWcuCCvrrjRZAprAihvDSaMNu7WPtXBxBjNg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZuFKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwKA//To/2b931x9BSQiUE5YEaJHFb7wp5ddHfsa5EQ1Qw+FWStugY\r\nFI87PEBQn/EvUmUA8LeIjCtUvjqlhmJKRsDvBiUyF4qjMVUH+NLJJKTyCq6l\r\nboT4h6U+opvpKKHPLLo2Eidyu8qTRLT07HAtcNA8y5hBOEYeMmZpn0H+u0Pg\r\nKut8RcgUJhd9xPTNwIyYEpty/RuNJLBCTEjpQgzN7fYNz7N4D6zJSYMeyNZo\r\nqhoKNKDZDG5RDI7wKr42IvKK1kae5XYJG1dmt0qQ5fTcEw5z+xJf0gZ0BAbP\r\nqWi0UPGnfoF2ZM1tA16aEmK+lIflaSVQ5RAhSjV/exhuVVSxHBBZ4MeF+O1U\r\n1aO8HNeRM8pVJgmpxZEZ2qmMzBCypGzXcgiqxVMB4SUwbJwNS1sdNs/EnBM2\r\nDQZSKM297ebBdu33qxOupoINkKkAQa/KW16D5m9muc0S2gVHGFb7IBEAk4p7\r\n/o7hCUJ5oqlIu9zDQeTa/gt44QaqMd9W3hb83PEYjgIipcv4O4Lekx36CLaT\r\nAYIkLrrS0paAi9FKFl4Tokt9hscmjztSQiVMzDIQaLWfPZa4gfyYKn57zmP6\r\nMc0gawDRdMgDt9rzgFwYHofTcCod8CvTlmGdlrRPdAtgCPTZ4lHJS9I1zBKS\r\n16eHcypEEKjNozBfzmsqJroHU+nPWwd0FT4=\r\n=znxy\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.11_1650909513786_0.0257412258993317"},"_hasShrinkwrap":false},"2.4.6-beta.12":{"name":"ecsite-form-builder","version":"2.4.6-beta.12","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"3066d7dff84215d6fd99c5e3526d36336b811f08","_id":"ecsite-form-builder@2.4.6-beta.12","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-UOUUGLRYpdjpNFnCDMkXHWQUzN1YlS5AGVEncYMKtU0W6JIcJGNXl1SSpa950Noa9Z30r0ticLsnnlM8b5frUA==","shasum":"4efe0ffdc0ab03e86b2d7b26be18d01578d47079","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.12.tgz","fileCount":169,"unpackedSize":4321203,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBBB4+VzADZ0pJL4NKRrdp8Sj5kFH3PRaf9gi8JqFtfaAiBL+sF5fQNeQkwCmmycqImDwIIQlpJfGRvkGC0yGSC7hQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZ9cGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrr3A/7B+bT6GJ9RwINvrmt390HcoCc7yZky9CReDWdNgTv3fT4G3pt\r\nHjavx9SjiXRmk6gAtiQeqzQ5A7WcjuUf/xNK4trr3BxR76GDx7yl5MClIh/F\r\nW0AFg2GbRcW36nCaZiWteSEBhS7JNnpVEHXSnikHZjeDfst1jA8x4kx3xVQI\r\nZT8Nnrhrmx0mtwtr7RIccp++YcP+PLNhHiWD2s1QoFExo4ZFpxx32Cw0r730\r\nN5AgnxOyAMMf/KXG4dFqUUlGVqZWruvzIuGe2SheMAVz+jmXQTZX+QoTCPRX\r\nOzpivyEQ5gF0BAgJ0zXlso8TEv2IotTBIYanyDMU/UTIXiuuEh1AaUgWn/l1\r\nNU1s/86SwZgLgSXGiHHgaduP5EO9v77/6UNdOTxprMf2nc7Qx5+q9KpJmDNf\r\nWH5imsqFveEnX6VhA9i0lFtSeys0QPxxRH1w0Gp9wphXnsbkJqKSQhYBGKHt\r\npO1f6DZZQEI8tAPMD6WXJJEEDWt9jnEqrYQjKxGvVERlRQDNiuZ+QdLWGoVH\r\nhDav2ONZmb1h+WgiNFfIyVZwmVN3D/ci4gbckqVYCHQstvaVoDXpoRLq1Mdk\r\nVcPyGCrl0kXv5fpXJWg6TGWyzHEKutppRNmAGxLXG4JaF2MXrvCYUb6J8FiW\r\nLBdHF1VWUFqQcT/Zv0EY6HEGBYXiiU/Quks=\r\n=hRL+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.12_1650972421702_0.33595602834921756"},"_hasShrinkwrap":false},"2.4.6-beta.13":{"name":"ecsite-form-builder","version":"2.4.6-beta.13","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"3066d7dff84215d6fd99c5e3526d36336b811f08","_id":"ecsite-form-builder@2.4.6-beta.13","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-odPhcrnFvm/6AkbAAot12LBq09fdA6QnpR+7NI58b2CGrYepyr9kZNP4VwKWcAOiOdhRbjxSaYzH5NkHLSTm8Q==","shasum":"0c50e73d31e0ebfc0016d4faa78033e4a2ebdd0a","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.13.tgz","fileCount":169,"unpackedSize":4319696,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH3Gu5jeT8dmVDbYG85556cfAvy9Gnlk3sVKe6b1wc2uAiEAiTGMtZuGpYHQWHi8/+yQjzsZMZxILhwNRvclpMl+wR4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaFZzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoI7hAAn8BVXtBFOUoIdQiRfg3roFxJnKtt8CO2WXtd+qJPNQwoWp8Q\r\n2cU9doI3zTyCsITM/Pr/W15aZQvVc3FnfHM1VLoBJMiAIObeYMl8MShZSIlp\r\nt5fdfoT2+OmCBsjqSOxHwZGRsIJRmgcpE7EJ+oTsbFGIjsCZZRI3YxaucT68\r\ntxDY8B8u3LWVs4x0Sghq2oQ3jo6ZU0rgm8MaFK5jLbeoCA01TRf70gHDcH4n\r\nQpQqeCD/Gf1ag7we6G6Gqc5uOZRLufaQ2Href/zFDVNzD+ZPTntCJam7JGnw\r\ncNSCjJI+QPfycj0uNA8L8EWIA0mbamBu+LeAPrG/EZVXG3UdAY+JIQdm/TWC\r\nz4EgYjVYLY8msW/LOhz2Ah1PLEk2ibAHOojJP0nmT7s/VZNs1lrHGdgTpvyo\r\nYCteh5tZhY+Q4vYrXHwYLbNV8EZCohNwo+Rcwz7bH0lqY9yg2Y13G+Xn4mfo\r\n0pmXlCf6Eq0+80eNAU3LSCSARowhqpFMSgor0eLAhV2ZbNp8yDQ1uSlvvijK\r\nXNwK5OVn3OppnL+4DBgVtG+qi5MYR6W+8LYWspRVgmY1NSJ9ukMl4JYdfr8f\r\nHNzIf1CahTiGwWndXGppT/9HFb53Pz15POjuH4E5Ej7h9lb7eUS1UJThi+Ou\r\nUJ5hf/MGC/FxqMdISDGL8XfE9Yoow3z7O4Y=\r\n=Gun7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.13_1651005043086_0.7878448255716282"},"_hasShrinkwrap":false},"2.4.6-beta.14":{"name":"ecsite-form-builder","version":"2.4.6-beta.14","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"3066d7dff84215d6fd99c5e3526d36336b811f08","_id":"ecsite-form-builder@2.4.6-beta.14","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-ysYgceei+BPeQICXy75MgBbm7Aa/08dDJeN/Ewk2CfyUf7Q8GyrubWM6NsxcTXgmmzj4/dUACHikmgYDSh5HVg==","shasum":"b8eccd502dfe6cc8c2de5a99ce5f7ecbc3999f1a","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.14.tgz","fileCount":169,"unpackedSize":4319784,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFFi8uiD+Ef0GNza4FKXQkkrm/atZh0qy7ZgirVnP6vFAiAn/QZyPPU6DK8EJC0LfDy0c1TYOo4usa3SBxYGZUiraA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaFqpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqJQ/9Esszf/J0HQ5ru6xoOvfCHBaiZsXq9jh53PyATnpVCkDIT4cN\r\nRKHg7aUvGMBhLEJPJi6hpfIpFlsPc1KKa6Q9BVg66O1Gl5dkO57vi/QppyRP\r\n9AtasAgi3kh+yV2/HX3MV8qULRYOczvGLDc8+y61UEGaqCs1PV5cScwk3t2g\r\n54WlFje99GhywY3yP28DFBHsqtwUmO03Pv1BYS1KmR+dlPsAN7Yd0rFTdpEf\r\nzpZtWv9U+5eI5nT3rZtXnTntisL/IEfe6UgvUumHghoWHlDujJgq+B8sSEbs\r\nOjp10QyRmarEA0K8pe7McrRURqV04po57qkZNZDiwm54+sapkvtzAq5ov3oz\r\nrpLTM5haWtEJXWK/VVqHsufmkr7JZRXR/07jJTAvU3o0+vLXdFn3CCTljuIk\r\nRJwgSzxnIr8fP6xcv+nnQt0fw18MeHBo0XAJ3zIk71ZJPS2DBg/TVADzUVwS\r\nqSDXUbgLcckL3Th2r+2MufwACGegAEZRUV/J9e8HUiWQkEIeX0HZJJYpWfu2\r\n0qKG50NHEEJL3HI4BUunVticG82ZJVvs1N6fShPPJNTptM8y1EL6sCDbX2y9\r\nM7qHwZKvrWbSZbh7UC0qvD6bmlTOFWM2+V9HhEeRmy0JPz/Ov974M7dY1ter\r\nVCaOOLX+1N4eKw9B5g7ZR6k09XTahhO16KE=\r\n=weda\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.14_1651006121514_0.6165612241741747"},"_hasShrinkwrap":false},"2.4.6-beta.15":{"name":"ecsite-form-builder","version":"2.4.6-beta.15","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"6afca0c673a18762df8e0ac786d423aa683670bf","_id":"ecsite-form-builder@2.4.6-beta.15","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-nTcNiNqwucIeyVewJLFal/3UI5fR9d469QcjLEJEcSngm/5+EplULw1X4MFCDtozDyZFS1wqfblrj1mNnv5VRw==","shasum":"a1901a707a30b5d23a892e1ec8284a6b5b8a7d2f","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.15.tgz","fileCount":170,"unpackedSize":4343529,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRbGlW3JDuYnnx/zxhHjyCXGYdTgeQRpQHMz9liilquAIgZAC1woNtzFSkdmXpWDtr4MvTviLerl+TCDFH1UkMKyU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaSh+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/VQ/8CGXYaD4XZoTlLF7th95I+kUX1G59CoNShOrhwTQK31cuORxi\r\n90613RJFFNb6MpzhNk5cHuGNLlvX6y3mfsSPySWS6KyFQirBsfOPSoGWQDIZ\r\nEEoxLLOgOmA7VixOMwgeWnfBwZxLcLcVSWd+yQgdyrzbsDqPiJ/tNNAzeoMS\r\n6sSzqW30DO23KOY+zNSh8s9GRhj7YD4xE0kLthdY7PRfbehG4goFzGDIrpBI\r\n139iUcIn/MqrxQ/QuJPuoPaLbthi+9ENgr5zWXJ+iQS/JA6OJ76NL15jMzoQ\r\n38wOFWt7kdBH3qv7XAkwN9vWip9VRsscC47+33X8tlQtYvqySMiIP2l8mHF5\r\nrZGmsLm5khySqnmYRzk9ayBhP66CHy47q5kPWm98CnHO80pBkuAPTEKw6Q7x\r\nN052sBNREn5S53fhBApehMOWNV1ow/51MpUO8NuuteDhgtZ8LckqhW2f3njl\r\nzD3f5Gyy69tX2a8eklgpzH7IhBtblsfY3P1OvvOod6PcnmtmUGabdMIy1QW9\r\nU7+lnk6nIh/Ma2tSAsBK9+JIlNKmSfGuiOEc0+Uw80M7K/3zsx1nVGUN+iji\r\nPtzmfOjb+s/7+bW+30PJh3jhrIp7qy2EPa/zvhFOdXiWgSymp3NHBSWddH9R\r\nGjliCqimpiE6z4MjXofqwN/RFQXirtCuIHU=\r\n=FG2p\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.15_1651058813720_0.18793076432625266"},"_hasShrinkwrap":false},"2.4.6-beta.16":{"name":"ecsite-form-builder","version":"2.4.6-beta.16","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"b8d1bff6469735169c63b588428a99581161c865","_id":"ecsite-form-builder@2.4.6-beta.16","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-CEPGL3oh6PTxNIM7Ar83niRXw5VWBtQwGc5GJdVJjR1o4oy1+CbWXMw0+h9yt2pUIEgei0KlXRH/lURyKbon5w==","shasum":"a0c2913639b3221702ef95b2ab33ac05c65163b5","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.16.tgz","fileCount":171,"unpackedSize":4623964,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICYswAj3c/5ZscLjABAqW0KJDnj59AYyhKfVoN49Sf/uAiB3aj8ihXUxNq96Repy2FdkhgAQ0zy5JkbgW/qbzabTJQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaTNfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1xQ//QvcFz8e4laJMGnuPJ5Sr1gr6hn0XBe7PP/kq+L827OmotFfa\r\nXxjWjOeqQXL78K5QsnPQSPib1mZIjBXuXMzKlITY98mD00pmULDWJXBxtNpP\r\ncWbMSnpXKKKGqd5HG+GZIJ5sh+vw7yMMBFQanwKWp3Lp109MEPL5nI41cpWA\r\nQ09VSbBeKrgCTAYfzYIqYJejajo/2RTlTc5zvmifi7mDc1j0fkoK/8j5rhGx\r\n7rINYAQK9SiTVkygvP/9xEf+OXtdEc5J0aE/AmV2VAZ1qtCVZUScqJCWHhJW\r\nCuT+etD9Midd7ETQ36KjE4E3/GuW2EDIooPK/27fSv+/Vb0Qt+5fQJzbobfY\r\ng1UvhkqI2py5PSdHPCk1FXEE4Ag06NA6DhFbkSodH3VZNTRlJKmgjGp2bDQd\r\n4G6xM5DpgbawIN9ClVK6tY8w303jFwNWyM+xjz6LFLvSmY+hJ87DUjYx2XzA\r\n1W0DVPj9cU1GLpGLPm5eCgI/4pZxifS3PA84ttN7DWf+iboHBm+4mN9vWDMK\r\nBcDU4TlO4htW84b0ppV35zkJcoSmVMAKxrCuCBPAAiFWHnIE4iPn2T6+BtvM\r\nWV72WTyQhJSKd2ZZnDJfd7fVq2moEHrkvHhqe7s0ONoupYGtdOXEP7lF3Erh\r\nFqPfeHJ99HQ3WD5qy3Cg3nK8hCf8JDHm/eA=\r\n=768o\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.16_1651061599521_0.5679111057488702"},"_hasShrinkwrap":false},"2.4.6-beta.17":{"name":"ecsite-form-builder","version":"2.4.6-beta.17","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"6afca0c673a18762df8e0ac786d423aa683670bf","_id":"ecsite-form-builder@2.4.6-beta.17","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-BuL34Id8PEGU7+HeY3CM1SVYoXlnK4vPR9gAjxWTFJzZcz/BHOR1K2WaLs9ITXzUH6Z33y1wqB37QxEDO/msSQ==","shasum":"4f8ab3bdd83d1b236c0eddc82016d21782fe4b89","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.17.tgz","fileCount":170,"unpackedSize":4344222,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEq9P00h1Q3X9kjaqMwMzfVqedEihJ3pMPo9iFC3F6OqAiAgtMgzKYewyTfDRV4DI3/b6O9xeooJpXa0iTAD7jkTqQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaT6QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqB0A//aTfaVppZvhPfu5zzh3FMY1junBunOhv+rebvjI6yupNBObSK\r\njgTxMT1boNC3TqjiNZHr2ihBUVNubb3I1i1OZn652maUuv0JGBOSRH4Don73\r\nBi5cDvbs3lmgLmaorDDeBFelNtgykVe44VWTh909echMmgarfFmpRdfFW8XE\r\nT3cccxHbXH0hMFSII0jg6UJXovsWXKv8P+mmQoMMVWSO8tQcHNql30Z6TB43\r\ni8Y/SzUOEDvKc/8OlsxZjdNLHO3IlXg58J33ukPHtmH+PtD36x6CL8z98RpA\r\nKi4wrHVWnAk7SXO+jGEhmILxEAz4gDg7qL2YZri195I0rGiEGbT6iKIvEvpx\r\nPwoU8nsNPknqFRTk6i5Xb8AatlDr7UAO/9dzNO2+IMkd4H04Bbs30qkRlBOJ\r\nL1d5EnZd0MquQj41jb0ZuldkGziQ6Zu6OMxCRsjvlgPp6sjHusj3scBTSeCC\r\nOnIeuC7iVZj2Fw5RYiV1sfDSOKLtAVQgg9FbE4pRS8RTe786K+iT26g4E178\r\n+CKGTnEdYo4uof7ItXr/KCw7mrHMyfITtTIkK9qLuW1d0VFagJjIIzaHVvVd\r\nhd2mg3lskYk57nzRh5GdXUYEHZqNXGmD/7sJSER0YVMe4tconNoBtT2L1s+Y\r\ncN+efG7825vwzIMDNh5e3s0CUy5S5TilXBg=\r\n=DSBx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.17_1651064463677_0.5853857220403"},"_hasShrinkwrap":false},"2.4.6-beta.18":{"name":"ecsite-form-builder","version":"2.4.6-beta.18","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"e0c65006aa8563d0a3eb866a5377829af691e3ec","_id":"ecsite-form-builder@2.4.6-beta.18","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-aptIxC81PMsdhUW+uady0lJbMNp7DELJ0PFu4PBQ3RHpJUuXoolmFkYde9zd/v5u470K5z5+dRAmAZS1iskGNQ==","shasum":"314beaa68335c21726141ae65fe3671401142e2a","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.18.tgz","fileCount":170,"unpackedSize":4344326,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGf+bYaOseH+I9e/4th0u7sof3rHc1gmiZiLf6HF8U/+AiAOVBYtL+5NOo4hdCe5+AGrfux3KMudsav7TyRAJj7bwg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaVVEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrhrBAAm6OdBo18uTqfWghFPjmNIYe/gz90pbMI1EBFF12nQIpDm0TT\r\nVMe7BpcIPkNfas1BqU3ySJN5Qjc1TzitIKgOqNj24CUJe3OLgyBOYDvX2Rac\r\nZfDu+vHYOUJq0C2n4AEo+bUDXtjV/Bg5mkMnZy3+q5KmGCxHnRwaC1b+pOt8\r\nqQhlF8/SnUnlNQudq+ybyf5IFKD3c9/SMjApeFbziOlV6isfnQx3BLEEqDWn\r\n3aafhW/SyPuW5bUUb8+cVrPeNavyz5wPgec6lBNMNGvZqkfaAJ6CLP69lIk1\r\noAPgFEQlC5XH4e+GmHADEv0CfsIxsqPDT4MJPP/lS24iwrllPqjzXlzGxp0a\r\n6HFA5J1rKvfRxevDaFKbMm0dwPP1LR12OSTZgXHvfhuEdlSpF1j0/B74qz53\r\nv0gy5+8L40/blSk6hNPPJUB79cEAhulNPGi5jlJl0hIUEvNMJJp8ay/jsAMT\r\nxOD7MEGRS6Z0rstGn/NJH3AFEelRT2bDxqnPf6d5nQmRza7uavdhCzytDf+J\r\nKo/kNAokKJlKMVE1/Vu1PdFNy+X9QiEtk4TMVdCy40/wAy88D0fLdathq8PS\r\nWSnnxumadOFU9kXz5XnscAxKxwy8gJFxRSW87lHNrqI0c0rOX2CpTekwglHe\r\nuN+vQTPZeZQ5fW1zW7YLR6KN1iMym4402qk=\r\n=WE6S\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.18_1651070276023_0.004206606831478554"},"_hasShrinkwrap":false},"2.4.6-beta.19":{"name":"ecsite-form-builder","version":"2.4.6-beta.19","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"a63d7705d42f3e2a6fdba284f289c436e6349b90","_id":"ecsite-form-builder@2.4.6-beta.19","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-CBTG1qoke8TdurTrHa8iWmBtX2VXPifx6IRjHOfkji9gd4FlgMebSz7VOxIIs3RjIr7ePLWA5U07SIuPz/6ulg==","shasum":"8dba2e0657ecd106d4f25c778915601539783762","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.19.tgz","fileCount":170,"unpackedSize":4343274,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/uOn/Ko5lAcy7SaWFxTC/ac5VO8S1vIvAmVdXlJ/m4gIhAL1+f6aKEzxA3ijp35Lv+1cY8kmGa3EdpL4kLJTSA4zC"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaYKdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqxFA/+NkxlMQkmpqVrePXULRwJ6u5CU/VVgYB7u34ZEM9+iyg8j7mG\r\nWTdLmk089baTjm02+9yc9dERxJ5tXJBlL3ygbDD75dkor72O5govymSgiyEU\r\ntL8tKZHWBekHXdntSaZKhek6bzryLrBhSoLWY9wvZdY+ve6SDacK/vPsbXLy\r\nxb+Y2fk/+CR2qeIertNBYDSYFtTph1OsosCVmYObvlrPVU5XOEv4WxKuHx+w\r\n0RVPG2OEvRYNXdUJkUy8yArgHovfGOeMB5hb+79MWDgOciAJolVPyUW/7rnH\r\nG+0E+Y7wX+JrktujW4r0A2VZwDN4eSqZzwNxSATXn5ZpaoPxqTtNo/X6KHJY\r\nnu/MNcEAzKX1pSt06yduDoZpaVD/d+Ert+gtz7kt+/omeZLDQOoFj6OB5zRe\r\ny5r7FKq48bmoRGDrFsodVnAaRldRgucIvn6qTEvkeVFITwoAGLkgmZWzbPK+\r\nW6vGFXmmdLI+V+EXTTz997SizL4LWbmqCIOJ588oOxcF/KB1wbfPHOrivwxP\r\nzsp29Vdx89fmQj25MVFWyeiPgwZXAsCjDE5Kb30BVI3xklNdsWwfcG4DC2Pv\r\n0Q8eZoNLtmDDCt55M7o+Qp6Kds5u2kl6hFbmFHC9GWSNFHBd3IPBGFpayGHv\r\nPooEN6Gf0HRLBNct2Gx/QqpDWZDLFniqMEo=\r\n=VN7M\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.19_1651081884871_0.43472214131042675"},"_hasShrinkwrap":false},"2.4.6-beta.20":{"name":"ecsite-form-builder","version":"2.4.6-beta.20","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"8512baae2bbc45f01355acc7e50eaed874c8d573","_id":"ecsite-form-builder@2.4.6-beta.20","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-7wsPNqkrgYYAmqU9Ua4VNrIqYMrwsl9GpCvRBSXNnFlI6hoNxYvpLyKJZua/qUHOZdThmz7dPWrbqf+ce6KIEA==","shasum":"1be644b782971f64b655215e6bf79d7aac56dd31","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.20.tgz","fileCount":171,"unpackedSize":4623956,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPmOFyADA7DWCEC+ShNgUPN0Vq48ut3AOp5nOOVv/lrQIhAMNNiIEUeYnwkeoJv+ymWBivEbidRrVak1TvMg2hcVgQ"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasdzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDThAAiK3Xjq7He1kdyXuGfWAXwa3VUdGJ7KPLmXcRmVCxtoJ1Fytp\r\nXnqt31OlqL8HuYXLq6zN2kDGzW0Ndjbo4pdmrQMjrExkdxju60z+NdBbI+dc\r\nx8w57DKS5OxxWLSmzTrkm/F5BU8Kka7batdWCzBqHdV7s/jrDa6OVVy1qqEX\r\nEqTyRnp3ea5dg6IHGtBsVFgDmhlSSx1qvu0s3TxZJLEkBZeMT4xRTcB8tp/0\r\n1Rl59bEs7znJyI8Idv0Gd9PcaWZTdb7lZbaMBXrKZwKrHReXZwsLv6yt/e4X\r\ntAPlJYzzeCvF0BKYwQy88PKjJc19WsvQnbIVTY8QzAvDvwRiq7stTJk59XPt\r\n02NJzV9oa+1gVobb82cyyrY2TnLr7RvEI/rkDZwEee7A+dZiHsDkkebrIktY\r\nH6tdQyLesYPfpl1rYgAIQQ+CMSD5bJzbYQzZFqr2SyaJwEyA67bzMXjiIP95\r\nIm6Cfp/BPOFY/Q+jMmkpD3+9ECbO8CgcgNllA2gssoA2YwFPq1Tx9Q/ht8Mm\r\nLQcZjqFrKEofU4pWZqYGDXpejyx02LwnsWxU2VGehf8jf+LObx9Eg3BA1fgM\r\nKmeUyRFkJ9mdVU0H0tjKl152dBjpERkZVLFeOk7e6KNlwcAjZee2fuWwaFXA\r\noKoXOLkEU86hRHWel/b0+4AA9nyczWlqvgs=\r\n=3Rd8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.20_1651165043565_0.4379061759677332"},"_hasShrinkwrap":false},"2.4.6-beta.21":{"name":"ecsite-form-builder","version":"2.4.6-beta.21","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"b0c1e343865c24ed40223562e2dcf35f2462056a","_id":"ecsite-form-builder@2.4.6-beta.21","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-fctZMuRuLY+XnEwYNiXY008efwx4YJCi/05lUTlItRnYtAe/CS9ljNsUvMTQydagCiFahCHMMWVUMRACqRktLA==","shasum":"549a01d8a6496790403ff186d9770afb7752e10e","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.21.tgz","fileCount":170,"unpackedSize":4645413,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE5ovsN9S21ZkSq/I9BVB2MQJrZUIH+qFnVAwWb+Lr5kAiEAv78Wf+oMOCGaordV0Tni6oRe/mj9+NiCjinA0Nxwfpg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJia5/gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPKA//U3H2fTQQZ4eAjRzMqug7vCM4n04k2vu0/y5J9SOJ9gOJc+yc\r\nzwHPNiEiyKgMuCZn6sEfHeD5AQmpIFjMkRmj+Ulw2q1xjVGSpQvbetdKpmZ+\r\n6YnJYqaMi7Vt/dsjFrrQDaeQIOWOMOg2657nMJLEk6Fa8RgFoVXjeEZTcy+V\r\n/GQGzjwQsezHjMx+NaI4AuNpQNut2bLiT+LFsyCsImq2vmbr4VJdwSeRHUKC\r\n4Y8EKUcEkqn+gqy+V04pDsEddvdUSAAid5ot6REdWsulCTIfY5nlKgIKLjfr\r\nKcNodXHIAk8Ew4RH75gkzaJ9h1IHoP2mggwCJ4KqIoJ4TbIO4RqpReSth3AN\r\n8x8KzjG92laT273cHE6Ih8TEtAYT5HtBtBbmqx9d0JB0z8hc7/HsEBsLjIam\r\nAOjTAE4ovEZ49kX+K+KJ3Dg7JNw+Jb1g2xh6PPCG8t/a4+iIe1qwbQYZ060s\r\nC8WaRopLe5/ot6Tox6+WtdzGd6palS9mMDl6owTP3eeGvXVITPkoS2MpkRRg\r\nqRMTmkd8rDGWrkog2i0V3Q57XynNTTRcLiWjko33JQ2ZBq976L3rCysTsLGG\r\nr0ZjD2zg2A9A4hmvAWfLLuEC6YV6+NIBIvh9lNc0vQsI0HJk8w4BmLXGqSR9\r\n0stptDnuMifiv2PLpf1XvYw+7UpaeAROwCs=\r\n=y4WL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.21_1651220448495_0.76199647419261"},"_hasShrinkwrap":false},"2.4.6-beta.22":{"name":"ecsite-form-builder","version":"2.4.6-beta.22","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"b0c1e343865c24ed40223562e2dcf35f2462056a","_id":"ecsite-form-builder@2.4.6-beta.22","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-SUSiHkaaW+T69aAnTDNSvNFPnu5GPjUPYyr4a9Rk4NT5mPH/bdPo98cQPPw6NIt7+PhsGImurQQD+JLzurbx7w==","shasum":"215eb049ccf9406335ef94f579c1ef8fd9176d2c","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.22.tgz","fileCount":170,"unpackedSize":4645413,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA2T3RSvrqJGqmWP9GiZ/WmqfNhacTxk6DJJ4OJLSHaPAiEAy4ccuEHru0EcOrc18Cj2od5ze1pn5KDs8ohpgdzJuOY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJia67mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgfBAAnXCaZFrAxOtvXwiIhKvhdPiP5cJCXKVMuj3FXg7tvCyCqqbV\r\nWO/rjgeA7bIma5/prA/3U+8fLosz+LU5MVQ86UBLSQEWaFXBruyAA8EFqcpc\r\nXRbI16Mdt8h5JrPSqKw9Qv0+pKXB4lHkZNDS/ufbx/TsOIXIqJzA8qWEMonD\r\nc2az+1jvP/vyc/YzV/s79wPw3H1lcCmijGfSagAWIi312TyfayGcWoMeNKcq\r\nrREdrkdB4qddGHa8jFiMSHjkG2h5aSCW/m/uN9uECVF44jwvaP6KLJu7KbW4\r\nA6TgUjqkygMZuUkLffX46+gPB1i2IDUd86zrpMaadC8PEWSDxDKbzjXVxZXm\r\nVDElg5Bi2G9amQ57UhqCLUU6BTxS8iwnFelWFVPLujAREJKyC5cXlQeLXeky\r\ntVIirarEPl6SF8dSxdhAzZwj3sAAeLkYmumQu7zAnow6gFSPai6WlpAR8ssB\r\nJc0hrIsGkJuqu5XmNTdwHNzT4PmSBzXjnoX6xnuQdF70LphZQIW775SyycJb\r\nLv7ajDGQ+vEC1SLBZPlWxZz+paNWqKsRJBJ6s29SKxzWskejZ8tZrLhiA9nm\r\n+0UnXbGK6QHclixlz/R2l3d+3k32mcFf9oDBxeIMz3nF8WZ7mYimrEr7HOoM\r\nkB8tSIGeA4h+WvjFYF3B0ATUhPcVcxhcE+U=\r\n=b1WV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.22_1651224294385_0.9409316490033992"},"_hasShrinkwrap":false},"2.4.6-beta.23":{"name":"ecsite-form-builder","version":"2.4.6-beta.23","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"90feff81bbae2ad49e23c7f117c870a996cfaf1b","_id":"ecsite-form-builder@2.4.6-beta.23","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-X3eACq6EE27JNpLCpbfrBUQEAgKtIAG+xUWSGil4Q1YSIhfrWRmLzNKs7iVBZIk4CIftlz+VPzkoPCQfoHsYyg==","shasum":"cb75beed1ebd04a5acc18f8f7f1bec55113f9b1a","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.23.tgz","fileCount":172,"unpackedSize":4647464,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCMuxSC91rDbDHrgGn3L/c9Wqx8RoQFydUEm4ZTyJoTTwIhALTyaJ7EPyKGDgROTuyPInKVHY9g9rVgPlMRytgPziLS"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJibBRbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXJA/9GnmgKXcW6FSwBSlWWZNLnttQSclOBfE1v52HJj9pN1gmQ4Iu\r\naiMobVk/DUSEIwWyV4b0564Ks2gLAuZyCCg+60YX5ilLNusQmeRaL9LWi6VK\r\n0huxBBfZaJtQusQeFxtayjY6jXV2oQVYu6TyK1ev3xydVk1SDDSTNOQyBLhX\r\nXHLINPx+A2j03RyvsgXsCfbpu76lz6nI3uvB5ylfe/Cz7ltqGfvVKGf+TKU1\r\npxQFaKqLUqrFN5Abb6nz8DSjrg/dp5kvIYncwLgNj2jZsxJzzN9NORldqtCS\r\nFMVbA7xDqnGbvkKswqPe6RcSMFU1Ij/XRVZ1vdJ7YZLMy1denTDJ5Kw9Xpy/\r\nVoMlqwOHr7wedXMwO2iNAJ/0fCVND2pU2zaagW9z6CRtYDFJSk8fcCtFJBxO\r\ndwSpSI8qbITTGpf1ojGf6yuhq7CIQxpv534GK4HuRK5LelsomumyvE3jIjBJ\r\nDcgK+2DN+FvUKhGcZh1z64U6ovOOjfq7EtfCQ+mOha7ZizFgYb3VrhaW4ujT\r\nGJyAVFLDz4e70HOq8ckRmawNufPdHWnChJ07t7wchmAL8+22FAvywj0Ss934\r\nmmOxagf7VP3DIfkWyxsbB9WggAeMQSOK7fjE1ATacOyidSb9DPHQbeq40o5p\r\n3UNtNu8y3iWaaVfCEoNg5JY/mREyR1FCwmU=\r\n=qBzm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.23_1651250267198_0.9707849012324428"},"_hasShrinkwrap":false},"2.4.6-beta.24":{"name":"ecsite-form-builder","version":"2.4.6-beta.24","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"3c0ea49ad7d47cdcfdbef2ecba8185fa23017b47","_id":"ecsite-form-builder@2.4.6-beta.24","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-xGqTB6cJ1XROvq/zJnQ0AWoZbkptr0S4tdWzIhfSYgQf+FfMAvXZvyS/D+2vvNS2vBeuhYin6561nUyuf4Fw7w==","shasum":"998156db7c376a556cd6a6bb3e74e01002dcefee","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.24.tgz","fileCount":170,"unpackedSize":4654429,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdY9T17qDZd1oAjKqFrZz3f2FfHPToRn7k+ZXGgaYQLgIgbe5aqkw355x0obucg7UPtp6pIHhHqFPBna4xGasF3Pg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicgnXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPPw//T+bWMRMEDTBrc68ooGW0zUiFm7QFZ8kg19pV4FLQiys7tuvE\r\nmG4M3cRu2dQG+msu40Fe3OyLTixw39/UEHYuNzcSUIppV8W7QISp/xXKGuYP\r\nH5w/1e2zDT29hj4xKNXDpJceiHmHW/T2eLuTza1OBkUkYTPODHN0kfM+7kGV\r\nkGSzIzYSC9TqczeEJmbjQo0ZMFLgAx7+PbNWfQRPXGk+qBkSpH2aduPnDMVr\r\nLsAF77nNGA0wJOjwg7LoQMxxpIGaECAbqffXjE//qDTf1M7L8U9K95AR3r/G\r\n/I/GcbMLIPrQalDc+dT4bzLjv8GuPNBG4ssNmKjEMmGN5lNgpTlJPTw3L6kF\r\n1L8VyXuEWAMYk1J6sJQVbKwHPPbiK1qLSgMZyA294OCEvVi9tHl5VcwvWQtG\r\nRLyGSBQR15eCcSY2yV0rSwL+VUL0hcwkkwhlz44IsxxSerff9M2Xf0u1rNsh\r\nWcnGk+vF06+jUPt8CAbJD72G3jDViTFrMGnvKBTOHvUFFE3vsfX008RCMMtb\r\ntLp25H3cIilXNybacchWJcjvM3Tca4svyVSpMzA52Tc2YrO6R29XZ0am8eFY\r\nY1WJnNz1Uy+KnW/Eym9UoubTlp69VARSl5II3Cfht7ADIAVVosvJWd4uan2+\r\nalhPjtpqOG14iyPvjbyNLwY3zRIBTP2LpPI=\r\n=s8pD\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.24_1651640791601_0.21972786994289528"},"_hasShrinkwrap":false},"2.4.6-beta.25":{"name":"ecsite-form-builder","version":"2.4.6-beta.25","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"a9aa43c9a28721765adc7e09457b1436250712fc","_id":"ecsite-form-builder@2.4.6-beta.25","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-dqoc2hLwjSqa8wfEUFflX0elshdruL6nt+HQr2hM+AheUU+iu0YburCcRYtglqOVnFc8eSCKhZHIVt7VAJ41yw==","shasum":"bdb4d1b3fb28b5a2b8d2927de241f0d19fb461f4","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.25.tgz","fileCount":172,"unpackedSize":4656277,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCU7ppwAbgozQ3OA74Nq9IlyWVTL4iICjeZNxOTeWIoHAIhANxssFnacAR/Ati8heW7LOqlIaFwWHgg0mEsO1WitV69"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicnbLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmppBg//XLleXWkamxNdhCKZgI5P/HAHEoIFm5b2elBtbbK9FvvKDFAy\r\nwher9GjI6Ew1ZHl8rbIWvzRXX7q6O9E6u/Z/BTVP661d69IS/Pr+qUbykwh0\r\nk1KY9YlBD+9cAxeDf1hByFeGjBnetRDlbOVt16+kO1fzXl0BHSlj7YzM8T5l\r\npUQCyjILPKrABLoVysOgRxcMQcijI7uHPO1B8IYvPn8oZ3EOIA61SEfl4FtJ\r\ns62yYZes0jUbjtTMYlRUHqrgvZqFmuePZgAKZBbEXlF8ttNg+3UtEn5QyjaM\r\nAMPiXMHI9h5cQJhx8EIyWRfuh1sjfT50DA2M+JEZBz7GiVYtmpkGGX9B9D5W\r\ns86Wjqj5/22c3UrFKGMWiYJ2wgMNH0Egn/TFbgqxlxJVtZyT56Nwb+WMmFgF\r\nP6ztxKzjhuMQ3tgdVIJ8EWjqSlYhWAq8u/L0Y6ErVinc4K34H930U6bFCsiF\r\noFl7uOBc/6Nw7NmGQJj+bJ1PanBBaNIVcriiq44sznrctR4dUuNdJVqlGWAN\r\n4XOR6VkuyADZl7kxBbK8vsFA5x8A8nLvicZnU+jHhCouFwqV4+H+oQ8RymNb\r\nciaYrqqvqiPBchiTWOg3CxXAAx7/dvQw6C6sWz6c+4ssXtymC8Fo/9ML+yOF\r\nuXNXGQrretY4coF8MZF/SIkJJkDt3t+l+Kk=\r\n=1HQU\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.25_1651668683665_0.47255464343612474"},"_hasShrinkwrap":false},"2.4.6-beta.26":{"name":"ecsite-form-builder","version":"2.4.6-beta.26","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"07425edcb44c7fc8c84a27257e122b6e4ef3dfe0","_id":"ecsite-form-builder@2.4.6-beta.26","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-171+iseUIpxrxqn1Oozr6jnya8sRZEHWwELs5oDwEzIMbGmjcIB/OJCmm2UTzgglHRH+/NbbQcXOYnWSNaJ35A==","shasum":"5864aa28e4ef879530e199a3aeebdc26d7341edd","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.26.tgz","fileCount":172,"unpackedSize":4658374,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHdPEOx1ugrXGYbmyagJxkXlHSfqliJf+QRFfZhVVc1HAiEA0E/qBCTog+StEA+/ggz+XxMWhbkieLNRQvtvgLejz0E="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic55pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJvg//VNHye8zEr9mQqCskM73RDF0D95QGIvhtnI/vUEJhHICVZDWd\r\nwvjG/waD4w8lSf0StZiBOR1d3HoxE8KkdI7kH/1QIGCEHbeFTFHSD+qxaxjL\r\nFzH2EAmliJKw6tk/g4JWFc1e5etL3rBZLN9nvcwqGyQJlOoEc9Fn9BI+f3tH\r\nB+s2VxCMshe00jTnHkTnUcAlXF98fvyugNDdromYak3ormA8z/p3a/ZB3cnz\r\nirXvigI+rF6L8drQEpPK+erV2pR+qmHj4Z5w/fibOnJ0NmFXgCWwnhcedCso\r\nyXOw39a7zfmqAxkxQtAvxmfZwmYv1IVm9ThVq6OgYC21zGI791Q3HLTp0mAL\r\n2FPVDGUT7+kZy1AdF5uaDUYxy0kcyKVus1Qov7MPQ+vi4aZWkxMYIVFA+Nac\r\nTWF9CD82NeWnJyu0/nrFhNDbS1Z6O+p8EOdvMlBCZ+XAADE0JmLOE0pRuo/+\r\nzkHlJsLAFRC8y8RmYfBlaOEUNNo+4Gxd01YapN5mdWYgrVTxvMr6mHzjIrF/\r\nSBtxpzIMArQ3khgFG1ooSpavjkUxmlsqcdNjYflznKB8aGFluehxvkfBv6vO\r\n6ODqWGIzcRwwqeWbAei9H6l+ahE6wP/f1UQoHp1nFg7PdWR9w9CSIxEqtpKK\r\n9F8Tqp8G1Xcw1egCuZKRYLay9n57Hhs2qOg=\r\n=59lB\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.26_1651744360778_0.32496150523044576"},"_hasShrinkwrap":false},"2.4.6-beta.27":{"name":"ecsite-form-builder","version":"2.4.6-beta.27","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"6d8445ee69677cfa98872eff14bcd65c5bc7528f","_id":"ecsite-form-builder@2.4.6-beta.27","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-DmzPeMJwqjR6MmEj22aeEJRQUfIHK6AyVgZSUwQqe26KQBgq/Ch5b52rYhj+yTzT8MjDKeOy7clmI6zUtE/dgA==","shasum":"2f3d3584926d42210c79aab9fee91d2e93ecd39a","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.27.tgz","fileCount":170,"unpackedSize":4662714,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNVPa2fNelDor4BvI5jTEFqcd560mJ0QHGPYOAk9IFawIgXd+OL2Gizou89o0BNB2mXwnx/ooi80Nite6WlrVnKYc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic7W9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOVQ/8C/eh2gow2Z/qBWgtJgF6xGK41nw02WuuJ926ZXmhuQBdhWj5\r\n+PvOCSgqa4f2Pwof81Q2YFTYcDAi8dsEbkNmL/G/gIteaQNt1P/6kzUrJbJe\r\ntEcMSs+URcFq88QSvzrN0WkVNRMHg4jPj1e/qMYUtzu5cI3Osyuz3CvQUGgy\r\nU7CmvJOmJEXDnhaauhqikWHnu+0bhyMFYVS9wNRygFkitTxKlev6BFwJ419U\r\n6sR73w2mHipnlt1gmL8K8FXOdm/Y2ZPkBHavJFI9r0P/BTfv9FoncCxlIwg0\r\nFGa7lMKriHuY2tOFPIieBbba2JuVK/dQKjGrC66D0IXADcK8vL8KGEag1pUp\r\npiKR2DQ4v94V92+4gOnhiNph8ssmzuGTKM2OEYRLK4H9B0NeiNeN5i6x0JS1\r\nOCV7Hp9gXY06D1KnaSVO+hgIAdt39CKDRdzIT6akl7otHA4Bqw0a91XWFb7H\r\n3KxY3cKMAgk9pZ3I2qyvh62ODJ+lrnL36A05Ht343xBp3qULrsOhuSTEvIXF\r\ncwVJFhYB2mub72CO25UWGZemVbMR+zRDX5II+ofqzmuhm114ze5uq4j3hCM0\r\nm4sMbUH269RzapOEcs3ES7EwmlVHohe5SmYSdf59P/6VpPCuqEryNke740kB\r\nPGBNs8pSyIWE81ZBrXST4NnKN+IdTcLwbaQ=\r\n=wxDS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.27_1651750333253_0.08473345238560359"},"_hasShrinkwrap":false},"2.4.6-beta.28":{"name":"ecsite-form-builder","version":"2.4.6-beta.28","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"1e229536f0c4033b4aca839978504407128c5e15","_id":"ecsite-form-builder@2.4.6-beta.28","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-QpFLm2B4Lvl+he75NwohrgbbJgBLx7A5t5NyXWKC4qWDfVc45QMbWjOtskRYXKQEZIGrLS0mFrQDlft1eycaeA==","shasum":"3a15e9526459b4a7d9d8821fd4f415980e55f0b5","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.28.tgz","fileCount":170,"unpackedSize":4662866,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzDwzihG8sc80uuLB2vjuapO/UKFfAP0rWO168GN9+rwIhAJY89351uHoKjCxHyWJ+5Y6f6uIMdEoMxWAT7qjIWnF2"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidNG5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8uhAAmZRiNtK6HSFCOTkJ6tSXhihTFfZhlMwM38S+9VX9H2tFeMO0\r\ncahOuYZCUnYN9Zfp2djcqHoCYAb3iLBhbU8/YYBI8qCH5pfCNNJvPRg3xr+P\r\nw4K2dxYzC0TPksxTU52wRI9+q8xIQ3T14GspEOtkPXQ7e+84k8HJOui+vWjP\r\n9qHesLpDO1/W7nOEzADyOjk/SwBb9PUCci+qCy2fqqm+bmlQz8yladeg0BMU\r\niuWiXEP/lOSf7/qEmP1HPnSYekJc/VVsB2bUsVJzTkx+OhtEC/5KhPAek/Ak\r\n75r+EtR3/lL0wxtbMvYb7p/dvQoJk0d5cPcXHoQdDZh22bui8z4rIwtOLuUU\r\nzbulxBSYMs7Y6MiIled/sfizNjWK+DVr5PTPVlGCgYBaD77+P5Q3r/D9ImPH\r\nzZHPpvtX9M9ScZ7dIFeGSCXrYcjKukSvW2fOaBzMgvd9/F/cj2os+DxQY6+s\r\nd+/lgDo67eubHo4yA0SN6yTNOtNPLntqA8A71GyzHtSZ01HqxXkuVW2VxNsM\r\n5zpy97xHbZyj+3dFbmgmLKAc30Y5R4EdCLa5fVrHXEcincOLl3hm4zDtgkwg\r\nGyvkBATgJJPrnm0yEisXqVHJSnmyi8Oi04R7D8QpmFy5MIO9l3QNqz/dNjwE\r\nAzvE4b3UmyXSmlMMnRHmzFALWgT3h0VVeNM=\r\n=3qPJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.28_1651823032860_0.7448734154586469"},"_hasShrinkwrap":false},"2.4.6-beta.29":{"name":"ecsite-form-builder","version":"2.4.6-beta.29","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"1e229536f0c4033b4aca839978504407128c5e15","_id":"ecsite-form-builder@2.4.6-beta.29","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-+aA2UP5NaFuVJH4BbYGl1wsIeuj7XbGkpJ1bynxbeECKifhkX8U+e/W3OqSN8f219sK0PD3T/7C0LG3XPIWijg==","shasum":"3e9c7828e295efb444985551ae815f6eed9a6eba","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.29.tgz","fileCount":170,"unpackedSize":4664128,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTV4+fdRpO/BkUf02L/pFe3PGp8bw0kEtX51onAiYIQQIgMyyhjmXJ2CDS6fLvJLnVGgHRQnTge2ReFpBM+47LrBc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidOhPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjNQ/9HOwD8IXKZutzjznId3TNey2ua7+hpU1zQVoRrFLdI9eG3J2k\r\nc6lKGLWJvIGeA1cCCXjcUCeeSifWjZD7mFe708ig63PHDbX2TrsnTaQHxC+P\r\nEqR636uZETeC5/5w+nFLEu/7dbZGiAeRRRtt1gmsjdbJ+b8gROtzIoEZmS6o\r\niGQwwfSit2W7v+kquSvdoq33Jz7YoN/FFtwyz+cGdhZhn2h8XYi2202TOG23\r\nEwTI5nauJZ8i/XM3m8GtumN+T9VY/z1m/lepRuRStFWLNAPHJCP/9zT6wtts\r\nOj+uRdttIaUY4YMRg7qcqTt1+z+XzPadDfYbmXLaednJoRx8oDPgsh2RtBP5\r\nziTvIhGhlC2mvEjAYy+aROBYP7NPILPOOfkm7Qma3tI7nkjlMJFoofHSxEU/\r\nVy0wxrjPDQgeTkqStcmLgfmy6mBu7E0n9I/G92tGGA05V4dCgI+MlQzeuOVV\r\n7aXD0yUagjaIXhyjZtsEEb7GypYQrnEvLI2Ulhw49yS4pEV74fe47UJBuhOm\r\nfSxLBIvJ+zeRUIGx11RZQjrV3PYx7M710xnzudlRwyzXqvxgZ74/oblW9ElB\r\nmtlEqjx9suiZD/6dRl7HvOA5ekIHviAWuHaScPdNE6gcp+qNx9nmIdGCGsLo\r\n3Hq8tugpXXdml9p4UpszmfjqXpoYLuH/MjE=\r\n=3FZK\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.29_1651828815261_0.9766757319976984"},"_hasShrinkwrap":false},"2.4.6-beta.30":{"name":"ecsite-form-builder","version":"2.4.6-beta.30","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"1e229536f0c4033b4aca839978504407128c5e15","_id":"ecsite-form-builder@2.4.6-beta.30","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-jteyrTyEXGVB3vBqYjuVPktlc1sKgWxbWiPu8TnM5jUtVmhf7bdaSefh6EEIKNrLBHQKYN3lHlH1bGFLUCziPA==","shasum":"ea16209da02c43bfdf77946f2b6bd2f2e8407feb","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.30.tgz","fileCount":170,"unpackedSize":4663767,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICf79SoaMte5IGxg9rN548kZgRwcNzZOhUDxT8f0HAoqAiAp3xWVS2u7J77N15GJ5h9AVbXXx3uRqW3UIw+SbvntSQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidPG+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpziw/9GJRTpNPJ9fS+pbTuNFGBhkvdS7MjwfWqwbZ/79p3d0VbKBsE\r\n/PxQugc41BkSFzL8I2dE2VBNFlcZE5CYUBXiJ4hgxCuqeEEfz6rTb041bzkr\r\nokdD7ZHqqJqgT8eyapoMfusXgIOe/u3GOV2W9GYCbOQGJMG/qzj5MlUUWfpl\r\nz+Jqu1uLFvKbv5m+2r8A6nzywhs5/xuLUOvrYmIv+Ms05L6x6t9/VD6AcxxW\r\nXia/pt6YGys+3U2KU+eZjUYddaUmpgeoCAax4nQcjL8YfhG514QUC0FBbkyj\r\nVOBUK67ZZXosCfcE1MdUK7bDJ8I39n6R57RZg6aNEm/6zUOwhU9rMOGIw7Of\r\nK1oJyQ3g6W4HHTa9pnAAngCjQjDdPRsrJnumDCJR3os5J23EuSEoUWxntF+M\r\ntvsB5Vo1G4H2iRf0RZFuejXmLlow8xWEV18FYpKhM8zw34UgTGBdBTUciy9y\r\n7AkwS0ZCu2/BbHlgLSw8L+dHwTn4lcVP1DMqZUHToG3bC+DmUbQDVlcOsCUy\r\nTKvr+ySX/Jgv5S6lrorUXFAfdZLP6/p/+H25cpTS9qwloiqQfOYat7SM08ij\r\n114/7PdptFmMTvf1RUU9iaCSHHuNDQzumcfbYTCKulh/a7mfKg3nz9e9TRku\r\nH6x9muz3lEkR82mUzyFgIRSbfilbnnHP/IY=\r\n=Ys7E\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.30_1651831230722_0.5883898231425455"},"_hasShrinkwrap":false},"2.4.6-beta.31":{"name":"ecsite-form-builder","version":"2.4.6-beta.31","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"ffbe7955d4bd89e07b36182fade4af9302871efa","_id":"ecsite-form-builder@2.4.6-beta.31","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-vfz9wjv9mM4Ftgh2ts3PQ7WVKyHQp6Mll3yeZoWjjmArD/sNYEuhKH+qtlJ+IO/tu92+vgtw660Tdyg+J4DDOg==","shasum":"970a078cb421f4bc69cd6de7970f0a44950bfb5e","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.31.tgz","fileCount":173,"unpackedSize":4644033,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA6rkkeHS69rzDZWzVk9eMo3KtT1ho1HmaNOSSLRYUaDAiBoW9OkeTR+MuDQ+1WuBg8Jd86Nw+f92/XP7pqg6eYmjA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiegAxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpeYA//b0WXnDqoFmVgZhwDMIp0tOr4UHvgQKNH7n3a7kATPtKueXZN\r\nAiv3b4AjvjtnAR0lkPjn6RDci2YoVUO9m7Xq0yf6zRpTlB/z+GFUliEPGCNH\r\n1vbbJEneITQVVuHtOEUJqVtc+DFYifsm5XlEpWY+mRr9a/8mwS55FxJm1gjf\r\n4BL/L1V+ND7stvYNJ6aailNsoborYMG/JX3QSY5mH3ct0Woh1LC6fNGDaC6C\r\nSUeQU9Nt/7pgLzOOq1h5rTMxI+I9xM8l0HGQ10UKvUwlb36SGtBUAwGmTXI7\r\nnzOKBY4Ll3kpFHNs4dBmLie+qdGjKjJ1VRF4Bw6vohzmfPV+UPUYuUL4LiCZ\r\np2fdTu3aSZjhR/ltzKm5I8CzyIu0HeAdL3p1GnwWQPL16Rpy0qN3yVL7n0pz\r\nVbUbEGP1ay7GIu6kRg9Mx8U4uOnQT1Xz7h3HVDd/2LkSGQ40s/+JDLb2Tq72\r\nOkUsw0yqfRwUSuFuUgz+Ul6Ws45wWTKgOSZuQpQTaoS9YAlsGsZ9KEiTt6jD\r\nELjp69Z4QEJfddGOArd8VSCHFBqtJZ/u5/cd/IJWwT61g8dEhPY56Gue07x7\r\n0AKdVx7T6fPw8B+/HP0Aqqrb335ZUnegI8jjqBeRiUCfvdimlNLn08h7zhbs\r\naCLr7j8TWchwkq/Ehkg26FK5Zf4DsroEZCY=\r\n=5DDq\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.31_1652162608879_0.8056475194755113"},"_hasShrinkwrap":false},"2.4.6-beta.32":{"name":"ecsite-form-builder","version":"2.4.6-beta.32","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"ffbe7955d4bd89e07b36182fade4af9302871efa","_id":"ecsite-form-builder@2.4.6-beta.32","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-j7xTYxrJBqVVYrmHeCxjx3mew/Q8CDY8HRR+aeKoPxM5b6d8mGt4f0ssI0JEBqlDfYej36NCI4X3D8HQrgtebg==","shasum":"f8cc3950b0296bdd5330dc48d82ceca7867b9e47","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.32.tgz","fileCount":173,"unpackedSize":4606528,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1bXNhdMefLdcMVPR0loN9fmTcHyZCyTWfnhAnPytyMgIhAICLfIbrmeaa06S1eR1mzpsoFslIosM0O36u6+Qisj/9"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiegkrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZmg//dGNzypQUEW+P3U6hZzD9LRzIhycx8eGzP9C1ocj1IS8vEikd\r\nPWgMbPSAGrw81dqz9kVPK8n4yoUDwgBK/Ha56YjFpHxA4QmSRrNG6M3axD78\r\nCmVR9QNlPo++WqSsTT2zYOzmsyGnFafIzcy89ur+aJDMB5OXMys4W8nIMlIq\r\nJ/fB7ocmbfh/E3WsqhDzCemQKG41We56iJPbldr0kVkSaY0wF/T7CApis5PJ\r\nQ/tKrcpi2Me3K/y/MUmmi4zYsyadWs5jtnJXgGqExRSExMeiYN+jANg2uY8/\r\nTRTEsjTxBNRMPyHer8hkiiJq48qHFXIlh3hvlj3jKVdld5W9gvATfso9bRUw\r\n84zL7QU4naR8YqzQctsExhtbN/QZZK9iWrgrlWnL9/2x2Cd9e9ADxYbwPZ03\r\n97kiJLYg9Azd5Eqqmtk4Q5bMTnA+PHm3VBB22uzbqGfdNp/RIzUodZSA3iC+\r\nIY1lCvsiv565R50FaTIHFOtmG0tRlsQVRtxiv8MinunEVPQlCIdmjUA2cDe7\r\n9lc93yuujkuBpVQ36WsDb6hXbCvWwerQAZK9jO+uz3YO0aCz9c1TqQ6kGlIE\r\nTAaaeSoNAjD05MPHXOPwZSvtC+mYdtFy/Nqoya/GWVrnEWy6/hobzQeiedPt\r\nPqpJXT0P42WLhowyPuCAejhanxAkaDvojeY=\r\n=01eQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.32_1652164906958_0.6320176158212025"},"_hasShrinkwrap":false},"2.4.6-beta.33":{"name":"ecsite-form-builder","version":"2.4.6-beta.33","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"ffbe7955d4bd89e07b36182fade4af9302871efa","_id":"ecsite-form-builder@2.4.6-beta.33","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-mHbKONiJ9cKde6GTlEy5WtCJW4+FX7mHUYB2+yM5S1uPtJvRs/3WNq17gfpo/cLcvaqfXbbmqXlqyGhIl3/nRw==","shasum":"c24d37dde6837992330375ad6fe209cd9df223c5","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.33.tgz","fileCount":173,"unpackedSize":4606788,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzxynY+FvArdbcabBcAAVFQevtvi3o3/lUtTtVtAhCLwIhAOjQcHtOwVMNLl/EtJqaH/D2paqPwj1u3o0AbZJ3H6MB"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiej4/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTUA/+NQandRnwxNz7EolAMGkFLA4N7fo/TmLL9xF9H23JmgcqEb3H\r\nN2oY+c2aByeeBX5suyM5Zper1bvI37+6D3SuaGBW13HAOkmMF6Tnw0IHNqAc\r\nbuBKEAChF6dKJt5sx4j2a0aCV+m9l5dZTj5wi5D31KJrHkFHumZyRMfFhoaS\r\nxxWWHpHYnM51NcEu7aRLm0DOYpTcb4vM+erT7eMudiZRWeJHB2qnAna7EHgx\r\nMf29/Ta5Qv0edF5mt1Subq+eF3lZr70e0b40t0Ua24lQlEmp7k2ODiHs617G\r\ndZmR0ZI7fGmITnP0JGw9qhiwhzU7/QMgtGlYdgIiQt8S02mFBd8QncjZOs0t\r\nQ3+aRLjd4SiEgyZOEzRhwUNVEr4wgBKXX9spyG5Rz8DRaCpvVQyJW2Qz/kW3\r\nyoB3wuewdfxTYIxEdaJEmkWrKW4ZzQ7zqy2DGtF4i7vBGAwUaclAncZZDv3N\r\nttT5l9dp8ak6sDYYZNPwLLcrDu+C1sirXA11yRr96m0whu45Ts6TEvOpSIcw\r\n8TOsQC5r0phD/87A3DKvxqBZuTGez0Qb6zW6HyCwOSMNXO29itf2yjDzX8y5\r\nYZF8UIw0BEbesObOXCySgAcRecZzTbcX6sM6aU7RbFeG7OPBuy2epwGqxX90\r\nx1i6Tz3ibrS8TNNZYhtsJO6+2xON0G8x14o=\r\n=L83M\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.33_1652178494926_0.9004274037415869"},"_hasShrinkwrap":false},"2.4.6-beta.34":{"name":"ecsite-form-builder","version":"2.4.6-beta.34","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"ffbe7955d4bd89e07b36182fade4af9302871efa","_id":"ecsite-form-builder@2.4.6-beta.34","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-dejzf/sK/Hr7BP7z0xpcqoj9VdllbnSVORwvjGPDj1EIEsJpM57oAVkLAZ+i35rR0QgkXagVuGLUkjWmSD3+8A==","shasum":"ff218437b46b5a8c6fe5e3f5b052e1f29e91294d","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.34.tgz","fileCount":173,"unpackedSize":4606555,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCTdHzIqF33exI9wLxM1QdtzeDqRWwEEWM3l4C0lTynQIhAId0asMCDBTmf2sTdqHq7FFlgXbrLM0OjQoKgTA4psJz"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiekZjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJwxAAjW0/A4b0ZKA4xi+izD/TRiAaRv5QXZkTjOsey6nbG0iJeRrm\r\nvR4w3QeLd7Q2eo4a4PTGTKAVF6LdpSCpfcDLlTKAUMWl5Y3Ktein7Z39K/7W\r\ndBohYWwckS/CGV0foA/zEil8wjFkIt16oRWeFCuExU/CsRxwwfXbLI9WsdyD\r\nR1DG/y3a1qfN0pYz7R05KsCeAZFwIjYRCtli+RRJWVKFdQXtXphxtFE8gsgN\r\nUtg8zGgZr1ASObhTRqm5hZSf0u/+42vYARRUbskK98Q/tCQpsSir3geO26UH\r\nWHwVjgtgUm4iEexgh6tMEY1xMhl3LUwUcgrS+orlhYV2LRTUJPhRidX8mOO/\r\nJC2SvOQtMhMZoxM1ryJ6cYtQq1HOD9lUirU8i1VnJTY/32WXK/X/UHdkn2MJ\r\nn6D9qkIHDjEGZ/n2Va9fjHNf13s9eiAHZ/n9fTd1QH9dk88LyoRMzyWgUBMG\r\nrFFSRwr2EEZ/pmJ6YVgs87Zhj38dh9CM4P+deWCWovHJaCkK30KdzjnJv2Hq\r\nz9QKHevYtIjgVlvCTzyJb35++cU0AIxZJEMvDQJo8Y6vcnbXqcg72BjfuwIo\r\nNNLCvS/ZctNhQq54Wq0r3mh4Xfhz/KfW9JWOsBwVRoabznkIWl92UwBB9MpY\r\nYYsbDPgRJS7nfXqpoWeo65i0WKIpy1SfbOU=\r\n=t0U/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.34_1652180578917_0.03402494717939608"},"_hasShrinkwrap":false},"2.4.6-beta.35":{"name":"ecsite-form-builder","version":"2.4.6-beta.35","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@emotion/styled":"^11.6.0","@date-io/date-fns":"^1.3.13","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","axios":"^0.26.1","beedle":"^0.8.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","file-loader":"^6.2.0","file-saver":"^2.0.5","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"3a526108e37fa6aee4596214d173a558365ac6c5","_id":"ecsite-form-builder@2.4.6-beta.35","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-VDD/bwUQwHG+qJkoKDwKZsy4ibx02MXTYLKxz2tlsEl0fk4bvHLb/Zx8xR5Ny8H9RqZm6WBf17hzw917NAFAzg==","shasum":"5da76dacce6c2740ea4429e6a71c2868ff60f0ed","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.35.tgz","fileCount":165,"unpackedSize":4261040,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHFy1oO9OAB8A/vMTGPR49P8OHmaFEhuogq7xROUKWGAIhAJD4wuRSJnVUu6V8ruXPn6S4K1wWys/0D3KEjb7Y3LK6"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie8lmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRzQ/+NR3WFbG6sxGkf4UnjkNMx8mIt8ExH3t0mO5EKa1+BJ9BZ4i7\r\nVgZtRfCMORN5Wv18GvZCnxB6dHOLsqOlxuDQKGwD2sd8cmmHeqOMT+ew4dSj\r\n5G1UggUDpKB/gFl7Sqnx4ev4VbHfcYJpQSRPDclsbFtBoESJ3CEaTGUiz2UN\r\npjV5eaO7KQUgn3rhLHWi2MAvarHNiL5t/U66DiERqJ2fgcA5o10Fk+AKxAI1\r\neJMW91x0K84Tqnl8d/Vu9cI5yomsd3HLakNeLEipKHTLW4qtuVKaNpojxBH5\r\nlblfUOL9Unq+TAJlIlNmZi2GL60ggLHP+QWtYhqWsTU/OFfny+Z6qvZK3Fe7\r\nzSlOzYmbDRPTwQ6GoK7nqor15MZoTvblWc2P0pPYNXktBhkioCvWSa9261AW\r\n2fcMwi7Mh3nkqi6i5g0RN1QRa+zVBjA/AhY6DLTgvqbK08nyDaVKxgCG/e+f\r\nzZjToGZFdM1h8GOCB9fT0FVySNEkptnKJGNsu0qfYemc8U9jdg64mWjp3nhI\r\nNGjd24v5CebrgAwLaqwFI3hIP744hVsbzeqmsnra0CnSr2JDlvRIXEaach5s\r\nQ4VwHoLAjDPq+9Aa1Ub1Gxp5jbrWM/MSy16cJYcLZd/sBlFPkyQaCmhG12id\r\nv/E1arCYe5uvDG5aCMLkJKEcH4peuQGcFe4=\r\n=DmGK\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.35_1652279654174_0.9122923031850283"},"_hasShrinkwrap":false},"2.4.6-beta.36":{"name":"ecsite-form-builder","version":"2.4.6-beta.36","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"72d067c8395664c7efeeda315fb8162461076909","_id":"ecsite-form-builder@2.4.6-beta.36","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-O1zxLu0WUYz6a/FxHXtZWdLCChbdFNlrZnIPicmEiCyIpvWVxRUmuAQyHo88oKPfGEsx1DqaTbDo8mkZ4lF6XQ==","shasum":"bb06cefdc05c2fdf022134945a9877c4e6f3db00","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.36.tgz","fileCount":173,"unpackedSize":4606429,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtm1OngROIeggOfkKbyRJzPSA6LQHgdohZnQyMTYKxVAIhAKDr9ZyW7S60E9XiwZbIpEVOpDMU57KNMt3tAlQAr314"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiflR8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr22xAAov4SuVPQsBADSLwl9EVJ/qziZNjPN5u0aEOtm6wzHSbTpOKW\r\nK0COZKY/C0TGaDn1eiaaMEADaR5QaqtBoQr/9HK4S/dX32UhOStsB8qlazIo\r\nx2utJFwZUv8i8mHiXW/h7U22iHTtGbbJ5y2RdEAOgJtrXVfWm0dsUs7I/qBx\r\n5i6BZpfTiVWZ56qU4LLdeb4oXODiE1qC/hYwVK3IR4K2bC//EAk2RW/rjhqn\r\nYka0FrwajzP0X7l2NdGU7TIVUq0dKBGGn9Gc4hiRzx5HOhHwrUIVqExy5fVI\r\nXl5PZib+cFtrQ+7pIWD7fLbswjE1daA0P8+oF6rB/HF4GctRHp1gdkId0efE\r\n9uap28avke5v+falZRktrYhRZ+yOhfxq6FpttaS5s5ji5EdGppEOKXW4K45Z\r\n34i+a1KNy/KemuE3J7dmeIZLbfhssNYYPIveXjBz+cHYvRWPBXEc+k42tazV\r\nerV4t3npQvbZi3t8i6Rvk9hQp/SY3HX35sKO650ta+NdwH0iVzhnGO8KMJ77\r\nWtmW/CxxRDbfilibDuNFUiwm18oo6RAqbQiElz9Ox0BBgLp9O0IEFdWcBikt\r\ncIb0gJcqALwDNSoku09wPaVaIIwz6zmO3aud3Jc3nh69hcoYK5RaEPFC6OLV\r\ne9B+f+gQ+Gw3UIJf5CDOrECXPt12rTKEX/A=\r\n=r5g1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.36_1652446331797_0.521295437038996"},"_hasShrinkwrap":false},"2.4.6-beta.37":{"name":"ecsite-form-builder","version":"2.4.6-beta.37","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"ffa8e557e83082279054b458bd803b367ae8ff3b","_id":"ecsite-form-builder@2.4.6-beta.37","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-nTiPmO3Qijj4+Gi65TtABTnZNMHWtInIAFVA1RqWEt0uf376UARDvT5zt3mz0ES6tKWweObNQo0YwBbNTHLN5Q==","shasum":"b4469adbd8afd36d04d7ea31133c62c020f2a762","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.37.tgz","fileCount":173,"unpackedSize":4606473,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhSJHaFo8WnaBk7g9B6GeG+9wRRTiKkh9ikoz8oslxnQIgYqSRqFeBxK23xAMKKf4p78C+OM0zc6+0WqDlrj7p1Vk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiflstACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEhA//aNM2vpiVQWJpoFdiJMgw0Dx/9Pc7VxCHM1dNsaRB1iM2dii3\r\nTqNCniKxk78bJoLHu5B6uqFAiHXT6VLHna0Ig3FHUkPB8TDBhHfd344k/r0E\r\njpCN9RaRyx02joOebsn2zmNlM7of0N4/ASaz22osThLodDAF/tRwvkmUz+vk\r\n+geNUiWxSWcq6gV+3cta6Xh9Y+aSW7QykWFzgkRnYp8soy9JfaFDaJzGEUZu\r\nqoFNtoeofgaxWhH6gX81r54kBd7yoRdcl9Nx/AF2zbQ8WQReCpMxH+XhYm7d\r\nxF51p0t7NczZMjLVo6WVP/btTOf9ITuz4wkfrqlg6sqiY2D1rNqe0ccKSLdW\r\nYxxtKHpRm9SaH+35w8lOaLiCNwlon7w5DP4grmCVzTGJv/q24JhDRZjdEHX2\r\neQ2Ry6UIPlZ+rKNmuT0xXOUr9YcrC0e2Z/qLZGSZzSG2w6JHUOA7ClQdATTD\r\nnP1QOUNTv/THk9mBVm2BP2Zjd+glF0aLuEVHk1bVhpaNim3yRbZqjsCADb8u\r\nBGyimSAuQGZK9WHBzktAy6sD2ikvUknsH9YmkLRCqXoNMQnQEQUL3CT7a7oD\r\n2NWe8vo2KQaEHc5xGHMhTWor96SxGb7Ymmnm0wO/E+ubtCrw+BLEvfkdl4Wa\r\nHGbkaLFCo83+a3Q3eWX98PjMgcUNPUZ+e3g=\r\n=1UYr\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.37_1652448044814_0.10445640924511945"},"_hasShrinkwrap":false},"2.4.6-beta.38":{"name":"ecsite-form-builder","version":"2.4.6-beta.38","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"ffa8e557e83082279054b458bd803b367ae8ff3b","_id":"ecsite-form-builder@2.4.6-beta.38","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-8FDIg0WL3PusmkMM0zuU6kp3G5UqIe2M2wLDjX6C+a0+zfZuWsR34LJYgrlOroydBuvljri91UGEW+w354f4aQ==","shasum":"920b8a54d71b680b35722584fae7fb0ff3f7e041","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.38.tgz","fileCount":173,"unpackedSize":4606986,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCctku/ugJalzm/dEFoadyqagu4BvEpAL3LLqne+p7k0gIgEkb2jPiWP7ff7+diKBteSRes039YBTFgv81dFoKJ6ag="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifmIvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0eQ//epuldZ4lZyjldcHQfzZ39obtZfn7VAN0giAzOOJ5GMjr9dN6\r\nPzcKYUq4hNBBLcYanYHVl7qWCow06Ff3TbIkg6gGEAI8DYa5T5l4cGt3bR5R\r\nAMKsAYrPLC9srFPc38meItp2wzTB+k3UZ4Zej6+Ojvvblips7uW3LiGCkFJN\r\n1Z2vx6kTe4n2GplUST34g9TAwJCBjndpf/27lqD5VXikTjnii/EpJ4PYv8Oe\r\n+k6JjVDs+fytilkP8fGSqG2aNN2Nr/hy/2ZLzvVlkC6+4vDRQwNE0A3h9kFa\r\nPXGx8oLdWdZMNATGrGXLCGXky8nY4mki6dz71KULArRJXBdBNpl45WUfTDv5\r\nV3RV8Xkj8l4cgLEm8T6+bwFOgRuZmoMnvCHhFF40bTRzaEYLdUYVET0FuTni\r\ndHZGbvXSd7NJaao739p/3u4eS90kSqDnGBIKEbroLEcAi6kZBsPBshBhsoLA\r\nk494jU3PHP7BRBg8+nnNLyp7iPX8NbGO7OK97pVceCve48DtuRIE157zbdu2\r\n9lzVIDrfDgh5/Pbs2+rS9hzt1PELV73wX3PMAv2dheNeXO1WaoJOpWgspMcJ\r\nv3jtya/NuPgVnEQdvgkFgA3AanLtNM9lkIlNocmV+AV6fc1bcYv4bdO41Und\r\nuqcZkKvR3hnm5yUqraAovWWhVeFp0yfaI64=\r\n=yXN4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.38_1652449838662_0.3413070298472567"},"_hasShrinkwrap":false},"2.4.6-beta.39":{"name":"ecsite-form-builder","version":"2.4.6-beta.39","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"442ec38506980d8540fddb1f2321b05d34ce86f7","_id":"ecsite-form-builder@2.4.6-beta.39","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-+VAix7wNRMXS3IDDdNgnjnDaB124cFXtjvPy3g7m4LGNV1XqWyUFY5D2SZ0OwrzJSisFDeBae4DeLGZQmFqLeA==","shasum":"783d322092b9576423ce8c5d2a26b0960a5c1ef9","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.39.tgz","fileCount":173,"unpackedSize":4603761,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEuNZd1Shpvp/VqGGZ+Pj+LNaPQsILumDmspMv73BJO1AiEAx+AjK+ZV9ZMkYzsAa+cDq5oI2va5knrqUI53M1eQTXg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijGApACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKzg/9FLXAQi0aP2gQf00iLCcqdH/c2TYqw7WsOuhCrb6PDjhhaB6w\r\nNo0ucid9uIshA6obgps7pBGo1hxOv0CCYBUtzenbFCoWHBYOafbT1pWmf/+3\r\n9jOW5S1if1lUx45wZl+3mKTrzqg/Mh8UhwwXMXiWEUt4y+CTOySN3k8o4JhQ\r\n09X09o3ubuz+DPPqBochHCP8iXPSCOO9mVanh9JpMpS7Kj7PA7a/GJZU9rbe\r\nbiMQwPahTrc7MMBGuiyXi0GSeYC8YJ6mav+U9oZJyvPUihwhiIg6FiO1sstC\r\nab9crGdTMgc6DRnDxIsCcMoSpcs7MKgOgCL8UOH+8pfzVEA6ekcXt0GQFmEr\r\nD0mGZCFxxF3T4lcecFnGMsyy4hJabev2IkR1GA19atxHZ45zE80V+HGxBkib\r\n/OE/ub05psEtIc6PZkil20kxIDPTQzXfNoa04jGfuoN3jfcVHdpuR6wpyWLf\r\nrx8iaKWQQAv87vh0Lfogkj9JHH5rQ7/UPSSxtbJwX/8g/VobX4E6nYQawe2Z\r\nU1l0XUdHoMciW0dj9sRMQSIgUYRjcWWggQYnZcP4OQtfxe6LWwkqtyWw1UrX\r\n2Z2ktS538uMloHiOypWZ3pecrOpmHtvPcWlgM4e92YyWLso4OdUgj5H+j6ep\r\n2ktkRKMoySYl4ndOHNf91bFQjb7XGlB3tcg=\r\n=/65D\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.39_1653366825681_0.6490430648764935"},"_hasShrinkwrap":false},"2.4.6-beta.40":{"name":"ecsite-form-builder","version":"2.4.6-beta.40","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"442ec38506980d8540fddb1f2321b05d34ce86f7","_id":"ecsite-form-builder@2.4.6-beta.40","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-KK/RGhORqzn3IFYNTOx49bKXESTUt7f42QuNBivIKAb1ZC98RktG2fUE81epcD+l7RGSpRkxrGIZaU6wjPM6IA==","shasum":"3591b29877d34f047530ce68280d564847989634","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.40.tgz","fileCount":173,"unpackedSize":4606893,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCex715QlOk13C8E3JZeQPjUNhW2HuK8hBTXM2QFfpr/wIgQLee9Uyq6zETgzB3DYwwQxzlT5IkGgb7FI8hK7e2EBE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijM02ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXBhAAg0J39w/ZsfpT+OPZ+0sySmVaUfaPKHBMSsAtRNAHBJ1BdUfF\r\nuLLkPUOhP8cG56LAAmmPIOC2s6ymDvcUSdJ594JeNiZu0N/x5ZqMSccRXrpk\r\nNLNz5I5ttQz1DYPw919kW0T2+mAnY5/7uIJfaekS1o4sLCcXIDqBvauyIenv\r\ntLkusJi+JonfVH2NsF6Sd4AItoLMinjsqnU4sF8HuNNvR/Ospf87vuR4K89P\r\ngQ52iTuUE52uTcn/xudA6JlKODid1UPlfkvGsZLjJyil/+l54snUulPgrt8t\r\ndJD4HQ/Wnt9svdUZy/Csr1tjaTb5UwR0Qnnwbl9zPOJmbdGetxR3YkfssM1A\r\nu/xiPS98FcRO3TuwYo35nURuuQxE7G/BfSqlEAD5htdJl3Or6xYNKf0gY4l1\r\njdmX3jLg1NLVlSdaFjyEhJpGxIBJitKfAtCUeNX0WQMs0kKzECxI0v+H5SIG\r\nor/14am11L8bVCPvsgPWHPuhVndlIDSiBQiQeBxvUiFUKlpC4g3VDVM178Kq\r\nsqF4gsdUeaLdQ2YblapXXlwIGXpGANLiMCx4P0txrshjsZCB8bezaIpSLX3d\r\nZHfaqmdhBZdcpO0s/xmTV6bixzjgSRTCeBA4CJ8yYweiTW2vhl0ENK8bR6pi\r\nmrPG/Z2ZECFep2gS4Frbpj5zJg0ogulJleE=\r\n=nlFX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.40_1653394742673_0.32797816957298154"},"_hasShrinkwrap":false},"2.4.6-beta.41":{"name":"ecsite-form-builder","version":"2.4.6-beta.41","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"c5892eb7c806d59aebe8ae076255f01ab6ebb734","_id":"ecsite-form-builder@2.4.6-beta.41","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-J7oBxKeU22CZzkWpep3ucolSymskEMjYsms8txk/xvbXDthtPWTeHtkRhCy5NiGUvF9+r8rACer3lb3xvJ1mMg==","shasum":"1c09afb3124e92fe3ffd44b482bde220490bb7ff","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.41.tgz","fileCount":173,"unpackedSize":4608032,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPzb7Jypnr9MLZoRLOyynTiijqQ8xTQSaNzG2PuP1NqgIhAKEkL1JxTozZmLyOiZGX3LXk+7Y+21pgEDCkMKergQ83"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijcXqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNYhAAg155w/tmjyFqdddAVPGuTmxOdRRtYq1dZrz571s6mm/G8yQS\r\nNNOZiSRVG/eomPS1fZfK68Vb1VraRolLTBvx5bPxjwEVJ8p/xLtICeBDBs98\r\ntQ5dWNi6so8iy2F3+5yDULCerXh08zjnkevDcDgkjBESwowaKNmdFZfO+eOz\r\nvOb/1wySi43HXDaNkR/GwnzMcD2Oc3XgKJX5my+Keupxn3+EjPzyzuYlAfET\r\nydx6gUjwgvNO36z5NeBP2/T+jYwrPXz75TUDT8zKIXgvzMUGa0rGkkt3J5l5\r\nFY7HqVmUBmQpu3klQZRXs7GaHYhhvHfh1EvK1SaQHUh74tE+CkMuNtTpFi1c\r\nP9kCvIkPWWsPrKDIgfI1hPZSxjgxu9tRCatJBnNqmrtjLTfFgkNHkP/dM82Z\r\npZDz5fkjVgxdm88j0oi1pXSrWgNRf9czl0OCx1i+Cf3rPexwzNJ8H82wy+dE\r\nHcLTjtBxqqEtjq5m3Atl4aXzzB2fKbrBqnRKhxxiVkZ81oCT6OEfOODPg6Mg\r\nMWIC6g1bGTYi6fkmSbhjhMjSeQiXioIm4vMayEPOZxbGFIrf/8a2P9Oe84+j\r\ngs+UkTRS9lOBcaEI+a+z1+TzdbZMkdKqw+gHEpAFNQQMmyvdWjHgKIq66e41\r\ngLL8owiDuRa1N8M1nZEEh4gMLxBGjeTJtGU=\r\n=o4Dj\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.41_1653458410516_0.739710882471035"},"_hasShrinkwrap":false},"2.4.6-beta.42":{"name":"ecsite-form-builder","version":"2.4.6-beta.42","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"c5892eb7c806d59aebe8ae076255f01ab6ebb734","_id":"ecsite-form-builder@2.4.6-beta.42","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-N6na0Tg7YtB19OjxN4PIpdqJ6d+95VrNsdLhDtga8AGJpz9jz/XUMtP+8EslHaAWIdvlKAl0BDNZwv8q2c0k3g==","shasum":"b83da8106fc3976060516d6bea70b725300baaca","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.42.tgz","fileCount":173,"unpackedSize":4607387,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHE+KUAlyPPWPSfHDu1MSePNPQT22HLVoPP8lIWJ1yQSAiEAyninLTsZGiumyYuKYptCvkwbTvrZO3RdWA6thoqSYM0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijdq+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNbA/+KS6q40EQfMCVFegw9g0a9zfq/uO/jMUWJ4ik3zy4tqbBzf0E\r\nOvRJYQhbtmHjwKwNnWaEsbJj4owPlSyTMKp4pKeEsf5CvgEmDi2vtGZSyVO2\r\ntIeisQJlXLPVGskJTDlwqXbv6HDpFqIMfkFst2fRgz3D17aHwkvphx862h3s\r\nmGC6zKofiVV3iMLqQz6Z8y1jEZTimgXHSgacjY7B9Xk2+HwtoOjzzu1IwGZ9\r\n5hOHOgz6w4Q90V+oLAMp79MPYfFBw0ICisypvy668uBbLs6RYZj7bILWP6rY\r\n4XDN/RH33+aquPwTqvUrUch6tRfv4R7ODXNRqLDNc+hKFHCANDb138dkfPq5\r\nMZGRa0CKgL4Y1WA4rkeb4wqSx1ekBS6nZb5Phldd+aHZs2titfFurwjTprWE\r\ngNww0vPO+wQfTALxFui6LYPpw7krNhCwY8GrkW7J3djNb3taFsBmerM0sTcH\r\nD5hUeRdd2ko1E/EUNom3cGT5tr4qyN5Tqsyk3ytVSyunvN7KSjA9pDiS+X8N\r\ntHDIhPdhf/xR/YGIRVbLK17+LGh0DcOrvCfJJy1GYn4Bzog56BwQ26xAovmf\r\nKzU3OFezb9hUIw/0U70VB0cjqu8jjszcRENP0TCkaAp0XntkBZe4gS+x3hJY\r\nVFJe7OeTSMxRD3lCrT7Y7fVN63KbECf9yIE=\r\n=a//q\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.42_1653463742135_0.32414816156505677"},"_hasShrinkwrap":false},"2.4.6-beta.43":{"name":"ecsite-form-builder","version":"2.4.6-beta.43","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"c5892eb7c806d59aebe8ae076255f01ab6ebb734","_id":"ecsite-form-builder@2.4.6-beta.43","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-ssvgtc63ghmqGcx6qXQGdkA9H2yBcmTPUVuAzjLLzq5vHmXBx5mS+MI4yGqTNuiTVxPnW0BiXMl0NHOMQsbNlA==","shasum":"5eeaea8f86ff87b7a38ce006461c658785d8fa10","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.43.tgz","fileCount":173,"unpackedSize":4607370,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBa8x+flZbBeOG+6gxbv/JAnoV88o2nd+XqPebHGLYWIAiAsdAYN7PU4ar0ytEqC31FsYk8495cfDD1GnWsf3vSMXQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijfFcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplCg//dQQF8b7Ae/i2IpjT6E4szeoF28vLGMB1bK70iEUX+r3rXn5/\r\n0lzLul1QuFtQr3KGgK6+6IZEJWl94WdQ2f0hI+gnwldn5SsrC5vamzXUrwbZ\r\nOQj3NVrGbjBu8zYpv6DKSapie1nvLgPtpxsngkjRTOJma1gBA4/xzRm/fMCH\r\ndD87kHJ85uD4Kn/bQ7+Ds7/Y9N5+S8UIxV8yRRbemEmZlRh21mo17zeWo8AC\r\nKxlLnJI5iU3Cy4q6jfggKgYs+7mItcMVkgx/QZUt+DhVTB8hfQtp1RQZ+NdX\r\noOl6kQowJnXZVRaa3rckBwRXd5jZVMw7uPMbT8KtcDzKlIcD9RS/1xsSGNBi\r\nz/SzKgmO2VKmXYe59zFCmSdUlCi1eZE+eypeobzb9DeuveewqYUnF8dm+eFP\r\n9HOPHDoyYlVsTEnSvuqUn9f6A46DrQVTY7MlXjiSmlYu5EYc74GEyVPD1dYA\r\nD0J9Cj++v3TI/6vr5yWth95V9q6kdxJuosZlXe4vWv09pllMNNVCHWwkkAmG\r\ny71/awKOdhKJI1rxtOeviP3MAJYjQo8SKcboMkpvGB0OtZJLgZuFVSnxOBR5\r\nweV5PIUazw6eo6PiaxSlgMSYoDcHLc6tl1e7P96SWSLxov9/mRZWlip4cIG+\r\nkQ85KXq/RXMolgigV/CrDBs/b0JelezpFVQ=\r\n=zYlS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.43_1653469531821_0.5417818965146293"},"_hasShrinkwrap":false},"2.4.6-beta.44":{"name":"ecsite-form-builder","version":"2.4.6-beta.44","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"c5892eb7c806d59aebe8ae076255f01ab6ebb734","_id":"ecsite-form-builder@2.4.6-beta.44","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-wKeEsWLvE/XwCHHQaJb5w8QHd8JLVLTFeDC3X+wqgbCA31hISiEk5O4az9k1R9I85+0o0ulBm3RFc6oYllbVDg==","shasum":"82192b877e83e73bf74f483e32677520ba0c7bce","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.44.tgz","fileCount":173,"unpackedSize":4608206,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB/2FX/gw8JsmNh2sLL4x4A29cKyCAt9MXXNzgWYkgHXAiBXMxp29tjCj2z3uZ94IyFiKygonmDvKH4YoFTNofdTOA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJij0yWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpw1RAAnF6fkMb3CqkLZKM7jOtpVG9rgUK3/6fGEXIuI3Rn9ljQgdxd\r\nqJuJix4m42wVkbvIr2xD5TXEUHRL3WMNYaYYSfeVagknCueHOJ4bqEr0tzHI\r\nxywTn03YxPVVSx2MFdUBr8VBPhoHA8VaVR4nl24WXEI0MBeE3wwADXbQAJBn\r\ndM2/X5onlDigygDgV9zKHgaym/3TBSTi/NiGplaPfxdGf4TM6JdwTGYd2skO\r\nboekFUTvAiz8VjvRz/QZi/6nl2PzKeiHbAsTxSzseQJB19ezcZ913Sp2K9O5\r\nE4bbzReHMJG+hCqOXAkyYQI1wBKd+c7xk4Dm8700h7ZOs1e2BOr39hyAy4Ug\r\nwyDLr8weXi3AlGZPVhAzOOjzxuyMn80qZJqs0NxxMK1Ae+3fFbfotB6UGu+G\r\n71OSYT82lWp8davLa6EAxqw2f1JB5pbFn/aQpk2SGf8dab49AmP91+FHioW+\r\nToudWk48zpS8vc5d/KjUg7fMcOGcwVvtFhOF3t7NP/3GTlvwbMyIP/8CAumB\r\nT8P5klVyZ7y/+7H+2QKkpxwzJZlFAL1prH7ODH6Lhv4sm/SdJ5HiQj+MBISm\r\n/gIU/q/8HWXJMgOjeTQLGruaq0hsoS1vgWUDqYTZYCnD8HjnKD/e7QR3mTRJ\r\nW8V1g7H/mI6R0LOrQYwmvkEjx2P3R7qt2DE=\r\n=l2vW\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.44_1653558422633_0.061862850815080916"},"_hasShrinkwrap":false},"2.4.6-beta.45":{"name":"ecsite-form-builder","version":"2.4.6-beta.45","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"c5892eb7c806d59aebe8ae076255f01ab6ebb734","_id":"ecsite-form-builder@2.4.6-beta.45","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-qt8lMktSMNKqldpFx8hLc+pCQhgzLCq2wqEp9wluDDDnT9PsClZTOeqfx1r8utmr9e97MgzScmBniCBLYz+dOw==","shasum":"d2c4c5c51a1d4430c4bdd56401877cf3717df57a","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.45.tgz","fileCount":173,"unpackedSize":4608402,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD4qzjtZa7gDHjXlB1G5PQO+eTpMJbZCmAQopib0PGBggIgYcyxyIMfVeVHNrUFZq4/B3k4ZpZG+Cox1XvyB+mVc/c="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJij1+OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwLw/9EI3HHDEm0WWx9c4EVEwOopGSYsTsKB1Ab/AW4Z0QUD1u+Nqf\r\nhSHFDXCnYUXB9m8wZG/RpXqQcGY4GBSCjKh4tGjUqVOD6CeKT6v/RUozkxR3\r\nX56goMgkoPNfqNqpxrC3/i/kh1UATJBl3n4Qxlw8B/0b0Z2miowQtRTB9bYl\r\n3y9DJ5ZOyj3MLvWCXNDyso83/kxZviiwYG4iGiI2H1jCTzqiELSeNAItazGA\r\n9mhziejbAE3dxAUVtniosoMLIAvXM+TWFGAqhAv34i9pRUlQeG57kep7AJm0\r\n5A4FQP8xouv2u4b0YFaDpT8+8gPrMQjLMHuarJ2e3WC85uPVvgKPEx/E8BSl\r\nZdK0n80PTW3dubozvnQJxbSE7L5maKc9niK0oM8uY8aJ/HCIZUNX7e/se+Yi\r\nAuB0qIDYd6LAvjRSD/Zjvul/6z5tXQmJC3Rd+AnJznrl+uwP9FU4zB2RQhO4\r\nTsgqg9z9cj1h65WeV0zf3GzMy2uuEHlLFvXQeCBEhGgxJeZdS1C4QJRVTpsA\r\n3zihqG+2om4TDr1ERrQT5v9tL8mwK2fIrpzi6Cs8K3Y7550RY/XDtYEexUU0\r\nD6uKNZMcyOBbatb0ovUpjInfwjf3gdRNUj9wp4TjBpGdKjunfh2jwolSmVQ5\r\nswxpjy7vP+fVjq1VeTRgI9FGYhTEwhzpd9A=\r\n=gdHi\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.45_1653563278091_0.8134730858814689"},"_hasShrinkwrap":false},"2.4.6-beta.46":{"name":"ecsite-form-builder","version":"2.4.6-beta.46","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"gitHead":"c5892eb7c806d59aebe8ae076255f01ab6ebb734","readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","_id":"ecsite-form-builder@2.4.6-beta.46","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-dP3zdDxcYRA7FQVQuRaFzVvAFNVe4PSIPoY93dWjVrbO8xIaKsRGWbntt4T/Xi44DY1STTEwdSdaavYymunkfQ==","shasum":"ff88627e48484fa1bf8ace7ea26f773915f63afa","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.46.tgz","fileCount":173,"unpackedSize":4609228,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRmb6+sKsUbFv8DW+h0mnZGLxMk9BqKR0oxtnaXapDAQIhAKI3gFzRDuX74SREn9EpaaP5dgrr1+Q+qgVce7g2D5ha"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJij4T0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrf/BAAlpOg23EmN0p5jIXtdjAvkcHk7SZ5087QEkuO6x7thP3+IBCS\r\nCzamqAysC90BRY3pjn77IHwwVltw37spMQYPwxqLe2w7p8aip3T0HpDmovx/\r\nA1VFLWvvkyrVC4gxszGC3Mf2d5reu5Ei7lBX9FisSeu5iihejLOuWzWL6MNk\r\nA5Ci5trBjSuRg1pihUVXbK2Lp8YNfZ5gzeeinckMatcz4432NP2AJdcxiqVx\r\nQT0/KnUj1oExzLL18Dv5Teo/iUCGhSUOQjVr59Bq6iRGTYUd+YZuqp2BvcRN\r\nhoNSfdMq2TT+i0rFQ8ZOK80bd4qcV85kqo+jgpdvjtw20qddSWQScw61JSyc\r\nYQhpeabs1+4WkHQ022xQsjWmTBCd5W2aeVQJGvbhenioqEWXT9zHc62zZRxv\r\nt7qrR/EIDSIyhYfqP/XU8wmviojl+ZJvphhsscQ2eT3jzUzfjVzecJhuYmJb\r\nllY8kZ1xJCGi7q4Z5QuW1lUbVf86wMjnZRYCE+cQE9ge+MevNh0Ipj3BhkDo\r\n8QqsmL77ZrvswghFTZPN3X5GzHt3Qu38LvNo6hn2MDxBM2eUfyPISw4EWMCK\r\npY30K5SlY6p0yWbZr5beiATyunPuBGL7b8NB3wRSubVkouaF7rsq7RtUiiOX\r\nyoM4vXMLeG+TLXynRmmMs4ReJr4Um+yp9s8=\r\n=OXem\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.46_1653572851879_0.3358066897095373"},"_hasShrinkwrap":false},"2.4.6-beta.47":{"name":"ecsite-form-builder","version":"2.4.6-beta.47","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"f68ef19d29dd637b0386c4734faa90aeac0daee3","_id":"ecsite-form-builder@2.4.6-beta.47","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-KyUcaRHSPo7ycydONHVwpUYTJnAxRH8OSAIA7jYxmuwl/B2RE9ch3gHdFRxInyscARCvwqmRDAC/fG1IpKonlQ==","shasum":"e7625de4c7ec7fa0b732c37a2a4bd082e14c28aa","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.47.tgz","fileCount":175,"unpackedSize":4608832,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEMAkUiEKLvz+LFNAkRmxk7Wxe97Yr4IYhceZB9xuXapAiAwqW/GmaWoE2YjkOrBoZMbnXVcjw4sF7XJtLWjR/FlgA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJij4lKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQtw/+IOCn68OZ+qkicAyMq9C61hMHAwGmYFeoCu365g29ZbZttBb1\r\nTAp9e+M5WuGyCA56GwXVLqq21KCxggJdxHYuFNV2ijLETaissrd0iqYaUeJ5\r\nCKUF+Iykoi6e71rjqftgeI/YS488NE+PoVSnqePh2N655KdcXCAj8sZWTHr6\r\npSJ7oqksNR8lnW7TTOEkcd0RgWYsSrYDeTDIg0nuECEqg8/V/AkQIwYUtDLi\r\nhhroi4T/kOShYZryJgGsWty+94PG9SiHUDPjs3VQxwKjsG9yrR/f45SBOsTc\r\n2F/wwKsHerk5aRRB1bn6M9FiTF5WIKnyG/N4r0b2XBnvBAHTqCju8XHBvrfO\r\nz11SKo1EW3Dk7dpdqOHGUMIAr4+Co4LK5xwZXPvZIvizwfSwMTXtZ3Jgl61L\r\nF9bvtY0j1PfhUuNrnGwQ4qomEH9g5IUHal8dfyw96DX4HssOwSfyMxU0joGr\r\nd2fYe2PzhfgjYB7gjrkeDkpHYXS4wY1z6fG8C6hcpk1Q+ld/ppirMMRw8bAE\r\ndTLrMzFXLAr2sHQhnm9r4LKIladgpLc71kjX7BA06GVCk7MzxcNc2Ghn8r+H\r\not/9ct8xiu6ogQ42kX0VO1r/uasMg9Yipg3CoZDUukzFVcExYzLZGdmg6gx6\r\nsGt0sUIXY3yeAKKG9a8wihFL76iA/uXUJ0Y=\r\n=/I1E\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.47_1653573961771_0.424233626688965"},"_hasShrinkwrap":false},"2.4.6-beta.48":{"name":"ecsite-form-builder","version":"2.4.6-beta.48","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"c5892eb7c806d59aebe8ae076255f01ab6ebb734","_id":"ecsite-form-builder@2.4.6-beta.48","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-mvFeNbaHQijby1TmvzcvVN2oXP3KC3r4V4Z67olPxLioYmFCiVPcIOSWxatMgEalyZBL8SzkVJXYPXFpp3Su/w==","shasum":"aca44e00744b0b3c70db8aee3ec6c1774f130721","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.48.tgz","fileCount":173,"unpackedSize":4609210,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBqEL6qmRQ9lhAbWtPeXPK4aqBi3wU6aaWuGjr0EGEqnAiEAh4ExWwBU/bRHSNAHSc4cAmzRnqhjiBYq9NWhq0DmaTI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJij5mkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqzfg/8DkTgQZ36BIu1iWqRUPFC9vPHwgbvbAIBcD7jfgXaIsa5yVeV\r\nVvAqo96LB/upVyN0m78GQlI8+UyY2fHrFx9VCqij/ZgfMVhrifCV1MXEW0nW\r\nhEY/MtyPi3gBYisYwSyTqjAK+kLuiaELtYT7jzaA9eHaxp0bL7e7w8/mjoSH\r\n5GoqT273XGc3JWXP4jgquwRfeFzQ4eHxkdWf9/S0YSvb5R37qogcDVpnRQQ5\r\ntWisHMK0ZxAmvg6/WPW0FlQatCUjWPDXHp8oooCe6AC8fxSis8Ppd+67SP25\r\ndtO8BNcJRWnaoXFoQXGTJGMm+2SKrLqno0jvG1t2kOdWRO6rPSP4ucoFKjZv\r\nuUmBrR+qTjxj12TeGYBXbvUAHCmV/HuNGB6cbasmJI+RpBT43fOcWzCbQugR\r\no45RhMfUhtFKOhcL7Sp+h5/SO/X330qW7AHAiqY403M20zJV84UJhh9xxKkt\r\nXlvok1AHeFOL/jOxzI/+6y8CftYrVKpvuuHar7/D0fj9jQT3jRZGnr/Ztc4h\r\nAbC4ZG7sjtdFs+g5Y8KMFw+TSRycWBDjSJsJt4Jn7RwHFiahVIXLn+VbO9gA\r\npiipXyz+I26jeDCYIfOgZGsDdQaDIo8YDTYw4wn1jAkA8jhT3L8VzsPoEUj/\r\nx/ZL/At/F70SrsQ62wu0CVauz3P98IYx8+8=\r\n=jmLM\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.48_1653578148138_0.08743325365495291"},"_hasShrinkwrap":false},"2.4.6-beta.49":{"name":"ecsite-form-builder","version":"2.4.6-beta.49","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"c5892eb7c806d59aebe8ae076255f01ab6ebb734","_id":"ecsite-form-builder@2.4.6-beta.49","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-T+hK/kiIF94wEgkz0YcBOsI0hZ41Lr4RYE8wlcMj4l521hIKwODcpsHA7S4oXUIehsiCI7k4dr5uPiEDcU3fHA==","shasum":"4279f1b596fceea5976c7d23903d96495b7f7ac1","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.49.tgz","fileCount":173,"unpackedSize":4609214,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDFHI5AtS2x3x+PQaakjCN5XF7OgTd92TTIh9rFXUwiqAiEAmUfM7ZbZKbTOswWJGa1HWP+q4DkHz1ovHKmL+PS+LD4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJij5zgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqj1hAAmjEmh4Q/GIK71cKvfduNNHCcpIpbKmUifVkNMoSK0Nhmem4j\r\n3IOUCndL9O8OPsyQPVHUMugZGp2pAKKKTzV5F2/FmyTEOkume4dPeMdPPA2C\r\nxVLL04SzpPH7HZw2dDdsM0026duM0ixMe/r/veASgd0wZJZ0axPV716V1OuU\r\nSfbWIW5wbUYJiEIIUpXudQg4H/WItmBYRv+8E9Z0NWQd8lWTq3nVrdlpcUsA\r\nw0c4LmcPqr+BFm+sesAocIbwOxiidhn8JVsDxfm36wSNK8BsT6DCiHBM8ygp\r\nyrwKuLWlXm7vuQQY1Y6jl4U1GF44cIb+iUi24g7Tf+KD6pCDZ84/vICebGWM\r\nrA7GFuM6fsWRuZsTwmG5jw7n5aGHXTyXOPeSViQ7XyvKyRUnEspvorNWQ182\r\novP6i/ILyVWFQgyh1efdYCU1AYsI6+S3HmSLBsfTGsDLGt4lccxHNMD3ndW2\r\n5HZKYzPuVFRTTrDa6Fi9Qp67YvfSCIM+bOBIpBtMeRjiW1H7zmbWI6eh8MgV\r\nCw5X+YZvXz+UwXj/5WFAKzybbPTlLrrKCKOOwrmdo90GNzc4W6nmeil+YBRi\r\nnJlbVZ426v15wCg5C/f0y941ZBSHWlIOpr7CTeS3ePjGC8MpOyGiI16Zpprk\r\nAWpUtgHtvnGmmeO07wgwTPJVfvZH9h194oo=\r\n=964S\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.49_1653578976667_0.1694603850134373"},"_hasShrinkwrap":false},"2.4.6-beta.50":{"name":"ecsite-form-builder","version":"2.4.6-beta.50","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"c5892eb7c806d59aebe8ae076255f01ab6ebb734","_id":"ecsite-form-builder@2.4.6-beta.50","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-VqtP2M4nuolry8c5SNyDzbjtxqB+OcwqgwTFXpKf6dypdmENiX6Dx9uHOY6EDEupJ7NJB9p0IdajvU88oCsFzQ==","shasum":"31f471d7b783e608ad0bb00a62bdeb5ba09451af","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.50.tgz","fileCount":173,"unpackedSize":4609111,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD99XMnWD+JDuXGJPWJe9eZIvl1FwqpHpP6HZ2imhM2WwIge7/9/c/VRzXiuNIagVmIqARdY2/3eCIrMJNh67/+LUo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJij6aFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrakA/+Mfk7fDLG5kMtpvh1Jb6cD5W+c+2wcpVOKnxHx9rT+2zsomL0\r\nTF/WbsjyIOp/TkVMbVeUuvmr+ye4Dr/vKZPfaXQuRT4ZKc4Gy5i2pX/vDnMc\r\n0EQEb6jkW9SFM72ae8dvTwQjOMWdwA4EDxVBHL/QlLuapRZpo9lrbkOXAqHG\r\n3qBRGrwo2bBLyBRkCnLFF/uhE42zu3IHZZbJNM7k9C83YWz630cB6IZ4QZF2\r\ngf+83vkHW8lmICA+qOHWqJNGEcQJY6XBJGNx+/HxrO1RFklZOUfkZw1dMOks\r\nngVO8GIhw0P0o2D328sqBu0cBbR1R6CwCzR49xbcyjPgfW8hztxp46pm/Tkw\r\njYIafFXSN5RTJ0pWiLfA/4IXexzUZUaYZCEGlKzKfF6o3e2bUdObU2QDK8x6\r\nD2ExAjPPJPxAS4ycWEJ0QFLkqJU0kZn9ItHHz4I8psy7H6Fqi+25QoexUtxw\r\nMnWzU/lMSCzpuRGCKxjcjnDCBs9UtYpFTpd7aOvE6kSj6LEP2R5jmjutL5ja\r\nfjTBlWKGVeEa8BF48VcevAqW1xZUtcWyp9fcgRMghVhmt0tPdTR4ONGn6xXB\r\n1vF0LJy4VEC+Vl4wLmh+VjDcfWQvRYrkM/SJvsYvF2eQKWrtAAiz1wX9exXk\r\nxLyAiH06tELY0KaoASevaVLK6aayUCFn9xg=\r\n=9zwc\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.50_1653581444724_0.2695447909875832"},"_hasShrinkwrap":false},"2.4.6-beta.51":{"name":"ecsite-form-builder","version":"2.4.6-beta.51","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"c5892eb7c806d59aebe8ae076255f01ab6ebb734","_id":"ecsite-form-builder@2.4.6-beta.51","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-4x1QvYCrXkRFiGWmS3Xu64I5/+Gghg/IcstdGr/bZmEdxxCyGwUzleIUHrnIIz8Rok3UELXC1du7sW3xxjKDKg==","shasum":"71cc52c87019cecfa0f78f655a003f11d627fc9c","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.51.tgz","fileCount":173,"unpackedSize":4609105,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdKn4Cjl69Z0hmztSWe4nfFu9kLHm/ZB52Yy9miFJwnAIgDP4XiJVg1VZtUA7w/Z2Qa+Y2MpiZQD1PX5mQPLaO22Y="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJij7wyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0JA//WIlWa0HhpN6WL2VIvIiXarBpY13qcdzij4rBAyE4b0HnymIw\r\nhdLmJYjusaNEa+q3qABAYRgFaYfP7xt/b2HoCgGyJBB0Nv4DxJLt5ANGFiXV\r\nNiVoXM/jGGKeII+Gstvqe78eS1j8bIbRe/Z8EW4QYRWHAJ8C6KWkvHDHHLco\r\neeh6Dbgz02lw3jik5PkpviSeucLy9p412jgo60Ba5+R4ZzvXA2R0jRPdYv49\r\nEPF6QBJq1VnBgmUQR5/UOsrJYgWjVWWB68BCMz0Uex8ConnaFk2T1MMqSFpQ\r\nwFTl+cjLY1IcWYi+Zu7bdBS8c8D1WDuDUNltUoS7YvTII1LchqBv+zuDz0jH\r\nzTJFAn+Wz1xGUAZ8k2eGYdMKhUX7QyS1Ro9JK4CMCQuWa+EELVUz3S6Evwtk\r\nN64lTTbFMR0L78MRjxzrlOwgQZkaehDbsva/ut4sRh9mzJHcNRGa43Kdnhj/\r\nTDkDAgA7sigSU3aTokqd3tEVB/6mzxtE5LimTb9qiV9rbzCe5W1y3y+frDai\r\nFRONZIUOrVMh8njdgW+bQZghzF7W9I45hxYd86VVhtDjRh852AyQRxrKzUyk\r\nZlGm5tEifzm9lrKgXgs/CCdAc27HDF3qlyGVlQ0UsZJQYCMHWTtWRTkEl/nB\r\niuO7BsxEH5tOGoxfGUIAib/u82IZgdwQ5EM=\r\n=So1z\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.51_1653586994540_0.33155256992187665"},"_hasShrinkwrap":false},"2.4.6-beta.52":{"name":"ecsite-form-builder","version":"2.4.6-beta.52","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"c564ec78c7e45cbf7838e9efaebdd0a60a0c7660","_id":"ecsite-form-builder@2.4.6-beta.52","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-wBHeH6du3XInNfwyTPEcTfX/cpUW+UP4oJBF9+8nQmcKk5biIIWhsxzqzwm0mNCmLaM3fFTVvVFsLQDlmv4rlg==","shasum":"689e04edfb44d207327091a76f5550672cc01cac","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.52.tgz","fileCount":173,"unpackedSize":4609089,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD29lB5ZHibtVFPMTWAy1oeaOM3LavkeecdK1kYtSYJOQIgJPOYE9VZSs0D/C3nEKQrKVT3tyb+0uy8GVfhzG1kpX4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJij8aEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoigg/+Pz2b+UUTogtEYBkDfMpUACZW1lBE2qTzsNgef5ZeSF7sT9j9\r\nZDPpyOD8HcRieX081RfN+AVLvTsAppOcyHHuigo3ERBzsr9rhU19vACQYSzj\r\n9pRGNtVFZdHSoyRoWZDBAb3ZfOQgMnyxE2/QxrgK0GKQo0/mPCC6WNubVWWd\r\n7uzg3+aDE9L4/JpU6gxjYpvJ3/3mkgKfsae5DcQjqkUA8QjO0eVQrWm9/+HC\r\nGOlQ+biOWJbKHh1TF8idiwH8kqhCKwI1Fcdexd9qIwQFk9uyAcjXvNuAc7L8\r\n0zI1/I93mHQXwp++Jj6OUdSSO6i3rDaL7BY2t1hLo6OD/lUEAa/FbU8pYmsu\r\nHo2SC/SLyGDB8UIDzOsWNNqHdxwIigwAGlEL/ly1knbsp3S2rE1wITtZfHCF\r\nM2EIpWFCjQdjsc+HsvYfGJak67xuGYwMqfYB7AKoZupsqOTw7wCFKyLKbJnr\r\nXKMakcTKIfrwjk310lmY+YCD4F2qFBBtCxfwBnCZeZ53wG5zXqh41v7V5jjg\r\nKRA7sdgvi3+PgjE4KkpivepcJ3Iz+ocxYeM8suqaIiV4rWheBBJn1oGQQ1N1\r\nUDMKU2u4G+h7Xn3K2EIPitiXo6ZQsqA6Q3rkjphlIdvrDLbBysOEziTBIpGU\r\nlCaX65dxwzUgPQ8j3aRonEpuOydmZq+JF1Q=\r\n=7lxR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.52_1653589636420_0.14043899531067816"},"_hasShrinkwrap":false},"2.4.6-beta.53":{"name":"ecsite-form-builder","version":"2.4.6-beta.53","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"dbf4ca71772c540dc138554127d3a799ff6acfb5","_id":"ecsite-form-builder@2.4.6-beta.53","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-XXYbT/1Ph37/d/bpYvbxdEl91Cd2SG2ZrBslquJbOE/I2WOaCQJJDFtSWRrg8AdLN2CuF+gs3c7UVthmy6QX+g==","shasum":"d49bb358640b2d897e040c21ed560f28060091cc","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.53.tgz","fileCount":175,"unpackedSize":4609101,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAvJwtnU8AjScqHY1zf2jNIsTZwJirbYmuYOADdtt9VuAiB/gBGkgHNxL8TKduOeSHJSJL/afMvW9upvGNokQTgqrw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJikPUFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhtQ/+IvPmhHaTjyz4vHG7oBnKZmqzzKH1wotlIT5YEUt3NLZhF57E\r\naaDkLOxQUI8QrSwsSZUD5IKWqCWSM8taT54Z/zT1jcK/JNKeQtNn0Dfy2yfp\r\nXlYL/m45hNzUVisCKOfz4cJJRWc9v6HDQTXkavqp0xE2dd8kGbUg/Ao9Fydx\r\nVxlVkLsBtokWZJ85hF6UpOI9YfKNKfvCBCjO0Lx92/f/X8DoU8TLnYwDbDwB\r\n3Qp+ZNg/i3AXLsRTquOFYLPe6XiBhdBIE+8LHfYAnqjZIgshU3ktGtOy0WXW\r\nSt4/gyTNzm/iMo/U/juD2AFtEniYSW5lh2whJAHQv1ua7Yr8MVjR1Lj5fg+C\r\nDeP6UO/+cg7sJhnY9VbDfstDdb+o8fEI2WWFImtVZF0tW8IadodSWfebTugG\r\nvNufCogcHbvJ9HDDeoHZeAzcn+YbiOBrZWcIqAPKbr6DDwgqK0b6uUCrDztc\r\n7kEr3Io3sbL1M1oA47oIwiOudCPluKeWtqXZNAUwp9FVl8a3d5d6LThHguhM\r\nD3iTp5BqVJBHy4Cw/8hMnhRwacZnSX5rUevo4IhfiGC6w8dFYRvDRlS47VYN\r\neO125ML3MeAIQpJtM9/0eNhp4QDsW69S8i1ggvP0y03NFsX28XVZoL3Wco0z\r\n6kPuVOUjzkG1IqWQLw6KRpY0pPAV24pqH6w=\r\n=VR0s\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.53_1653667077503_0.15134943042440452"},"_hasShrinkwrap":false},"2.4.6-beta.54":{"name":"ecsite-form-builder","version":"2.4.6-beta.54","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"51ca2ed210e82940da686e91623c03588ecf4f0e","_id":"ecsite-form-builder@2.4.6-beta.54","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-PatEUUuHwOQPVOCZLomZy6BRUse+pPMGJfIkXSLCpoBu7yUhX9b26+saQ6GJP6V9h4ATdlsnXnlaGbCrXWgC7Q==","shasum":"d6d5d174045341e939f51d788c37339ac2687a56","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.54.tgz","fileCount":175,"unpackedSize":4611219,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaN4hJ1oHW4+wbBYyT83/yiOn0pPDTGXK/bNMgm+7UsQIhAKD68AiMKCgNdHex9GgTUQW21d26V71dVHPocVNsI7B2"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJilGjLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKvQ//RkBvpzX68lBxpxsihtocahWDojpMDH+K6sP0Htxvmw6m+onG\r\nZD4Y2UDa/TRLhbzw2Ys+X7TvVn9o40AF3hvUoLE2Goobl/BADINTOZR7amJA\r\n+Nzpn3eTpLpbBgbqMANjn5eBi7H/qwnwyCe7VVOFPseddi0J06SdMeEnyqG4\r\nFr9TpziggxtqsbvqQYcFjPcVNH54Fu51WBMZXy/7nTOT2vt2QrguzSeiCVek\r\nG2GBtAjsZFktvCd4v4PC2kb3b6tnKR8ym74q4BQKhqSVZgp3NUh6j9mq3Ibv\r\n0fnh9m1yY/lk8NopNnPPDpHzipFCNAmKSZzdJEJLvF5mjYgmYL+M5Nfeu2dt\r\nNtMdbBK2pTq1WErc4CQviueId+iR2V6yCnVjZRkKvYMf1j60lqoJG7opO+Ax\r\nDPHRx+4MLmg+md0NRl1w7bAN3mDXvSB+t7pfHhJoJ+1xdQ1og6DSdBP0EF/k\r\n4eXlu0fekHUEaKs2L8TF8bjRSytgWebvupBtr7FC1wI0R5umxk0/KN6UStkA\r\nS6J7AWLU3Jds4SoTd0zeUJtrd3OhGERIqWeAdXXww8+YyhVpCQCv/vcasrse\r\nIc1AElXVKVRjSJNQZ+RGga/atqdGqtZMaunB+uRPDhl+6amlBfdKhjECq/It\r\nK/yOLB+5l6+IXKZYT6qDbUcQYLBKzrDAnLU=\r\n=iNjN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.54_1653893322869_0.9857956327447799"},"_hasShrinkwrap":false},"2.4.6-beta.55":{"name":"ecsite-form-builder","version":"2.4.6-beta.55","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"2979f6586785499eb2c5b4d93292d21c644b4675","_id":"ecsite-form-builder@2.4.6-beta.55","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-HtQ7PGeaMzKxgbjwe8NeSSAja8Ke43gTsl4064kaqR8M43MOCpLQqsGEbFF1Sb8WfgcxZwJeC+pzThlQe8mxhQ==","shasum":"560c73f5441c943eee5d9103ac292248281f9fbd","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.55.tgz","fileCount":173,"unpackedSize":4624823,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGH5GXKJ/YqxDF2Iiu0DpAvX10y0RoEaYkMxN5KQHkydAiAGD+5C7QooCEZFyYCR/eRmKGnBuFu3gqzBUCkf8T+Z4Q=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJilhx2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXUxAAk3ckZFH1sRokCTmb7grzldI+mhvYluI+BdfXDZTndm27shuz\r\nS/TdT/YsQVkrhjexV5PbEbAGsaz2Dydm4UjMZHZaNKSNO3y5f//b2BvArBv2\r\npMLehP0dH0Q0CZs0Dqx3oZETU7Jx8KsioCPpJELCzAHfFPqbtWTa5KbaKdeN\r\nSBr1zgkbiqOs9YRxBBPShW8RLZxHqaIn2/NLrOn5yPA0Dwi27xbhbExmtNbA\r\nBJDdouzxTf3aRlCvO59NRAKt4sYQARZy9lBRhTXrkWon/mpSsv/cNefqT6Kl\r\n5Xb2+wZp90pWEq4mOJ29oeoiGfM5QKBBfdWlNhMYqoG3KEInlK6fp8GTKHmD\r\nriLLBSD44WLOuz6mEpdFPWT4pWbN7oJdRiso1Wp+M7eM3eF2dAZ21lyROXXI\r\n7EDsStmvaWxDBsJvCuQHwRxx5E5RRUf7i1RSY4j0gQnDxrkcjT91qIFa/Q4q\r\n6yyTYVZnwzQsr5WMDyg2dRLoMAqMEFLbTIEpExzw19z8+UHqc+LQyNnwFLvO\r\nlytbMnGGKayqr1FWy4ECs0RdsNUbtrGEA/z7v+4qT9XSvYvBOMG78nym1Znq\r\n042ShReLsBjtGRVL8pDYudvhbnR5bBBEnOEi7el43hkRINWvPWg5FdX6DYCX\r\nrxrRen7Ky5M5M5UDSanbVh05WdvD4D/FCck=\r\n=5agE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.55_1654004853804_0.7038650910300606"},"_hasShrinkwrap":false},"2.4.6-beta.56":{"name":"ecsite-form-builder","version":"2.4.6-beta.56","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"2979f6586785499eb2c5b4d93292d21c644b4675","_id":"ecsite-form-builder@2.4.6-beta.56","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-23EHHh35Mfd4b3MsQbDeAvdx1oB+hRu2Rjx3KzfCXR6lmPwHOYkP39WY4Am9mAaAVGM/SOXXxuTn/2liqf8ETw==","shasum":"f780f19f797ae099770883b9b7db09fd0a7e764f","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.56.tgz","fileCount":173,"unpackedSize":4623661,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJD5W815ce5KijsFfphp9pyHFfQU07W+h0B6Zt2cP1ggIhAMIDjGvRiqp5xudnbkpj352MlvMgB/vbFkL/AeFdmz2e"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJilk37ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSSQ//QJRqGsYC0MKRm+i+dGb77l2VLH2KtAJb8u7dGgkq4EetA/2F\r\n9tqGiSoxIpW2mAf0aePaaZhlwOepx9bAoEKkwixRozq22Ea4bN95QW5CDbj8\r\nx8AeXynKESV9VTQuATKcbWF+skiSXPi6nvyHaXHb70QWRVKffgnJA4bzw1lN\r\nEDdI+K8VUjCfFA60AEAcJgLhp5o3Xfa09hXSXRWgEA6QSSUv/SJfSeZYeYAv\r\nyuKZcVsbSxxh2naE6VZcpTgsyVnHv+2u3MdfE6mdql0DT3zXybw4Y4w18YDD\r\nQBHh0J5X3UPcm30k1+dZJEjcYwU1FnqKh4+E1H4kPk2ML5IHuCtKEkAJTHGa\r\nnSGIPTiBumnKzJy0YjcFGSLGKge/4wM6IwDQVPVs4aRN4S3L4NxBxNDQsdRL\r\n7w/BSF6PwEtLS3BXXVVybYddsbPk8ie6WOVJvRSvQxCcCmLFv6UjeeRTBAyV\r\nQ8aYWdj1VnbsxgNQJTLH2doANGJAqVL5Ae0NhnmktjWmTb1+oOeCHWQt8SOE\r\n45PehfIQEB/LWpiMKI+JuYuTvuHEmwt7nHW7Ek5+mK5qcxfQ4zXkI6cI6SzZ\r\nnuFi9LJxC60Lpt1Ygfd3EZ8btZoV7rKptf56W7G7PJipJzYWHAzdwKwcaeR8\r\nqqZUDxTJlpj3hfYk+fHg0wFrn7RqJNeSCHk=\r\n=/VYY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.56_1654017531214_0.43045406111953954"},"_hasShrinkwrap":false},"2.4.6-beta.57":{"name":"ecsite-form-builder","version":"2.4.6-beta.57","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"2979f6586785499eb2c5b4d93292d21c644b4675","_id":"ecsite-form-builder@2.4.6-beta.57","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-pNe8oqrDOP33jlKU2BUM461eiNQolQqd0Cg6OATkD9yih1j/rvuKdCUvN3W/h51vWATWp4nyEGnOTOAL9znUAw==","shasum":"0e3299df347468163275c4ed28bbe7c38cbe9b69","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.57.tgz","fileCount":173,"unpackedSize":4626108,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTYI1HMOkVERPTIOhdg72eRXNIHFYY1ZgLG+ZuyD7TqAIhAPXwNb05hPlwKtn2LLIhEVRLmAlJleMCb7ptoTiiKsF4"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJilnoDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQqg//fKrLtQlN+ge0TCljHrCvEejJ+dLLj5XNaPs7JpmkUtkfeaNv\r\nvEwe8MnV1vO492liixnDrkHUtWYGyP1gxRBnIOQ7HCzu6w8BwuBDA5Z9abBN\r\nRoZpT7eMGbbCwzrWDmt8rYehSo9RJKA1MkpOs4/JLXf4TFZxHoD0XO2PXUJv\r\nFr6U75aMK2lQQl07hU1HZgWnHizjSJkHTks0cu3zImTCdlbF1fDFfa/NOxNp\r\n4u+03wVoubzuyq6pSVgKa3xqbCfhDAqv8SoyhDH0PYr+xWFuJaOlRrRaVq/E\r\nEA92uStmzvOGiyEAScX+CzPwl5j//EYbxHgjqtIT/S+4by8dx/1R6EY3fKqT\r\na0pYOiuYsyQTuYPn2yIfq/u4ImJ71o31MvYKbKbhEAuSuugkN0wE7OU9GJeQ\r\nMva1XCmdiSqN7tGxWsRy/wMwv3qZKKjM72nxzbTkSBEKGc9rCLDdzdjsfGnj\r\neF1jQsiNFMW+6qDQJaIhNq1kmUb2hFbCFPhsvckoxugJryVMGCp9/jzITEk2\r\npp2bf77h6uqwJlajNKh4ERkWJ9ELcQSz4pRVmyxiyl4kySREEODB7fqj+jWx\r\nMSc4Bxmh2Pg2wEU2qjdeQgYUmPgS7Rwn+mLJr/rBpcbEed2YPtUCYkzdr4lQ\r\nyN43/PmP0/y9Nx0Sl2jly7HIjemSbXvE+UQ=\r\n=jnye\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.57_1654028802899_0.1940580581800646"},"_hasShrinkwrap":false},"2.4.6-beta.58":{"name":"ecsite-form-builder","version":"2.4.6-beta.58","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"2979f6586785499eb2c5b4d93292d21c644b4675","_id":"ecsite-form-builder@2.4.6-beta.58","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-xhkXaDaWf1N+zExoavHLgEF3GIjxL1nWY73NBkBCgPiksJAYvifhWTq/XLhABy+sVlk5/wxwIJc0RaWn+arhug==","shasum":"2a5d63edcaf159d742510e863b71aeb90ed4ad4e","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.58.tgz","fileCount":173,"unpackedSize":4625476,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHkbLZVlqi7HoSq9WW25QgVTgjt83B60B2f8CYNlSvDCAiAxY7vje/4Yms63JwCWE0PtWZYJzTO94SH9N6IT3eXVbg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiln49ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYnQ//a6kcKPpcQ3j0WR4g5b4DRIRYMqdfazGf/QVfH+T+CuIgG9q/\r\n8jxLmaslf3NDBG8t16CXPDG/7Mzi+GvJL4OiRg/jI31BiM15kVdZlZpCItai\r\nImXHqwm6gGjHzJJxOiLlSsRDgjRP7R5dROVyLeaCgZokhJO/sReDYb0ts5lo\r\nqyj+IO6l+4sGjIjS1LPmTxXBAfK771gieI8bW0QWEYNfxlg/JGYpywg2KxMz\r\n8Ul849iJ66Tl1Ist7E0Oj9y6dKJYW/ompgDVbYwCiY37zpe9mBlYgszixFeO\r\n7YklINbzll9zvkurR9PxqYgbczGxvy4avmMPsmxRDLJ0LXEgHzvc3yemWulB\r\nm82XQfH6/5HDRWL5bkUtrFgKz+70HAzYqa5gZuNMrL7hCcweTT0c98xzXUt1\r\nHcH13iwu2tXvBrKmyvXSdAgiKUA+pfAk4/DyR1dvdOHy2m9wh5aOvoFYKptO\r\nVZn0ifDBlJDJ6GTegyUzEiuuwG7Njj3C9Yca8TOnLSmRPx2NabQZgsHA1ic5\r\npmJuRTVaAkVN9NOZI1jvYCUAFPVN/uOPINZt0EQkGNI38FaiSGYl9oUQjbNK\r\nQUiGt5fG5zHPN54+6sbJkbuVcYDcQwlLTIq4D0ruW124cgkdjzn7cFawiNir\r\n1H9n/232TMrTbx0jRbetllLg4uOM9gKSQv8=\r\n=0o3u\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.58_1654029884914_0.09510056084552665"},"_hasShrinkwrap":false},"2.4.6-beta.60":{"name":"ecsite-form-builder","version":"2.4.6-beta.60","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"2979f6586785499eb2c5b4d93292d21c644b4675","_id":"ecsite-form-builder@2.4.6-beta.60","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-QM0GdVUdEJdhpT6p6+k8I6/w+0GjpvoTuPtXif2SKP/2pPhCEnmS+NH8TVLrZFHc/ZC2pj7DUxvy+uoyDpjRKQ==","shasum":"e55981be8ed55b33876557860f1c88a9b35bc97e","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.60.tgz","fileCount":173,"unpackedSize":4625067,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGVnSy1utJBcBOcwmacvAm7ioh1cYOXbXpEaOTNtV43yAiA/A7j2n/KbRSe+/RSkdUCQrAZo5XBGdFJ+947411n30w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiloRIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrhaw//ZFTrFyCe7EcCf0kY7z9//mzFzcm9NysgFKQsb6VBwxWdXauZ\r\nLdY0pRDd3Yju8Mf9zY4xbo16IbwQLub9DmpbLA1rbeqqk0+pG5AkNk6ASLzP\r\nP4Z59ndWKqlHe/xDnTUCDYs4am7f9weSBinZo+SpFrrq1f2rI+ADQpqosk9s\r\nFt1LbmcJutJ1W8QyI8f7A1KX82m2TunbmkNBkiHkcRvkIdEUhy9XzR82xk/a\r\ny/7yUAqSvKmMRyNH7sQE9dX9ScyasegTYkMRGPcwaXifQO5bTowZOthgzhQz\r\nxQQvFnQi0G9xrV8B5X0zGIbY0+b2GApQD3vz4lkRLJNK6cr2T1m6pTeT39XQ\r\njxG2twvf3DKxi1q7KYc43OfFIbX2Qr2fBIKjQGc54O2ixAGIeEKon+XCI1hZ\r\nudXaoRjoo11wyy+AUsopVUo5Ao9/zbyiV6dB8Tj8S2bVIxwRLKKJ0l2gZUyY\r\nXjyKT2TtV+WT2ZFHHngayH8Vhpf+TPX1bLXA8Kd8pZe4hf1/ErJpQaESF2Sk\r\n7OrmCbewLWK4lkFp4TLSMXJ4RLrX4sb3DWsyYwEoqXIg8f68Ez4tTpT/CM/r\r\nMwuyKiJ74Sot8wJoojbjV6izJc/+gm7GO1JCefxwxOeFmcGtM3Jw1HFJMVEc\r\nfJPr/b74L/KJqm7ysu+AjlP/DFZ38Jh8/eM=\r\n=S3Yl\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.60_1654031431892_0.3373902694570461"},"_hasShrinkwrap":false},"2.4.6-beta.61":{"name":"ecsite-form-builder","version":"2.4.6-beta.61","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"1aad4250b7e342a2c6232af52aa98f7d914681d0","_id":"ecsite-form-builder@2.4.6-beta.61","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-ibW42zlDxqoD34SvMB1YskKQaxYmDfcg6cXpgfjqzFmeugVerIn31MBw0V2pOtA9Z9cY4c90sje2rppxZGbMjw==","shasum":"071c2ba5e0baf1346b83e2c898baafdf26f05301","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.61.tgz","fileCount":173,"unpackedSize":4653110,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHuSSqggB6RAZSlemjKlasyNpGCFfMW9Ax/uAzzVccgKAiEA23zwOTSGpT06A3UAtCd7tp+JCBO4t/6qri/b6D00RZ4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJil4n7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJVBAAmj/oU14MRmmMlvDedwowwZz2bxooDpuWZXdnWFmbSiTB0g++\r\nLNsOOqESDbY8rmkLvflQVCf2MAl5nJLwcWMPdmCEsdifDSOz4GkhEMi5/8C9\r\nVcaHqfVDTz24DAhdrfSNaQHaoDcKqOclltu8VkWL7mhihL/sL9x8UfDuIMhw\r\nV21hLbp18+RTvaJKztoH2wmXcXAXd1uIOHcsX69PWZD8+YEYxRmOrW3bw1Xo\r\nr1rpDaci4ETIR70dTRr2xIVS6pZM+14K/giNFLtyYM3N/nz8WzZkib70e9Rc\r\n4dbNvY3q1TrjiL0Onw1U8V36SyYO4RMuonqqlzZlhWpvwyvjiosz8AveFhFc\r\nZbCkkMtOgJTKABuKmlngP7RE7IyorvesqeVdHHdlNWmBm8/4e2QqatYD2X59\r\nMsdGHdFN9v3kiuP6ZQq3asn7BqHi2ONbccgyuV70dTE3nWV9scqjncihVk+p\r\n7yfNyuCB3U/WeMy4zi48aBFDPE4R7kPJorTDgU5YvNeQe2ielrUW5Ed+n4nl\r\nX/mBVoy8qp04KrWpyKW4VeZs4Mn90T7yF+uAk4PRRDOBy8x8alOLirccjisQ\r\n8fHs5nODATTxEwiPzIIKHoK+jkT2Qomwaf7BbdWggTGFIyE/aQu0qGtHzMBI\r\nEP/b8iklGAkW3NsUqUd2jR0U1R2/1zkIbqU=\r\n=rVaX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.61_1654098427283_0.14495153546352446"},"_hasShrinkwrap":false},"2.4.6-beta.62":{"name":"ecsite-form-builder","version":"2.4.6-beta.62","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"1aad4250b7e342a2c6232af52aa98f7d914681d0","_id":"ecsite-form-builder@2.4.6-beta.62","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-RntDHJqJGkadHj6ctmNx4NH93/RgeZrRZ0Cu4G20Jk5Zfr5rEGW4jUC7plyOwzhERWin6NxBjGtRSYl8RlP5tg==","shasum":"c59411ecbc45df43f31d02b14cd0d6463828d4ef","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.62.tgz","fileCount":173,"unpackedSize":4653107,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICY6JbedwXraghP4Ts/wQ2YJg9S95lAtzoIiOZ5A8uihAiEAqXXu8GteHRFyYGJ1/qMi3WSh/FtMJ/U9NMv5vfWXuco="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJimDqXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoG3w/5AFTV3VaGxvFfw198Edj61ba56IbbX5yl3wnDLwMKP5l8sNpD\r\n/B/BNT96vm/kk+iFdfc8ep7O60+55PKqgkL75h/VrZwJz7N7kzFKEig5/+ta\r\n7zDqjY1+fa8Noo3wxfpZV5q4girdu04iWo6arzJZUvV2qZm7aEzpjNISw0l9\r\nJhBiLyII/+ARUWLbDb1AyZnDOswQEzpjQaeGSoBwfkVeto/3IDJFS35gOQzi\r\nUkAb83i8iVm5puA3tE+Dc3yeaMAc26ceDKnQHLjksbh0CjMsfK9Xo5PaxDDr\r\nWEtyVm+uqMGMotuZG8I0pFh8TFc1MznKfC4Y2VpwqAaFgjlhlM62iOzTtQZ9\r\nAI6bCxjHVydqeHwdONO9MPF1Jb4iGlgkKezmrDMvCQd9DH4vcFeexPqVgIS8\r\nrPC5IR0X3rMLVKizB0kyAnO24jkhnRBaMz3r4u69w9zbih00Onn80QHWBUHR\r\ngxeQZndBW2qL8VV6aMDDvCeEMKZ0ZDMZrfIJw0d3PHx7FTGJKbcyI3tosToX\r\nb6WQ+fzgXJesK2kgEO86zaIeUxVzUn3evTikdlLxbCTAMGW2xRvhsqPPaOpF\r\nG1JVEZ1FjsHzM2HvzLBzUSwiVHhbtL/Mgn81lcCRyKXm/xl3vDf+CgSLgs1t\r\n8kNF1wYRZ7LhzrATgM3FEPIRKwgCEa7qtFg=\r\n=jmP6\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.62_1654143639368_0.06372803113652781"},"_hasShrinkwrap":false},"2.4.6-beta.63":{"name":"ecsite-form-builder","version":"2.4.6-beta.63","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"1aad4250b7e342a2c6232af52aa98f7d914681d0","_id":"ecsite-form-builder@2.4.6-beta.63","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-SqGbp1cOiOH+sf8Kc3zFaNt80HTpXXbuLztF0S4E184DLkKISWx+fDdZn2wgW0ekmXJBBJbb3Y4m2dtw16Gzwg==","shasum":"af0f2ff4d5a8e7cd561c504ec373a718cc173c6c","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.63.tgz","fileCount":173,"unpackedSize":4632592,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDd8wJGFHX6us47fGjwUErydCJmGHwzcsTdRc2+xL6kHAIhAIL1V3TH3P5PHIRNV1bHSxDTuB7ceMnxu52WVb3Fdu5W"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJimHfXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmob3w//WN624SxoiVjOTZC/KoZLwZd8OAxkFJTig+vVz0+fkh+VstVo\r\nZzyMVlwWTVqfy5wY7Fv+mbG3Ql5NVhHND4WOBGX37inPbATBmHWtzGosCnIc\r\nlpuLNlIz5tGnCBpAsjC7xHFU4CFXoh7su+LnQ5k13J/QcRfcVe4eUoaPtHbp\r\nrC/DmHJIt4MF/qw3sAqDqzOZV7t6yq2UzqH/lPF3tAXCkULVu8TPK1qU0nuB\r\naSkyCnudyp/jQt7AUiProQBRJDwadDC05Be7cLrtJTGmh6z6+4ea2jcNMaHW\r\n66j5CG8AnbpOVbC+3s0wULLq6VOl+LUG5KuzulVvYq5ziySCeUXJ2uHsHJsa\r\nCHmObBYx8kBNXKTPX8b0EPqNc4ScxxLvXRhfJzz7OiLGhu15RCPl01vNlVM+\r\nMbhjIUEe3Gl7CA9LuQjSpnMo+yBtSrA+m4gNiaAwUirnr9vBoBrxxGezA9Js\r\n8m3KW53PMZVBE4GRQd5RgNiyOWKDx7vxy0Z9f/GnmO8c7WIovq3dIqzFDilA\r\nqExJADcVct723Qxlg8i8f17AjKZrv2wLYoWpGHYeJov7VLRQQFZ7y7HWfWoW\r\nrrmD046V7a8h/i+h5rZ0mPY1hpR2u3FAzxJtvNUNYItBJwQPmMmaNawGoSVL\r\nP/pJzIgZLnYLDUv7d6c66JQKsXBh0RXZqhI=\r\n=/i+7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.63_1654159319036_0.9529483144120106"},"_hasShrinkwrap":false},"2.4.6-beta.59":{"name":"ecsite-form-builder","version":"2.4.6-beta.59","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"6a985d4e36b94d25e79df036c043056775f55f3b","_id":"ecsite-form-builder@2.4.6-beta.59","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-4t37Sjl2z9ynrwW2M5djYsYWsgYIyC2okCS9D0r5DrlJaCSswjDek47DGSC81Oz6N1IKQa3BqVg961bceXjlIQ==","shasum":"3f92103c9f37a527693208769f99b99fea121b61","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.59.tgz","fileCount":175,"unpackedSize":4611029,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0zEOT88VSpOVIN1yoe0NIZWcebLihS/ONBECQre/TwAIhAPe22q71m1/0Un+o/uKcKvyzjz9BPEj4Sg45KUO82Cr0"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJimJAEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVPQ//URj2hOoiot+co+lvEbTLkAkjbOzMuo/fWKA8jPaxserSt5ky\r\nNZNNAvlZjC/CxM6j4DG29806YSChSR1q947+XQrUjFQph+g+1Z9pU/ZPqKx0\r\naxPFC/Lb3yBmfenH2LbMMulIHyrYY4XCDzqv2meQwCqCpIvN4R7SE0Aj/uAW\r\na+XOISyFNvt3fEL9zdPdl7a8yjrH5kqUhjBJi5RtOhoozR4DgsLPfP/oQJmO\r\nPlkV/YfH9dVixaFA/aGBE9aoIcAJ7R03XvBl8Qxr8mYIiuHidQYGfUlQisCs\r\nOnO/Up/sQkT48oWsrhZC8sip6UoHHXPcgSNioVlxQ2NDll+aHM5G4P3lYgG4\r\nGDoFK16bL26IzqaSg3oJAJ+UjuOvVB/+VDsJoriRvUAwIQxg2IZm3QNX8I4K\r\nw93Zq3XFACBx2OnDAo4sX42DO+4HsIAUXisqyYlRAI00XlNlFFFY29lOnD7V\r\n35pa3GluUMWU3Hai1Fa6kPmqjZzO9ybC8QLNTDBABwRQfF+Ey7H+J/rwiFgt\r\nWEQG9seyjeBvXTDY/a4X6DEq53mO5YoZZ4Yr+YHZIeNEuiiPWtmOHzIeNVBq\r\nMtBkWhKnFq1wjVUiROn2x0Bq4N+Z3FlxIswtWbHPOXuFyOfVUhrKP00mqxKm\r\nIoODrH7Rf/epQ1ECNmMC7sLJpbBFmWPIRwk=\r\n=2S8S\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.59_1654165508043_0.23139652319718618"},"_hasShrinkwrap":false},"2.4.6-beta.64":{"name":"ecsite-form-builder","version":"2.4.6-beta.64","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"1aad4250b7e342a2c6232af52aa98f7d914681d0","_id":"ecsite-form-builder@2.4.6-beta.64","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-FBPuBvpskkiQsOTecNPblA43g3IPEaEmab1t+J4MylwbEoqxjmnL2n8fjkrtfpTG74seHrYggEqz3hnKLI6hGg==","shasum":"68a98e29d73d915a72b27e8ea0eecbcf8d3910b1","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.64.tgz","fileCount":173,"unpackedSize":4654900,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAJb/z84ao2inGf7ME0TurYyYdHexz3s/g7xyzZs3TSLAiAlxf+OQhf+jUkKnYV8ySvcYvvPZDD897qviGIQhSivYw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJimKJ6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoz8g//VTjo8LM3U8shT0C01bXb9aUnKp36wH3LWQqQVLWmJ8Ko+AZI\r\niT9pp4kbPye/v6Ohup+34SYbRWp3oMjwUxrOnFY5jH8sGSAeErguYHxvuDO/\r\nXjqKy+KrxNOgK5TKhx0VZn8oMW/QPAJmh9DUnArZuWGs91HbsjRPwt46HmIH\r\niqEgCcArIQKO9YfwhmY3GrIyJuN1KCwVSJ347BPHzOaqs8ZKDo36ZI50xhZ/\r\nAqBVgN7VcHyjB5B7xhjhPtTLfsc5LDJahtBFkA07STjAKbqy7YTCnNWqqKx1\r\nBJZ+0JfhNle1/yxZUIURTNnKPsKIbhNDAEIEfJWz07TGLGgE5dMC0PFmWUxD\r\nTw9chdc6qOntx/VO9xNTDWo3nxy6YotVuN/zq0e5H3PAXFdQvNvB1Eozj01f\r\ny8ju/j4qz18/VjavIyKmX8va8zsd18nuRJMbtRhjr+8WygneLG2fq5ehnbb3\r\n85Mvybu0R+cfUUb+UcfdbLx9+6Warb0vwuX20Rd/Hhmy0M2z4gMwuuaIcUPv\r\nPV/DBTr2SBUa9sBB4yD2VxJpjezLLsLTcU2G4NCKa4KD8QIeUSjyjV2bCpfy\r\nSNMmfUxM7v0Jchv81ZjSCaAY9O001JgR7tUWCDSontxZWjSH6iiMxcKKHz/s\r\nW4xmffSlndxbP2SXcipa+uzDiXvHqJb7G7U=\r\n=EVyf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.64_1654170233838_0.3567906214432086"},"_hasShrinkwrap":false},"2.4.6-beta.65":{"name":"ecsite-form-builder","version":"2.4.6-beta.65","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"d1cb28b28cdf473923bf8fa94ac349423def8831","_id":"ecsite-form-builder@2.4.6-beta.65","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-6CfE45xqtYIoWJTL2tA7lxlIXctqjJjuFYCbi1vnjknaoApvvzTrLLWO5ZDauKocEfE6HoPcbeRkwX/cB8NTFQ==","shasum":"92ff25668c53f4fe00c5f0262a26c7e2496e2def","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.65.tgz","fileCount":175,"unpackedSize":4626967,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFHifuBcl9k3Q5IijhotT4CvcWhRq9s+P1Z2CH+6+eIVAiEAxIlaj/wV5z68Vkavz9xC7kx3X3QwtGIKfNUtJJdQ8fo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJimNOsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2Yg/+LfJG6BWKAPs5dautUt/q/BTKMF8/ZszMxVKIxQgf7mZO8HJl\r\nDjGIP8jVwNkRRFX8TFcVqQJypS1bJlJbyFa9WcN87ofcN8kMxEvVvVP1g2Sn\r\nh4GDb6SjrzFYhhDigNW5A0L7+4y4+eVWShqtOF8Qf3joaMKmlyaZN4Ro6GAw\r\njQV7JENoDQq/GAlL9TQJMK87302m7+PN5VjATWNRh7CcHe43kuGszx6rl/sX\r\nxcZS9hZDBeDID1w6/G259AlwMBmQ9ZG9aWMdZhgZZDSvlkB1jafO4Q9hGR55\r\nL3kXdetmeJ0OHacsUzd0RuZR3KwYt2d4SKkh59SXoFEm+Pn6dJn5KI8C6Jlz\r\nk9nC2P64ggrqYoTq01Eh1aBeUdAQBILNJpKaYmZs2pY157NnHfm7lfaENtNA\r\n680EfAdqVyM465TL6H/BPvHpcZIuksVP44WSndEhKIjLn1aUUCSUIxx0YBQ/\r\nxLRgOHFtJMk4v5Wdl1k8kh2yYVxCwzK4fBxJO6fRcDxhVd477lDOs/2e4wR6\r\n1atKwaSXbOISy9zJOJmCSc3rE2B8QQiy+eiEdxIFGt8VZ6pcFNZGUvSskSKg\r\n6TgRHtVluNbp8Alz5eyysBbc2Qhxs5x43wklmwnLJSXZZGJzs0qfr39jPcVa\r\nJN6cQkQyQpCp1MwxAsf2P1ybXx6LcyvDbZM=\r\n=WzAD\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.65_1654182828007_0.5054232503334339"},"_hasShrinkwrap":false},"2.4.6-beta.66":{"name":"ecsite-form-builder","version":"2.4.6-beta.66","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"411e67badbb16644c8cd7ea19405c2ac7d451549","_id":"ecsite-form-builder@2.4.6-beta.66","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-JHESRbnmg908NvDSORciVMIRAaAPyCi8PyyD2ukv3HodWvfvw3eZO5rzBUqCM9MDQDPyLcf/DbiIBp0aNTXbnA==","shasum":"c16b687c133ed5c835cbc4664800077c5cf2a418","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.66.tgz","fileCount":175,"unpackedSize":4649471,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDU28W5H0WXt88d3AjBqxfSx2u/AfPOa/XMqTNdw5s+hQIgK0ujhWUbNYG2LnwufXdGbkcmr/68lFj7B9RAytP9Sa4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJimZx/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpE3Q/9ElwuXJD+i30xhP2s8jp0uZoqZf8os731cSYBrX84eN1y+CyX\r\ntuHXg7nxFP5C6/NBNU01V1XHf7C5jtDHoolybfsgelGqf4Rk6oY+uLaqG9Tx\r\nNBQqXIT46zdEFkvkgI0x8FcLutqihs5cvNpEPTHWbCf2NWcmlbhgC3ub9z4d\r\nYs5m95gWY73Oh/11qm2X6ti4IcvD2v1d9bGpSErf+Fgg/nXMcdo5q3qQkrC5\r\nOf2/cr6ySZP+nESo/y+VwyoFDWZGg1N8MyzLCmVAujpqDZL2zJIxEo6ubWMU\r\n4ZPSKEx8UZ2uAe1cRV4ndu4Oss1GMa62mSE+p5wtxYjpDTgbKl93b4Thw4Nd\r\nCMe6kj0iw+Xhd6NGvLlxIU/NkTp9HGqO8HXy1SHaZ09mER3vVzwm+yrOrOCd\r\nFX05AHnNgXojrvk4ZcZjOLEnxnpaRAzjV0CHHgCaTwA0Y4BS0b81xKuwRzwB\r\nvtkfcAIwyATbhUbYvaU2J0+PWhuTFsF62vN1WIwSrVIJ/fGgKMLRPjiq/fmh\r\nHKt58Xl4xDN128Am1kieFUnBUZ2S5MlxWds6s5CULygcjDed3lZdvxPGtMta\r\nL2PiIX83y578kD7jbQBhP6om69/v3pF7rOz5QMycxwT8lDAS7sltiTt7d4x8\r\npIYkCT9LfNGU2pNiy2RJ093ZvFDuL05r2RU=\r\n=sNvE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.66_1654234239178_0.11386715661531932"},"_hasShrinkwrap":false},"2.4.6-beta.67":{"name":"ecsite-form-builder","version":"2.4.6-beta.67","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"411e67badbb16644c8cd7ea19405c2ac7d451549","_id":"ecsite-form-builder@2.4.6-beta.67","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-2eSnJpnp6I+UuWm6mBGaKkJAC8we+HUpeFTK6sw/qkeaqWTIpd2xAq+s7NvvzV4NMTwLX5LyOrJttgcnJK92Gw==","shasum":"4c39d87a5ec309219df3118eb9e0a27dd667ca02","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.67.tgz","fileCount":175,"unpackedSize":4649714,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaBAlFICzy1J0gb1U6zqIbtqhVX8yKHXFuUmtd4Lbu5gIgBvWkhdZAWnBSUD3WV+PRDce2kj5y5E+ysCncO4vzrDM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJimgWsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo96A/+ISlAemeVBm2pSvPZ5Hy9i6QfufkUtqYXPfrZobvpmUeGVE62\r\nV6sDHqe3M/TIFJJpTeUM2pcHD75oAQ1lSnHnPa3PnbCzMSFiM4KbbO/kue8Z\r\noCFyKvDNvJCbzp1tkRwCKd5ZzyLI8xEcuNs/TrYV0fageVQ+BHH4E6Q6vgTM\r\n7FWIu58cySQc+TZ2VUaheWDXkh/uupdydzpjk3kl2M9T8loUtFckrJJh/qEe\r\ni1mNHDt48S9t22tLbMA+IoZ1FzmsdNo9jjzVa6zny33YklnOgpwvJWaisveE\r\njakGCN1oEl+NwrnE7u97hAv4D9J4WRfCBVuLWb9VCgAZiweh55TiksqTDGCO\r\nkOgbT/hs8Yq3NJs/xB4K1Jad1QTvo7HV2l/w9k3Vtx6ueKID6YSUWpXV+WNc\r\n9LKblBODKRecHB+LBDob4+s+bkzg8RORxrKIW6p7ItR99Oi8WeeQ1uCNErKJ\r\nyRxSSYUisb+qGyFU2r2sOnn+F1Ec6aBDlYifz3saMItpHOcMthcuW1ooRnIO\r\nyGdcIuljT8u7CpRdkpas3iDXzOwKMX5UDWLQRbY5nCMSkEjWTC9oGfixsc1v\r\nORntoaXuJsMrtVN98DHJqJj4pyGhGlhGRuHOqOqtfn3zmZlgXe6ktMLtxStX\r\nlLzJrTy2thCCpqmxvEXD+bphxO83oAu3KOc=\r\n=tfd1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.67_1654261163882_0.3993264670998944"},"_hasShrinkwrap":false},"2.4.6-beta.68":{"name":"ecsite-form-builder","version":"2.4.6-beta.68","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"83288c0965cbe0cea894552e01e4d64d9d2d8f83","_id":"ecsite-form-builder@2.4.6-beta.68","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-0owKoYd0WmQ6XfzB5dMENp6hsbUR4rl48LHPFqgVxA5XUtOSrMlz5PvG0GhqPzaQumaEoLVtK3v5mWX8OaKwKQ==","shasum":"5a5b5969ab2ee430737873f47f264bcf10c21b34","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.68.tgz","fileCount":173,"unpackedSize":4642358,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRjUVBBp/E8JwDY0wIzfzj3CAtS0T6kBJh/b+6jxWKIAIhAPmq6oP/+Hq0QnJrgHum67Weo1/jY/AH5FSCwY9QL/G+"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJineKkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoT3Q/9EE64tXYbeM1qryakGxsqGYgGT3/FEih/tpX32SmvwHvf3Tb9\r\nl1Egm3zDTpKJvVBRj/7wfFMsJ6qX1U4zBHahhFB0gsN9MN19ldQLkM6fnrRF\r\nsUmN5gEjEFbnL//59QS6TR0SQXzm7zgjbMIoIQVKLCYmQVGrG1hv2FLa97lM\r\nelmAdV8y3kykHTL3wJPTfepPVReVOZp7AeqOeIOm2VnYa80Luxm4rKsgTeSo\r\nFNDdedcExvDrZbPnpMiFEeJTSivrb/ytZ2GbadM9N9xmJV1gfV2uEx8CVazy\r\nILH6PV8PJKsHxNEDtUqP4i9XLapmUIaiNSvfwi0BWQZOabAV5GrxQQFRyo9D\r\nws4w3bSlsv/Yxi/LQvPeP4d30rjTZXPZ1WtFl+ZETRUHE9YO3cRxebI+El2s\r\nPF9PNYWa3tfCestnsmDA4sZ6O25FW258O5L1CwDSPwLba5AXONzzTqKrSZiI\r\nDkQVwl9IfZ21OKv+wssEQwjlIAj5jb/6SoLzFL7/UHX2TLaUOSy46E/dUifc\r\nQwsC9yfRG4Yj7a9pMglaSKO44xyYo53H7pd09Bxqr6mBLPb0eFK2F9VdkO9W\r\nXtTuBZR6TzeHK+kb9q/dSh9sx0XpcdKA6FDPDmUI5P5R9Skcd2PGckcn2xf8\r\nUY319VH6vZweHIufRpgKyfh7KoDq8h7Tbdo=\r\n=0mj0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.68_1654514339765_0.09746547124946137"},"_hasShrinkwrap":false},"2.4.6-beta.69":{"name":"ecsite-form-builder","version":"2.4.6-beta.69","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-qr-barcode-scanner":"1.0.6","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"fa4ca048a048369b281b51c72203425a7493b1a5","_id":"ecsite-form-builder@2.4.6-beta.69","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-CSegpfR+t2Ef+bsgtFVHHl8ulL0RLo0pb63eDDOhWgcB4KXoyh8/4WNYiSENYYvgfPxt0sHWkIq8TEnQoJNW6A==","shasum":"ec7fabdf049b124560dc87f762d6e87a75a6d7fd","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.69.tgz","fileCount":172,"unpackedSize":4593147,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChLI2nHsI8GjXSfkNFdl/R85ZcQPpTmski8sWNDDAsvwIhANJT8fMdUF+6+dNtAsl8z+TvMcz21Jaa+/GRJsz5j10+"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJinv1NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDzhAAoKXCUwDaM0AkkgwDz8sw458AJMHvMJFQwmkrjwuUPl/EgBGH\r\nUVFqf84szvdOANfR4EHwffROn2N3fgKnh0Yoox/9Va+H+F6R8A3kUkARHx/z\r\nmVJLSZtyeD78CbaC7L6hxpe2bjKdlfPY3Bv3PMJ9UNXmpOW4kEmCoyg6nHOY\r\nMFSdvB8pdnuwK2ZMJ2PUUU3fc6Ru5uJsnXXiG5SdIBqqoo11pWllWIaYXJgD\r\nlzngCYqoSDOzP9os9EZSfY0K7N0/93YGFqmjU/AY1KdZXPWrS3Rf9a50knz+\r\nZ/ARy/OCx341zECiQ2U7nSWv1B/s3fc2Kim85Ga2mfLxd7/XJwWZ9ecXWn7z\r\novEdO3dbdAI2xxLIqp3AAIRMfdoR8WAYdRxgOpMomFWQe02//XL2qqn6/63M\r\nnCJ6kkHkZr7k23IJgCc6V5g50kEQpUBdJdBKDIUhwwEQo0sacNpKbpPGaraf\r\nGChLZBNsbkEGFniob3gpPEdCG7dRYRaeSojaWibfEyB6zQ7Ar9GkUTyvabTg\r\nCKMjE8ugxJHUZbfwx12sq/2uG7dcLs+9H2vSAbQhP5zW7dNAVQDcKKFyIbCs\r\n6okxkYsfY10wkaavOCRVreu2bieOqn7+LZqLbbCMrlfWk67bz4Eb4dtftBin\r\nqregOVShD2Nnu+VEvBFFd5vFu5Z0prHMR/g=\r\n=MKLI\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.69_1654586701430_0.9504153085320342"},"_hasShrinkwrap":false},"2.4.6-beta.70":{"name":"ecsite-form-builder","version":"2.4.6-beta.70","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-webcam-barcode-scanner":"0.0.2-rc2","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"0b1896c0a704a26a26a987d4042f29f98b48538b","_id":"ecsite-form-builder@2.4.6-beta.70","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-p3Yhqz3M5vC71hguxriu0CYtrMl8CIhBBaB6wXPxqwHFhKAhdYMeQV5989IB1b8IltK/6OP6ZypENgvlsZS4nw==","shasum":"475f997a4649a766b297f6367b2ab02dba8ab8a1","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.70.tgz","fileCount":175,"unpackedSize":4657624,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+ozWfIx1nDbxIt2rhTGgzljVyCRR/ILG0d7G2MuW1PAIhAM18aH1k/41ikpG6FjBnpfyOAimjDj9T27AknJB3qXn2"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJinzCQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGMA//dqcaQx8MKotH0WQMTSD0YK5yv9nlBTzjDggvRr0VFk6GluaY\r\nsLLai9Vdd1wG6azFZS7axQxEKxBJB2BKIvwJiKSlSha4wDdSIPTDZ1I3pSsD\r\nMauKW7pXsZyAWpZPU/W8cM1I/P+TxyMSYrcF4si+UwlvKS+o84uwyyAPf9XN\r\nL+jCOAAuhwl+7lbj4Ovxr6whgeiQZ2uDZJCa18xxC2FUOIlaFn44nYhPlqZe\r\npr7iduvQEwvHqSpl7eF9leSJ2DR7rCyqXnc/Xc8hqWkjraaGIQP3CekuuJ+E\r\nIpYWWaLOv7inRhMSaOvKBu95lI0HYAHazOpD6wfE1zdg1da6VcIsIuDSUaag\r\nPidIkZjzy1F6itbtlkSScyUohnHIZytsqRbimj5Wc7ZQhy4PUaVmNsWZIsIu\r\nLIou0CTnHrXijuM2/p5HEQtemFRGgHPTTycxTESZk6JTSUIkg7Ut64BsCwAF\r\nrj83xPutzCUvjJd7aMhEDhKqNZsow/YtDksFrHWGe8vzmV2OodbVGqNtt1Gq\r\nkSoj9qVG5Rrbypiikix6nv+B27V0JWHZzY5lhOeo34gA1jWSQgxtk+QWvehy\r\nCjcZ/yg63q2EOsPXS/qx4dnnT8bsllLY5OD3EJtWtFqYeRJN5SEwOqYhFyxg\r\nCuF9AwPUOyHRwGsE2V+kNr9z94pb8PMZRBg=\r\n=HfXh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.70_1654599824381_0.12433448748781384"},"_hasShrinkwrap":false},"2.4.6-beta.71":{"name":"ecsite-form-builder","version":"2.4.6-beta.71","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-qr-barcode-scanner":"1.0.6","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"1033ed5ee900fe4616d89082d5f609895c4ff2c4","_id":"ecsite-form-builder@2.4.6-beta.71","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-5FKHQ9859NhYKhYyXX0FYhlT4G/fZmxbCuHbv7sLCy9eZp0lpSKbJ6AWJ3J5aKCEYLAz3U2zL5jkmOs10A2yCQ==","shasum":"cfdd1098305e93150babfd6e826403567a4c20e0","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.71.tgz","fileCount":174,"unpackedSize":4602935,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFBBTO7luJ9ipYnvxE0E46iuZ17Mb2nRc41CPRR+/fFVAiAsi+s1/k3w1wtOpJBRAQNZD/+F1vBf7swItttd51jDyA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin3pQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8qA//TWSCxJGCErUiMbCyT5O/kBTxZkiRxfo5/lLkpWe6VjZRl37N\r\nyp+AlYqX6D7IYbIWDvIO24qx9GmBCowpd09w5mYWCHIWAer57p3thA6tBSx5\r\nXVwjgVnFhf0hZ6CQwnh++tro1lxxxWuf0np9Igd00OwSGx9POWCvH/5/5Dkz\r\neVVB0okii0TTHVcz+kTRmeTkwttH/eUqE6E+B0gFMCoi8jMFdh+qiOvk5Et1\r\n+GpnxB7C3++6OZvTpXpRfRo/cQITLJEmoTRMvevpuzN4h+DBprrI96AMYS2S\r\na6my9Xm10VuRFmpMr/I4xB7CYGJ6feXzKHCrlgv1RV8bDZrQoLPWKNnq0R9O\r\njOkCn7401Knd8ruPDs6XGRwVhfEOXI30Ws5P7JPKgF8tjSVkMP2bLBhsRkV5\r\n4KVwqTqhPxAgRh8uTwO2YLmLOpglvJmozKDaJfmbdl9QsntYPmS7vaKrT75q\r\nMPyEMrxo80Bv3rYt+pHN3BqK0Fk2vBe1cMS+rC3+36M545GicnyhQHQCTECw\r\nvU+j5E/UR0QkzkUYe0ynVVPYbHazQHSdCjw2+PegSjyMh5FXLqWe5IAuMxJu\r\nx9YUmXsE+UxkWZrnazSUmSRbfSCr6qccZ6I27e9R81t80+FZGhSJqTyVh0KF\r\nc88y0UgpIV8Ezl7Y0HiCZzp37OjY/KvPiVs=\r\n=EYnc\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.71_1654618704512_0.4797361159865108"},"_hasShrinkwrap":false},"2.4.6-beta.72":{"name":"ecsite-form-builder","version":"2.4.6-beta.72","description":"A complete form builder for react.(json-schema branch)","main":"lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Ecsiteapp/FormBuilder.git"},"keywords":["react","react-component","form","builder","ui","drag","drop"],"author":{"name":"ECSite"},"dependencies":{"@date-io/date-fns":"^1.3.13","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.11.2","@material-ui/lab":"^4.0.0-alpha.60","@material-ui/pickers":"^3.3.10","@mui/icons-material":"^5.2.5","@mui/material":"^5.2.7","@react-google-maps/api":"^2.2.0","axios":"^0.26.1","beedle":"^0.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","draft-js":"^0.11.7","draftjs-to-html":"^0.8.4","es6-promise":"^4.2.8","fbemitter":"^3.0.0","file-loader":"^6.2.0","file-saver":"^2.0.5","formik":"^2.2.9","immutability-helper":"^3.1.1","isomorphic-fetch":"^3.0.0","jquery":"^3.6.0","js-file-download":"^0.4.12","material-ui-color-picker":"^3.5.1","moment":"^2.29.3","mui-rte":"^1.29.0","prop-types":"^15.7.2","react-bootstrap-slider":"^2.2.3","react-datepicker":"^3.4.1","react-dnd":"^11.1.3","react-dnd-html5-backend":"^11.1.3","react-draft-wysiwyg":"~1.13.2","react-dropzone":"^11.4.2","react-google-maps":"^9.4.5","react-input-mask":"^2.0.4","react-player":"^2.9.0","react-select":"^3.2.0","react-signature-canvas":"^1.0.3","react-spinners":"^0.11.0","react-star-rating":"^1.4.2","react-tap-event-plugin":"^3.0.3","react-textarea-autosize":"^7.1.2","react-webcam":"^5.2.4","react-qr-barcode-scanner":"1.0.6","recompose":"^0.30.0","xss":"^1.0.8","yup":"^0.32.9"},"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-json-strings":"^7.12.1","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-syntax-import-meta":"^7.10.4","@babel/plugin-transform-runtime":"^7.15.0","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/runtime-corejs2":"^7.12.5","add":"^2.0.6","babel-eslint":"^10.1.0","babel-loader":"^8.2.2","copyfiles":"^2.4.1","css-loader":"^3.6.0","ejs":"^2.7.4","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.22.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.22.0","express":"^4.17.1","multer":"^1.4.2","node-sass":"^4.14.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","sass-loader":"^8.0.2","style-loader":"^1.3.0","webpack":"^4.46.0","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.2"},"scripts":{"build":"webpack -p --config webpack.production.config.js","build:dev":"webpack --mode development","build:umd":"webpack --mode development --config webpack.production.config.js","build:style":"node-sass ./scss/application.scss dist/app.css --output-style compressed","build:lib":"npm run transpile && npm run build:style","build:dist":"npm run build && npm run copy:dist","copy:dist":"copyfiles -f \"./dist/*\" \"./public/dist\"","prepublish":"npm run build:lib && npm run build","watch":"webpack --watch","start":"webpack-dev-server --hot --inline --mode development","serve:api":"node server/index.js","pretranspile":"rimraf lib","transpile":"babel --out-dir lib src --copy-files"},"bugs":{"url":"https://github.com/Ecsiteapp/FormBuilder/issues"},"homepage":"https://github.com/Ecsiteapp/FormBuilder/blob/main/README.md","directories":{"doc":"docs","example":"examples","lib":"lib"},"readme":"[![npm version](https://badge.fury.io/js/ecsite-form-builder.svg)](//npmjs.com/package/ecsite-form-builder)\r\n[![downloads](https://img.shields.io/npm/dm/ecsite-form-builder.svg)](https://img.shields.io/npm/dm/ecsite-form-builder.svg)\r\n# ECSite Form Builder\r\nA complete react form builder that interfaces with a json endpoint to load and save generated forms.\r\n- Upgraded to React 16.8.6\r\n- Bootstrap 4.x, Font-Awesome 5.x\r\n- Use react-dnd for Drag & Drop\r\n- Save form data with dummy api server\r\n- Show posted data on readonly form\r\n- Multi column row\r\n\r\n![](screenshot.png)\r\n\r\n### Editing Items\r\n![](screenshot2.png)\r\n\r\n# Basic Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormBuilder } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormBuilder />,\r\n  document.body\r\n)\r\n```\r\n\r\n# Props\r\n\r\n```javascript\r\nvar items = [{\r\n  key: 'Header',\r\n  name: 'Header Text',\r\n  icon: 'fa fa-header',\r\n  static: true,\r\n  content: 'Placeholder Text...'\r\n},\r\n{\r\n  key: 'Paragraph',\r\n  name: 'Paragraph',\r\n  static: true,\r\n  icon: 'fa fa-paragraph',\r\n  content: 'Placeholder Text...'\r\n}];\r\n\r\n<ReactFormBuilder\r\n  url='path/to/GET/initial.json'\r\n  toolbarItems={items}\r\n  saveUrl='path/to/POST/built/form.json' />\r\n```\r\n\r\n# React Form Generator\r\nNow that a form is built and saved, let's generate it from the saved json.\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ReactFormGenerator } from 'ecsite-form-builder';\r\nimport 'ecsite-form-builder/dist/app.css';\r\n\r\nReactDOM.render(\r\n  <ReactFormGenerator\r\n    form_action=\"/path/to/form/submit\"\r\n    form_method=\"POST\"\r\n    task_id={12} // Used to submit a hidden variable with the id to the form from the database.\r\n    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.\r\n    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.\r\n    data={JSON_QUESTION_DATA} // Question data\r\n  />,\r\n  document.body\r\n)\r\n```\r\n\r\n### Form Params\r\n\r\nName | Type | Required? | Description\r\n--- | --- | --- | ---\r\nform_action | string | Required | URL path to submit the form\r\nform_method | string | Required | Verb used in the form submission.\r\naction_name | string | Optional | Defines form submit button text.  Defaults to \"Submit\"\r\nonSubmit | function | optional | Invoke when submit data, if exists will override form post.\r\ndata | array | Required | Question data retrieved from the database\r\nback_action | string | Optional | URL path to go back if needed.\r\nback_name | string | Optional | Button text for back action.  Defaults to \"Cancel\".\r\ntask_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.\r\nanswer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.\r\nauthenticity_token | string | Optional | If using Rails and need an auth token to submit form.\r\nhide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.\r\nskip_validations | boolean | Optional | Suppress form validations on submit, if set to true.\r\ndisplay_short | boolean | Optional | Display an optional \"shorter page/form\" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.\r\nread_only | boolean | Optional | Shows a read only version which has fields disabled and removes \"required\" labels.\r\nvariables | object | Optional | Key/value object that can be used for Signature variable replacement.\r\n\r\n### Read only Signatures\r\n\r\nRead only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the `variables` property to `ReactFormGenerator` and `ReactFormBuilder`.\r\n\r\nTo use a read only signature, choose the \"Read only\" option and enter the key value of the variable that will be used to pass in the signature.\r\n\r\n![](screenshot3.png)\r\n\r\nThe signature data should be in base 64 format.\r\n\r\nThere is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key \"JOHN\" to test the variable replacement.\r\n\r\n# Vendor Dependencies\r\nIn order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html] for more details.\r\n\r\n- Bootstrap\r\n- FontAwesome\r\n\r\n# SASS\r\nAll relevant styles are located in css/application.css.scss.\r\n\r\n# Develop\r\n```bash\r\n$ npm install\r\n$ npm run build:dist\r\n$ npm run serve:api\r\n$ npm start\r\n```\r\nThen navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.\r\n\r\n# Tests\r\n```bash\r\n$ npm test\r\n```\r\nTest is not working at this moment.\r\n\r\n\r\n# For New Element Adding\r\nBelow Files Need to Change\r\n1. app.js - Add the key name in the items var\r\n2. material-elements-config.jsx - Add new const var for the element\r\n  eg. \r\n  const Long_Text = {\r\n    key: 'Long_Text',\r\n    canHaveAnswer: true,\r\n    label: 'Long Text',\r\n    icon: 'fas fa-paragraph',\r\n    fieldName: 'long_text_',\r\n  };\r\n3. Create new element and import in index.jsx (meterial-form-elements folder)\r\n4. sortable-material-form-elements.jsx - Add the element in here also\r\n5. For Common options - material-element-edit\r\n6. For Custom options - create individual element options file(options folder) and import in material-element-edit\r\n\r\n# For New NPM package version release\r\n-> First we need to create an account in NPM and\r\n->configure our app with it. There are few steps to do that.\r\n-> In configuration you will create a unique name for the library\r\n-> then you will specify a basic version in the package.json (version must be incremented every time you publish your code in npm)\r\n-> Publish code to npm. (For dev/testing purpose we use beta versions)\r\ntutorial to know the process of publishing the package.\r\nhttps://www.youtube.com/watch?v=4zzbNac6f6Q\r\n\r\n1. In Terminal(inside project) - \"npm login\"\r\nusername: vamshidharg.wavelabs\r\npassword: npmaccount@wavelabs\r\nafter login, increase the package version and type \"npm publish --tag beta\"\r\n\r\n\r\n1. For formbuilder question - \r\n  <ReactFormBuilder toolbarItems={items} toolboxOrigin={toolboxOrigin} />\r\n  Props :\r\n  items - list of elements\r\n  toolboxOrigin - Form elements Toolbar Algiment(right or left)\r\n\r\n2. For Formbuilder Answer -\r\n    data - formbuilder question data\r\n    isFormReadOnly - Form Edit Enale and disable\r\n    userDetails - user details \r\n    getParsedS3Uri - get parsed s3URI\r\n    collectFormData - Saving form (form answer, fieldmedia, fieldresult)\r\n    photoPreview - image in full view\r\n    imageUploadCallback - image upload in aws\r\n    checkedMandatoryFields - form validation check\r\n\r\n\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"d1cefef0e4257b36ed1b93a3a468c513d2c417c7","_id":"ecsite-form-builder@2.4.6-beta.72","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-6wDRcLlS/8DfepUeTZ8y3epy87Gmt+WvwAGl7S59xWLtHGGmY+NDaOa5nSZZVp3phT2dcawAeAU/747lqR8K5w==","shasum":"ce87e265d148290cfdc214d8db25be8ea64f2871","tarball":"https://registry.npmjs.org/ecsite-form-builder/-/ecsite-form-builder-2.4.6-beta.72.tgz","fileCount":172,"unpackedSize":4612005,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1vJu4Sz8YFUFjgpVa4yAGtow5yxSZA1rw+A2qimSEJwIhAPQ4LcZ69nCoF0lA5SVtXryzlGUZnszzhlYLbCcf8Pcy"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisFxUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmppvw/+JzthxTUftgxJrXhDF3TwOlLhR624KUmuc2DG9gcJcQerQqDf\r\nTrNHoafPXfxIVSwofqbKrQQcuFiB8s2tF9JJdmj64fhjkdutzz9y05wylOAV\r\nezkYX7JOihs3VM9U0sbtXd9YQ6TPIz0VCVLHeZ2PeaOV+RNtU9qwBXmfiW7j\r\nbB51Jhhao1QT/gGTwexQxJKh7VkiJjMHFqj0O31HvQthYocDP8mEYAKNWZDG\r\n9vTe3CQ8vaQC02zodt/rdZmTNyL4s00pRP477DiGZFDvPYSucrkNsxX6EWuu\r\nrATTDuZw/YRiQX7Ya36ZwhQoJDbXeJPRt42fxuW0cLSX7sWuzO5cn12mwGW/\r\nufWAnrJoLHUfouztrgGHmyVGpRUKyPJ7ohV1X5XkBoZNrx0M1WDpnKQSW+Zh\r\nUbd7x8Lql+UrA6ncdGhwl+LAvwzAKGukg+xTIYZL4kRgrnQiGY3LMHERKCBt\r\n1A/9i9mWfgPSfDKyomnsS/EJcKVzAtnfFfZOe4gZdtNUcwg9Zbp+vMi6O20E\r\no7tTNCPMyxpfobtTKb7my5DUce27OyZ339drJmRfZA/0kqbFTbEWqg5viQB9\r\npLJnxqD2zyhKp/FnTwlEcBOUb5gg34PetSggnjLU3O10aKcD+xwgsPtTD1OY\r\n/MLkiL64Cod6AgXg0rSkelSCBUMk9ENXfEM=\r\n=rv4z\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ecsite-form-builder_2.4.6-beta.72_1655725140240_0.1596767857347834"},"_hasShrinkwrap":false}},"time":{"created":"2021-05-27T08:12:23.722Z","1.0.0":"2021-05-27T08:12:23.900Z","modified":"2022-06-20T11:39:00.561Z","1.1.0":"2021-05-28T09:59:04.152Z","1.1.1":"2021-05-28T11:52:23.679Z","1.2.1":"2021-06-01T06:04:55.715Z","1.2.2":"2021-06-01T13:28:41.690Z","1.2.3":"2021-06-01T14:07:24.177Z","1.3.0":"2021-06-10T08:11:46.460Z","1.3.0-beta.1":"2021-06-10T08:24:43.049Z","1.4.0-beta.1":"2021-06-10T10:40:59.006Z","1.4.1-beta.1":"2021-06-10T12:03:04.328Z","1.5.0-beta.1":"2021-06-17T03:46:45.552Z","1.5.1-beta.1":"2021-06-17T08:57:20.169Z","1.5.2-beta.1":"2021-06-17T10:44:51.346Z","1.5.3-beta.1":"2021-06-17T10:52:53.407Z","1.5.4-beta.1":"2021-06-18T07:09:21.247Z","1.5.5-beta.1":"2021-06-18T07:30:22.854Z","1.5.6-beta.1":"2021-06-18T10:22:32.818Z","1.5.7-beta.1":"2021-06-18T13:13:22.963Z","1.5.8-beta.1":"2021-06-18T13:30:54.911Z","1.5.9-beta.1":"2021-06-18T13:37:29.964Z","1.6.0-beta.1":"2021-06-21T15:36:56.138Z","1.6.1-beta.1":"2021-06-22T11:40:12.452Z","1.7.0-beta.1":"2021-06-25T08:41:05.585Z","1.8.0-beta.1":"2021-06-30T12:23:30.560Z","1.9.0-beta.1":"2021-06-30T13:26:29.933Z","1.9.1-beta.1":"2021-07-01T14:05:37.900Z","1.11.0-beta.1":"2021-07-01T15:36:25.251Z","1.12.0-beta.1":"2021-07-01T16:38:56.322Z","1.13.0-beta.1":"2021-07-05T20:27:40.159Z","1.13.1-beta.1":"2021-07-05T20:53:45.089Z","1.14.0-beta.1":"2021-07-10T17:18:43.778Z","1.15.0-beta.1":"2021-07-13T06:57:15.617Z","1.16.0-beta.1":"2021-07-13T12:56:11.936Z","1.17.0-beta.1":"2021-07-14T12:07:43.057Z","1.18.0-beta.1":"2021-07-14T13:05:41.114Z","1.19.0-beta.1":"2021-07-14T17:14:04.168Z","1.20.0-beta.1":"2021-07-15T11:17:54.043Z","1.21.0-beta.1":"2021-07-24T05:15:35.002Z","1.22.0-beta.1":"2021-07-28T09:48:31.057Z","1.23.0-beta.1":"2021-07-28T15:56:15.024Z","2.0.0-beta.1":"2021-07-29T01:31:01.866Z","2.0.1-beta.1":"2021-07-29T10:38:14.183Z","2.0.2-beta.1":"2021-07-30T03:15:03.514Z","2.0.3-beta.1":"2021-08-02T02:41:35.968Z","2.0.4-beta.1":"2021-08-03T02:39:46.225Z","2.0.5-beta.1":"2021-08-04T12:18:06.470Z","2.0.6-beta.1":"2021-08-04T13:01:15.635Z","2.0.7-beta.1":"2021-08-05T03:42:46.432Z","2.0.8-beta.1":"2021-08-05T04:06:07.548Z","2.0.9-beta.1":"2021-08-06T15:12:52.805Z","2.0.10-beta.1":"2021-08-09T13:37:56.991Z","2.0.11-beta.1":"2021-08-09T16:09:16.342Z","2.0.12-beta.1":"2021-08-10T03:45:29.923Z","2.0.13-beta.1":"2021-08-10T04:06:40.978Z","2.0.14-beta.1":"2021-08-10T05:21:36.113Z","2.0.15-beta.1":"2021-08-10T08:24:00.900Z","2.0.16-beta.1":"2021-08-10T19:03:26.190Z","2.0.17-beta.1":"2021-08-11T04:42:46.454Z","2.0.18-beta.1":"2021-08-11T04:46:50.792Z","2.0.19-beta.1":"2021-08-13T03:47:31.870Z","2.0.20-beta.1":"2021-08-13T06:15:31.612Z","2.0.21-beta.1":"2021-08-13T06:48:22.972Z","2.0.22-beta.1":"2021-08-16T03:35:33.237Z","2.0.23-beta.1":"2021-08-16T08:50:25.049Z","2.0.24-beta.1":"2021-08-17T02:42:11.919Z","2.0.25-beta.1":"2021-08-17T02:59:34.072Z","2.0.26-beta.1":"2021-08-17T03:08:57.280Z","2.0.27-beta.1":"2021-08-18T02:29:26.896Z","2.0.28-beta.1":"2021-08-18T03:41:15.991Z","2.0.29-beta.1":"2021-08-19T03:51:52.034Z","2.0.30-beta.1":"2021-08-19T06:29:53.127Z","2.0.31-beta.1":"2021-08-20T03:26:42.878Z","2.0.32-beta.1":"2021-08-20T05:20:16.434Z","2.0.33-beta.1":"2021-08-20T15:29:38.081Z","2.0.34-beta.1":"2021-08-24T06:24:10.177Z","2.0.35-beta.1":"2021-08-25T04:29:27.929Z","2.0.36-beta.1":"2021-08-25T04:40:39.087Z","2.0.37-beta.1":"2021-08-25T04:55:00.182Z","2.1.0-beta.1":"2021-08-28T06:27:13.655Z","2.1.1-beta.1":"2021-08-28T08:22:27.499Z","2.1.2-beta.1":"2021-08-30T04:22:34.249Z","2.1.3-beta.1":"2021-09-01T12:51:09.339Z","2.1.4-beta.1":"2021-09-01T13:38:22.751Z","2.1.5-beta.1":"2021-09-01T16:39:10.801Z","2.1.6-beta.1":"2021-09-02T03:11:14.258Z","2.1.6-beta.2":"2021-09-03T03:32:11.290Z","2.1.6-beta.3":"2021-09-03T03:55:54.146Z","2.1.6-beta.4":"2021-09-03T04:29:33.840Z","2.1.6-beta.5":"2021-09-03T04:48:43.340Z","2.1.7-beta.1":"2021-09-03T05:10:47.128Z","2.1.8-beta.1":"2021-09-03T08:19:47.322Z","2.1.9-beta.1":"2021-09-04T02:38:31.894Z","2.1.9-beta.2":"2021-09-04T03:35:58.205Z","2.1.9-beta.3":"2021-09-04T04:33:03.102Z","2.1.10-beta.1":"2021-09-04T08:21:52.391Z","2.1.11-beta.1":"2021-09-06T04:30:30.662Z","2.1.12-beta.1":"2021-09-06T06:20:07.680Z","2.1.13-beta.1":"2021-09-06T06:55:24.764Z","2.1.14-beta.1":"2021-09-07T03:38:39.212Z","2.1.15-beta.1":"2021-09-07T11:08:00.819Z","2.1.16-beta.1":"2021-09-07T16:28:32.082Z","2.1.17-beta.1":"2021-09-08T06:56:46.657Z","2.1.18-beta.1":"2021-09-08T07:17:52.110Z","2.1.19-beta.1":"2021-09-08T08:53:26.387Z","2.1.20-beta.1":"2021-09-09T09:35:01.131Z","2.1.21-beta.1":"2021-09-09T09:43:19.961Z","2.1.22-beta.1":"2021-09-14T02:36:28.915Z","2.1.23-beta.1":"2021-09-14T03:30:44.326Z","2.1.24-beta.1":"2021-09-15T05:38:55.006Z","2.1.25-beta.1":"2021-09-15T06:59:03.958Z","2.1.26-beta.1":"2021-09-15T07:32:39.851Z","2.1.27-beta.1":"2021-09-15T07:54:32.435Z","2.1.28-beta.1":"2021-09-16T03:42:48.203Z","2.1.29-beta.1":"2021-09-16T04:24:47.961Z","2.1.30-beta.1":"2021-09-16T04:52:06.373Z","2.1.31-beta.1":"2021-09-16T05:38:50.625Z","2.2.0-beta.1":"2021-09-16T06:14:09.755Z","2.2.1-beta.1":"2021-09-16T06:38:51.593Z","2.2.2-beta.1":"2021-09-16T08:03:55.920Z","2.2.3-beta.1":"2021-09-16T08:40:28.424Z","2.2.4-beta.1":"2021-09-16T09:34:24.584Z","2.2.5-beta.1":"2021-09-16T10:11:38.703Z","2.2.6-beta.1":"2021-09-17T03:28:49.785Z","2.2.7-beta.1":"2021-09-20T07:17:52.193Z","2.2.8-beta.1":"2021-09-20T08:22:19.101Z","2.2.9-beta.1":"2021-09-21T02:50:39.538Z","2.2.10-beta.1":"2021-09-21T03:33:56.104Z","2.2.11-beta.1":"2021-09-21T03:48:16.757Z","2.2.12-beta.1":"2021-09-21T04:16:48.474Z","2.2.13-beta.1":"2021-09-21T04:58:12.529Z","2.2.14-beta.1":"2021-09-21T05:10:01.403Z","2.2.15-beta.1":"2021-09-21T06:09:25.354Z","2.2.16-beta.1":"2021-09-21T08:36:00.070Z","2.2.17-beta.1":"2021-09-21T12:24:44.293Z","2.2.16-beta.2":"2021-09-21T18:12:13.918Z","2.2.18-beta.1":"2021-09-22T02:53:29.739Z","2.2.16-beta.3":"2021-09-22T06:44:00.906Z","2.2.16-beta.4":"2021-09-22T06:57:01.581Z","2.2.16-beta.5":"2021-09-22T11:26:27.372Z","2.2.16-beta.6":"2021-09-22T12:26:27.250Z","2.2.16-beta.7":"2021-09-22T13:42:03.628Z","2.2.20-beta.1":"2021-09-22T14:09:07.567Z","2.2.16-beta.8":"2021-09-23T06:58:14.398Z","2.2.16-beta.9":"2021-09-23T09:19:00.551Z","2.2.16-beta.10":"2021-09-23T11:53:01.566Z","2.2.20-beta.2":"2021-09-24T04:31:57.996Z","2.2.20-beta.3":"2021-09-24T05:01:28.985Z","2.2.20-beta.4":"2021-09-24T05:43:11.291Z","2.2.20-beta.5":"2021-09-24T06:04:50.017Z","2.2.20-beta.6":"2021-09-24T06:56:30.882Z","2.2.16-beta.11":"2021-09-24T08:15:41.668Z","2.2.16-beta.12":"2021-09-25T08:56:29.164Z","2.2.16-beta.13":"2021-09-25T09:47:21.864Z","2.2.16-beta.14":"2021-09-25T11:06:38.332Z","2.2.19-beta.1":"2021-09-26T13:09:17.949Z","2.2.21-beta.1":"2021-09-27T03:31:18.641Z","2.3.0-beta.1":"2021-09-27T08:07:40.058Z","2.3.0-beta.2":"2021-09-28T09:50:19.777Z","2.3.0-beta.3":"2021-09-30T09:20:35.209Z","2.3.0-beta.4":"2021-10-04T16:04:26.114Z","2.3.0-beta.5":"2021-10-05T03:38:27.309Z","2.3.0-beta.6":"2021-10-09T07:15:33.109Z","2.3.0-beta.7":"2021-10-09T07:36:49.875Z","2.3.0-beta.8":"2021-10-13T02:10:51.920Z","2.3.0-beta.9":"2021-10-19T09:12:52.722Z","2.3.0-beta.10":"2021-10-19T09:41:40.052Z","2.3.0-beta.11":"2021-10-22T12:58:43.161Z","2.3.0-beta.12":"2021-10-25T09:27:44.215Z","2.3.0-beta.13":"2021-10-25T11:06:25.279Z","2.3.1-beta.1":"2021-10-27T12:23:50.736Z","2.3.1-beta.2":"2021-10-28T08:31:08.057Z","2.3.1-beta.3":"2021-10-28T08:56:53.037Z","2.3.1-beta.4":"2021-10-28T16:35:28.149Z","2.3.1-beta.5":"2021-11-03T04:31:05.902Z","2.3.1-beta.6":"2021-11-03T15:40:18.115Z","2.4.1-beta.1":"2021-11-10T20:37:14.467Z","2.4.1-beta.2":"2021-11-15T08:11:44.461Z","2.4.1-beta.3":"2021-11-15T14:34:25.904Z","2.4.1-beta.4":"2021-11-16T05:44:56.694Z","2.4.1-beta.5":"2021-11-16T13:13:43.125Z","2.4.1-beta.6":"2021-11-17T04:10:54.274Z","2.4.1-beta.7":"2021-11-17T05:18:10.643Z","2.4.1-beta.8":"2021-11-17T15:28:01.219Z","2.4.1-beta.9":"2021-11-18T06:47:52.861Z","2.4.2-beta.1":"2021-11-19T13:12:26.876Z","2.4.2-beta.2":"2021-11-22T03:41:33.230Z","2.4.2-beta.3":"2021-11-22T05:55:01.944Z","2.4.2-beta.4":"2021-11-22T10:35:13.865Z","2.4.2-beta.5":"2021-11-22T11:08:50.726Z","2.4.2-beta.6":"2021-11-22T11:38:16.303Z","2.4.2-beta.7":"2021-11-22T12:41:29.604Z","2.4.2-beta.8":"2021-11-22T13:02:29.570Z","2.4.2-beta.9":"2021-11-23T08:27:28.830Z","2.4.2-beta.10":"2021-11-23T09:29:07.048Z","2.4.2-beta.11":"2021-11-23T12:48:38.282Z","2.4.2-beta.12":"2021-11-23T14:59:48.599Z","2.4.2-beta.13":"2021-11-24T10:53:37.794Z","2.4.2-beta.14":"2021-11-24T12:01:17.562Z","2.4.2-beta.15":"2021-11-24T12:53:56.699Z","2.4.2-beta.16":"2021-11-24T15:56:08.658Z","2.4.2-beta.17":"2021-11-24T19:13:41.872Z","2.4.2-beta.18":"2021-11-24T19:26:41.948Z","2.4.2-beta.19":"2021-11-24T19:50:31.445Z","2.4.2-beta.20":"2021-11-24T20:08:49.718Z","2.4.2-beta.21":"2021-11-25T17:31:39.458Z","2.4.2-beta.22":"2021-11-26T10:57:30.726Z","2.4.2-beta.23":"2021-11-26T11:16:35.356Z","2.4.2-beta.24":"2021-11-26T12:06:19.083Z","2.4.2-beta.25":"2021-11-26T12:16:31.529Z","2.4.2-beta.26":"2021-11-30T19:40:51.319Z","2.4.2-beta.27":"2021-12-02T08:17:58.706Z","2.4.2-beta.28":"2021-12-03T11:58:01.552Z","2.4.2-beta.29":"2021-12-05T23:55:52.070Z","2.4.2-beta.30":"2021-12-07T08:31:49.362Z","2.4.2-beta.31":"2021-12-07T11:57:24.690Z","2.4.2-beta.32":"2021-12-07T12:24:17.455Z","2.4.2-beta.33":"2021-12-07T13:16:42.628Z","2.4.2-beta.34":"2021-12-07T13:28:00.387Z","2.4.2-beta.35":"2021-12-08T13:31:58.778Z","2.4.2-beta.36":"2021-12-10T09:54:20.891Z","2.4.2-beta.37":"2021-12-13T04:20:03.928Z","2.4.2-beta.38":"2021-12-13T04:44:12.587Z","2.4.3-beta.1":"2021-12-14T12:55:19.207Z","2.4.3-beta.2":"2021-12-14T14:06:08.546Z","2.4.3-beta.3":"2021-12-14T15:05:49.442Z","2.4.3-beta.4":"2021-12-14T15:16:55.653Z","2.4.3-beta.5":"2021-12-15T06:25:51.009Z","2.4.3-beta.6":"2021-12-15T09:55:08.800Z","2.4.3-beta.7":"2021-12-15T12:11:14.660Z","2.4.3-beta.8":"2021-12-15T12:38:58.145Z","2.4.3-beta.9":"2021-12-16T15:18:47.832Z","2.4.3-beta.11":"2021-12-16T15:59:18.107Z","2.4.3-beta.12":"2021-12-16T16:13:50.770Z","2.4.3-beta.13":"2021-12-16T16:27:48.217Z","2.4.3-beta.14":"2021-12-22T08:31:19.730Z","2.4.3-beta.15":"2021-12-24T14:54:47.557Z","2.4.3-beta.16":"2021-12-24T16:43:59.176Z","2.4.3-beta.17":"2021-12-27T07:51:31.527Z","2.4.3-beta.18":"2021-12-27T08:43:18.955Z","2.4.3-beta.19":"2021-12-27T09:05:02.029Z","2.4.3-beta.20":"2021-12-27T11:27:06.625Z","2.4.3-beta.21":"2021-12-27T14:25:25.521Z","2.4.3-beta.22":"2021-12-28T09:56:41.389Z","2.4.3-beta.23":"2021-12-28T10:04:14.101Z","2.4.3-beta.24":"2021-12-28T10:14:08.232Z","2.4.3-beta.25":"2021-12-28T10:45:06.979Z","2.4.3-beta.26":"2021-12-28T12:35:46.891Z","2.4.3-beta.27":"2021-12-28T16:14:38.764Z","2.4.3-beta.28":"2021-12-28T17:57:16.097Z","2.4.3-beta.29":"2022-01-04T07:45:01.191Z","2.4.3-beta.30":"2022-01-04T21:15:48.985Z","2.4.3-beta.31":"2022-01-04T22:03:08.634Z","2.4.3-beta.32":"2022-01-05T16:12:48.914Z","2.4.3-beta.33":"2022-01-05T16:34:02.468Z","2.4.3-beta.34":"2022-01-05T17:30:13.846Z","2.4.3-beta.35":"2022-01-06T10:46:20.488Z","2.4.3-beta.36":"2022-01-06T16:09:21.722Z","2.4.3-beta.37":"2022-01-06T19:18:47.909Z","2.4.3-beta.38":"2022-01-06T19:48:53.163Z","2.4.3-beta.39":"2022-01-06T19:59:09.299Z","2.4.3-beta.40":"2022-01-06T20:36:21.364Z","2.4.3-beta.41":"2022-01-06T21:09:55.668Z","2.4.3-beta.42":"2022-01-06T21:30:37.260Z","2.4.3-beta.43":"2022-01-06T21:46:23.446Z","2.4.3-beta.44":"2022-01-06T21:57:24.757Z","2.4.3-beta.45":"2022-01-06T21:58:45.356Z","2.4.3-beta.46":"2022-01-07T16:05:32.584Z","2.4.3-beta.47":"2022-01-10T12:06:54.482Z","2.4.3-beta.48":"2022-01-12T10:44:26.158Z","2.4.3-beta.49":"2022-01-20T04:51:31.169Z","2.4.3-beta.50":"2022-01-20T09:22:59.342Z","2.4.3-beta.51":"2022-01-20T09:34:33.507Z","2.4.3-beta.52":"2022-01-21T07:35:56.287Z","2.4.3-beta.53":"2022-01-21T09:50:56.274Z","2.4.3-beta.54":"2022-01-24T13:15:24.506Z","2.4.3-beta.55":"2022-01-24T13:31:07.915Z","2.4.3-beta.56":"2022-01-24T13:38:41.145Z","2.4.3-beta.57":"2022-01-24T15:25:20.093Z","2.4.3-beta.58":"2022-01-24T16:02:43.045Z","2.4.3-beta.59":"2022-01-27T07:21:03.704Z","2.4.3-beta.60":"2022-01-27T14:11:17.397Z","2.4.3-beta.61":"2022-01-27T15:23:08.140Z","2.4.3-beta.62":"2022-01-28T07:20:55.538Z","2.4.3-beta.63":"2022-01-28T12:00:47.527Z","2.4.3-beta.64":"2022-01-28T12:34:35.283Z","2.4.3-beta.65":"2022-01-31T10:10:05.790Z","2.4.3-beta.66":"2022-01-31T12:19:00.144Z","2.4.3-beta.67":"2022-01-31T13:04:44.761Z","2.4.3-beta.68":"2022-01-31T13:22:09.392Z","2.4.3-beta.69":"2022-02-01T07:15:59.834Z","2.4.3-beta.70":"2022-02-01T08:38:19.440Z","2.4.3-beta.71":"2022-02-01T11:41:08.101Z","2.4.3-beta.72":"2022-02-01T12:04:37.138Z","2.4.3-beta.73":"2022-02-01T13:05:34.524Z","2.4.3-beta.74":"2022-02-01T16:50:34.677Z","2.4.3-beta.75":"2022-02-01T17:12:57.801Z","2.4.3-beta.76":"2022-02-01T18:54:51.570Z","2.4.3-beta.77":"2022-02-02T10:03:05.026Z","2.4.3-beta.78":"2022-02-02T11:22:57.033Z","2.4.3-beta.79":"2022-02-02T11:39:52.151Z","2.4.3-beta.80":"2022-02-02T11:58:02.952Z","2.4.3-beta.81":"2022-02-02T12:11:11.166Z","2.4.3-beta.82":"2022-02-02T12:31:51.572Z","2.4.3-beta.83":"2022-02-02T13:10:13.561Z","2.4.3-beta.84":"2022-02-03T06:03:52.878Z","2.4.3-beta.85":"2022-02-03T07:48:41.511Z","2.4.3-beta.86":"2022-02-03T10:49:06.150Z","2.4.3-beta.87":"2022-02-03T12:10:01.036Z","2.4.3-beta.88":"2022-02-03T12:33:57.025Z","2.4.3-beta.89":"2022-02-04T06:04:08.077Z","2.4.3-beta.90":"2022-02-04T14:41:18.273Z","2.4.3-beta.91":"2022-02-04T14:57:20.134Z","2.4.3-beta.92":"2022-02-07T13:22:38.117Z","2.4.3-beta.93":"2022-02-07T13:49:18.624Z","2.4.3-beta.94":"2022-02-07T14:05:49.378Z","2.4.3-beta.95":"2022-02-07T14:53:44.379Z","2.4.3-beta.96":"2022-02-08T08:59:08.110Z","2.4.3-beta.97":"2022-02-08T12:26:01.692Z","2.4.3-beta.98":"2022-02-08T15:27:49.198Z","2.4.3-beta.99":"2022-02-09T14:51:45.931Z","2.4.4-beta.1":"2022-02-09T17:35:15.726Z","2.4.4-beta.2":"2022-02-10T07:40:22.054Z","2.4.4-beta.3":"2022-02-10T16:55:52.434Z","2.4.5-beta.1":"2022-02-10T17:18:38.873Z","2.4.5-beta.2":"2022-02-10T19:48:00.657Z","2.4.4-beta.4":"2022-02-11T09:39:37.412Z","2.4.5-beta.3":"2022-02-11T11:24:36.005Z","2.4.4-beta.5":"2022-02-11T11:53:41.796Z","2.4.5-beta.4":"2022-02-11T11:54:11.313Z","2.4.5-beta.5":"2022-02-11T12:51:32.526Z","2.4.5-beta.7":"2022-02-11T14:01:50.963Z","2.4.5-beta.8":"2022-02-11T14:58:45.181Z","2.4.5-beta.9":"2022-02-11T15:18:30.592Z","2.4.4-beta.6":"2022-02-11T16:43:45.704Z","2.4.3-beta.100":"2022-02-12T13:22:33.016Z","2.4.3-beta.101":"2022-02-12T13:40:40.259Z","2.4.3-beta.102":"2022-02-12T13:54:04.078Z","2.4.5-beta.11":"2022-02-14T11:27:58.940Z","2.4.5-beta.12":"2022-02-15T07:49:28.499Z","2.4.4-beta.7":"2022-02-15T09:01:32.145Z","2.4.5-beta.13":"2022-02-15T10:26:26.149Z","2.4.5-beta.14":"2022-02-15T11:18:20.035Z","2.4.5-beta.15":"2022-02-15T11:22:23.657Z","2.4.5-beta.16":"2022-02-15T11:49:50.135Z","2.4.5-beta.17":"2022-02-15T11:57:10.825Z","2.4.5-beta.18":"2022-02-16T08:00:31.253Z","2.4.3-beta.104":"2022-02-17T09:45:46.244Z","2.4.3-beta.105":"2022-02-17T10:50:18.796Z","2.4.5-beta.19":"2022-02-17T11:23:29.981Z","2.4.4-beta.8":"2022-02-17T17:06:52.840Z","2.4.3-beta.106":"2022-02-18T08:39:33.473Z","2.4.5-beta.20":"2022-02-18T09:50:48.940Z","2.4.5-beta.21":"2022-02-18T10:28:06.885Z","2.4.3-beta.107":"2022-02-18T11:32:25.133Z","2.4.5-beta.22":"2022-02-18T13:13:13.732Z","2.4.5-beta.23":"2022-02-18T13:38:38.190Z","2.4.5-beta.24":"2022-02-18T13:57:25.655Z","2.4.5-beta.25":"2022-02-18T16:41:14.572Z","2.4.5-beta.26":"2022-02-21T10:17:38.600Z","2.4.5-beta.27":"2022-02-21T10:23:41.264Z","2.4.5-beta.28":"2022-02-21T10:45:19.176Z","2.4.5-beta.29":"2022-02-21T16:31:52.287Z","2.4.3-beta.110":"2022-02-22T15:03:20.430Z","2.4.5-beta.30":"2022-02-23T14:50:31.444Z","2.4.5-beta.31":"2022-02-23T16:54:49.010Z","2.4.3-beta.111":"2022-02-24T11:10:50.272Z","2.4.3-beta.112":"2022-02-24T11:46:12.306Z","2.4.3-beta.113":"2022-02-24T12:26:47.270Z","2.4.3-beta.114":"2022-02-24T12:31:04.872Z","2.4.3-beta.115":"2022-02-24T12:39:06.200Z","2.4.3-beta.116":"2022-02-24T13:35:44.041Z","2.4.5-beta.32":"2022-02-24T14:22:51.500Z","2.4.5-beta.33":"2022-02-24T16:46:09.573Z","2.4.5-beta.34":"2022-02-24T21:41:40.792Z","2.4.5-beta.35":"2022-02-24T21:46:50.527Z","2.4.3-beta.133":"2022-02-28T09:07:55.478Z","2.4.3-beta.134":"2022-03-03T07:06:46.501Z","2.4.3-beta.135":"2022-03-03T09:15:49.420Z","2.4.3-beta.136":"2022-03-03T09:25:35.226Z","2.4.3-beta.137":"2022-03-03T09:47:56.974Z","2.4.3-beta.138":"2022-03-03T13:25:11.704Z","2.4.5-beta.36":"2022-03-03T17:52:57.170Z","2.4.3-beta.139":"2022-03-07T05:14:16.353Z","2.4.5-beta.37":"2022-03-07T05:49:40.895Z","2.4.5-beta.38":"2022-03-08T05:26:31.891Z","2.4.5-beta.39":"2022-03-09T09:24:02.270Z","2.4.3-beta.140":"2022-03-10T10:22:34.990Z","2.4.3-beta.141":"2022-03-10T13:20:57.655Z","2.4.3-beta.142":"2022-03-10T15:20:34.666Z","2.4.3-beta.143":"2022-03-11T07:46:35.835Z","2.4.3-beta.144":"2022-03-11T12:54:22.342Z","2.4.3-beta.145":"2022-03-11T14:07:51.298Z","2.4.3-beta.146":"2022-03-11T14:41:13.386Z","2.4.3-beta.147":"2022-03-11T14:51:56.237Z","2.4.3-beta.148":"2022-03-11T17:15:52.302Z","2.4.3-beta.149":"2022-03-11T18:09:11.360Z","2.4.3-beta.150":"2022-03-11T19:25:16.080Z","2.4.3-beta.151":"2022-03-12T13:28:16.769Z","2.4.3-beta.152":"2022-03-12T14:10:24.570Z","2.4.3-beta.153":"2022-03-13T23:21:10.067Z","2.4.3-beta.154":"2022-03-13T23:46:51.951Z","2.4.3-beta.155":"2022-03-14T00:47:18.999Z","2.4.5-beta.40":"2022-03-14T01:21:29.888Z","2.4.5-beta.41":"2022-03-14T01:35:52.750Z","2.4.5-beta.42":"2022-03-14T02:29:42.736Z","2.4.5-beta.43":"2022-03-14T02:42:29.041Z","2.4.5-beta.44":"2022-03-14T13:11:05.492Z","2.4.5-beta.45":"2022-03-15T06:03:39.060Z","2.4.5-beta.46":"2022-03-15T08:39:44.536Z","2.4.5-beta.47":"2022-03-15T09:34:11.300Z","2.4.5-beta.48":"2022-03-15T09:50:58.783Z","2.4.5-beta.49":"2022-03-15T16:03:22.872Z","2.4.5-beta.50":"2022-03-15T16:28:31.163Z","2.4.5-beta.51":"2022-03-15T16:41:16.751Z","2.4.5-beta.52":"2022-03-16T07:45:12.387Z","2.4.5-beta.53":"2022-03-16T08:13:36.581Z","2.4.5-beta.54":"2022-03-16T08:32:18.521Z","2.4.5-beta.55":"2022-03-16T09:08:11.092Z","2.4.5-beta.56":"2022-03-16T12:57:43.534Z","2.4.5-beta.57":"2022-03-17T11:03:31.819Z","2.4.5-beta.58":"2022-03-17T16:04:52.849Z","2.4.5-beta.59":"2022-03-21T00:32:25.697Z","2.4.5-beta.60":"2022-03-21T12:00:05.710Z","2.4.5-beta.61":"2022-03-22T11:37:54.762Z","2.4.5-beta.62":"2022-03-22T14:20:31.813Z","2.4.5-beta.63":"2022-03-22T15:49:46.018Z","2.4.5-beta.64":"2022-03-25T11:34:51.833Z","2.4.5-beta.65":"2022-03-25T11:54:25.663Z","2.4.5-beta.66":"2022-03-25T12:33:54.609Z","2.4.5-beta.67":"2022-03-28T06:09:21.757Z","2.4.5-beta.68":"2022-03-28T09:16:26.110Z","2.4.3-beta.156":"2022-03-29T08:26:10.392Z","2.4.5-beta.69":"2022-03-29T19:51:28.310Z","2.4.5-beta.70":"2022-03-30T04:44:32.596Z","2.4.5-beta.71":"2022-03-30T05:29:56.921Z","2.4.5-beta.72":"2022-03-30T09:29:03.761Z","2.4.5-beta.73":"2022-03-30T10:11:57.580Z","2.4.5-beta.74":"2022-03-30T11:07:12.782Z","2.4.3-beta.157":"2022-03-31T07:40:56.380Z","2.4.5-beta.75":"2022-03-31T15:02:54.638Z","2.4.3-beta.158":"2022-04-01T11:34:15.396Z","2.4.4-beta.15":"2022-04-01T14:39:32.863Z","2.4.5-beta.76":"2022-04-01T16:33:34.847Z","2.4.5-beta.77":"2022-04-04T09:29:23.681Z","2.4.5-beta.78":"2022-04-04T15:56:24.593Z","2.4.5-beta.79":"2022-04-04T16:01:29.982Z","2.4.5-beta.80":"2022-04-05T08:48:09.982Z","2.4.5-beta.81":"2022-04-07T09:03:21.444Z","2.4.4-beta.16":"2022-04-07T11:07:25.825Z","2.4.4-beta.17":"2022-04-07T11:20:16.840Z","2.4.4-beta.18":"2022-04-07T11:24:22.165Z","2.4.4-beta.19":"2022-04-07T11:46:49.473Z","2.4.4-beta.20":"2022-04-07T11:47:54.027Z","2.4.4-beta.21":"2022-04-07T12:13:18.290Z","2.4.4-beta.22":"2022-04-07T14:13:17.987Z","2.4.3-beta.159":"2022-04-07T15:07:09.478Z","2.4.4-beta.23":"2022-04-07T15:24:24.687Z","2.4.3-beta.160":"2022-04-07T16:29:15.825Z","2.4.5-beta.82":"2022-04-07T18:32:22.734Z","2.4.5-beta.83":"2022-04-07T18:54:41.892Z","2.4.5-beta.84":"2022-04-07T19:04:05.966Z","2.4.3-beta.161":"2022-04-08T03:48:03.018Z","2.4.3-beta.162":"2022-04-08T08:01:53.998Z","2.4.5-beta.85":"2022-04-08T09:29:33.503Z","2.4.5-beta.86":"2022-04-08T11:38:39.447Z","2.4.5-beta.87":"2022-04-08T12:11:56.866Z","2.4.5-beta.88":"2022-04-11T16:19:06.880Z","2.4.3-beta.163":"2022-04-12T09:08:56.146Z","2.4.3-beta.164":"2022-04-12T09:59:20.241Z","2.4.5-beta.89":"2022-04-13T05:26:32.060Z","2.4.5-beta.90":"2022-04-13T10:21:19.661Z","2.4.5-beta.91":"2022-04-13T13:39:30.857Z","2.4.5-beta.92":"2022-04-14T04:47:55.320Z","2.4.5-beta.93":"2022-04-14T10:28:10.758Z","2.4.5-beta.94":"2022-04-14T10:52:57.553Z","2.4.5-beta.95":"2022-04-14T11:43:28.871Z","2.4.5-beta.96":"2022-04-14T19:24:50.109Z","2.4.5-beta.98":"2022-04-15T10:41:04.090Z","2.4.5-beta.99":"2022-04-15T10:56:52.016Z","2.4.5-beta.100":"2022-04-15T11:18:22.824Z","2.4.5-beta.101":"2022-04-15T11:36:17.847Z","2.4.5-beta.102":"2022-04-19T08:55:51.187Z","2.4.5-beta.103":"2022-04-20T09:36:19.614Z","2.4.5-beta.104":"2022-04-20T11:51:21.644Z","2.4.6-beta.1":"2022-04-22T10:59:00.991Z","2.4.6-beta.2":"2022-04-22T11:16:46.228Z","2.4.6-beta.3":"2022-04-22T11:33:05.875Z","2.4.5-beta.105":"2022-04-22T12:43:45.300Z","2.4.6-beta.4":"2022-04-24T08:20:08.617Z","2.4.6-beta.5":"2022-04-24T12:41:48.118Z","2.4.6-beta.6":"2022-04-24T14:14:32.358Z","2.4.6-beta.7":"2022-04-24T17:27:48.011Z","2.4.6-beta.8":"2022-04-24T17:47:57.831Z","2.4.6-beta.9":"2022-04-25T13:45:52.474Z","2.4.6-beta.10":"2022-04-25T17:13:44.461Z","2.4.6-beta.11":"2022-04-25T17:58:34.205Z","2.4.6-beta.12":"2022-04-26T11:27:01.991Z","2.4.6-beta.13":"2022-04-26T20:30:43.355Z","2.4.6-beta.14":"2022-04-26T20:48:41.898Z","2.4.6-beta.15":"2022-04-27T11:26:54.087Z","2.4.6-beta.16":"2022-04-27T12:13:19.790Z","2.4.6-beta.17":"2022-04-27T13:01:03.984Z","2.4.6-beta.18":"2022-04-27T14:37:56.205Z","2.4.6-beta.19":"2022-04-27T17:51:25.143Z","2.4.6-beta.20":"2022-04-28T16:57:23.835Z","2.4.6-beta.21":"2022-04-29T08:20:48.784Z","2.4.6-beta.22":"2022-04-29T09:24:54.700Z","2.4.6-beta.23":"2022-04-29T16:37:47.380Z","2.4.6-beta.24":"2022-05-04T05:06:31.854Z","2.4.6-beta.25":"2022-05-04T12:51:23.937Z","2.4.6-beta.26":"2022-05-05T09:52:40.993Z","2.4.6-beta.27":"2022-05-05T11:32:13.517Z","2.4.6-beta.28":"2022-05-06T07:43:53.056Z","2.4.6-beta.29":"2022-05-06T09:20:15.521Z","2.4.6-beta.30":"2022-05-06T10:00:30.923Z","2.4.6-beta.31":"2022-05-10T06:03:29.122Z","2.4.6-beta.32":"2022-05-10T06:41:47.201Z","2.4.6-beta.33":"2022-05-10T10:28:15.164Z","2.4.6-beta.34":"2022-05-10T11:02:59.200Z","2.4.6-beta.35":"2022-05-11T14:34:14.378Z","2.4.6-beta.36":"2022-05-13T12:52:12.068Z","2.4.6-beta.37":"2022-05-13T13:20:45.034Z","2.4.6-beta.38":"2022-05-13T13:50:39.005Z","2.4.6-beta.39":"2022-05-24T04:33:45.837Z","2.4.6-beta.40":"2022-05-24T12:19:02.896Z","2.4.6-beta.41":"2022-05-25T06:00:10.831Z","2.4.6-beta.42":"2022-05-25T07:29:02.420Z","2.4.6-beta.43":"2022-05-25T09:05:32.063Z","2.4.6-beta.44":"2022-05-26T09:47:02.916Z","2.4.6-beta.45":"2022-05-26T11:07:58.278Z","2.4.6-beta.46":"2022-05-26T13:47:32.152Z","2.4.6-beta.47":"2022-05-26T14:06:02.019Z","2.4.6-beta.48":"2022-05-26T15:15:48.493Z","2.4.6-beta.49":"2022-05-26T15:29:36.851Z","2.4.6-beta.50":"2022-05-26T16:10:44.985Z","2.4.6-beta.51":"2022-05-26T17:43:14.803Z","2.4.6-beta.52":"2022-05-26T18:27:16.631Z","2.4.6-beta.53":"2022-05-27T15:57:57.735Z","2.4.6-beta.54":"2022-05-30T06:48:43.039Z","2.4.6-beta.55":"2022-05-31T13:47:34.027Z","2.4.6-beta.56":"2022-05-31T17:18:51.676Z","2.4.6-beta.57":"2022-05-31T20:26:43.220Z","2.4.6-beta.58":"2022-05-31T20:44:45.144Z","2.4.6-beta.60":"2022-05-31T21:10:32.138Z","2.4.6-beta.61":"2022-06-01T15:47:07.659Z","2.4.6-beta.62":"2022-06-02T04:20:39.590Z","2.4.6-beta.63":"2022-06-02T08:41:59.264Z","2.4.6-beta.59":"2022-06-02T10:25:08.346Z","2.4.6-beta.64":"2022-06-02T11:43:54.091Z","2.4.6-beta.65":"2022-06-02T15:13:48.261Z","2.4.6-beta.66":"2022-06-03T05:30:39.478Z","2.4.6-beta.67":"2022-06-03T12:59:24.190Z","2.4.6-beta.68":"2022-06-06T11:19:00.046Z","2.4.6-beta.69":"2022-06-07T07:25:01.760Z","2.4.6-beta.70":"2022-06-07T11:03:44.590Z","2.4.6-beta.71":"2022-06-07T16:18:24.823Z","2.4.6-beta.72":"2022-06-20T11:39:00.489Z"},"maintainers":[{"name":"vamshidharg.wavelabs","email":"vamshidhar.gundaboina@wavelabs.ai"},{"name":"nagaraju.kommanaboyina","email":"knagarajuknr1855@gmail.com"}],"description":"A complete form builder for react.","keywords":["react","react-component","form","builder","ui","drag","drop"],"repository":{"type":"git","url":"git+https://github.com/kiho/react-form-builder.git"},"author":{"name":"ECSite"},"license":"MIT","readme":"","readmeFilename":""}