{"_id":"@code4bones/react-cascade-forms","name":"@code4bones/react-cascade-forms","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.4":{"name":"@code4bones/react-cascade-forms","version":"1.0.4","main":"build/index.js","module":"build/index.esm.js","types":"build/index.d.ts","description":"React state-driven controls renderer","scripts":{"build":"rollup -c","storybook":"start-storybook -p 6006","storybook:export":"build-storybook","prepublishOnly":"npm run build"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/code4bones/react-cascade-forms.git"},"keywords":["Forms","State","Controls","React","Typescript","Less","Storybook"],"author":{"name":"code4bones"},"license":"MIT","bugs":{"url":"https://github.com/code4bones/react-cascade-forms/issues"},"homepage":"https://github.com/code4bones/react-cascade-forms/wiki","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@babel/core":"^7.15.0","@blueprintjs/core":"^4.13.0","@blueprintjs/select":"^4.8.12","@rollup/plugin-commonjs":"^17.1.0","@rollup/plugin-image":"^3.0.1","@rollup/plugin-node-resolve":"^11.2.1","@storybook/addon-controls":"^6.5.13","@storybook/addon-essentials":"^6.5.13","@storybook/addons":"^6.5.13","@storybook/builder-webpack5":"^6.5.13","@storybook/manager-webpack5":"^6.5.13","@storybook/react":"^6.5.13","@types/node":"^16.18.2","@types/react":"^18.0.24","@types/react-dom":"^18.0.8","@typescript-eslint/eslint-plugin":"^5.41.0","@typescript-eslint/parser":"^5.41.0","babel-loader":"^8.2.2","babel-preset-react-app":"^10.0.0","css-loader":"^6.7.1","eslint":"^8.26.0","eslint-plugin-react":"^7.31.10","identity-obj-proxy":"^3.0.0","less":"^4.1.3","less-loader":"^11.1.0","react":"^17.0.2","react-dom":"^17.0.2","react-icons":"^4.6.0","rollup":"^2.56.3","rollup-plugin-copy":"^3.4.0","rollup-plugin-less":"^1.1.3","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-typescript2":"^0.29.0","storybook-dark-mode":"^1.1.2","style-loader":"^3.3.1","typescript":"^4.4.2","webpack":"^5.74.0"},"dependencies":{"fastest-validator":"^1.16.0"},"gitHead":"91e24b012bdb816928c4089e961d6c47aeda5666","_id":"@code4bones/react-cascade-forms@1.0.4","_nodeVersion":"18.5.0","_npmVersion":"8.14.0","dist":{"integrity":"sha512-pbdWkNR1ZO6xV+ojfxXppUbGmfZG1bYM/zcvF8MwxVS1m2ej7obvhyEQnJouKm4dfzdSTGt50uGIpxe1zoUaBw==","shasum":"6c1c5246c94da2be43d4d0db516b6d49634b13af","tarball":"https://registry.npmjs.org/@code4bones/react-cascade-forms/-/react-cascade-forms-1.0.4.tgz","fileCount":10,"unpackedSize":382210,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICbw0yk08zGxSERFQmTqEjpsSF6Ph7A/gzvIsAbH97YDAiBrcI6ZZE4DsOJYn1nVTF4l1WCpNpWLjh7RLVw/AVXRhg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjuqNtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPIA//f/bPXuukvXsyrakCq9+9G00EtA6hVU+G4BtLWLzqyR9xeve+\r\n1J0TYYosMXTWPtBBRPVk8WJC8romlrutelg5sIc/rMtNbtrSgUnlQPBqWfB4\r\n6bOIL1nOv+Ud2xzQ1MVsKemVQJpmGokJfy7gebl4e69+mUmQnlQwTxoMaAbX\r\nP2hNtUi7SbayV9rXcPCIEgqWneOQ7pcmLKcAsGr4BFi6xINx80lpkl13Eu2z\r\nCTh0FreWciXn89wohAkA0S9um3ETw0TDkk3fX9xOTgMmnBQAZuVrIkpPGruo\r\nAu9mzCdfjLormpDpxdBxiLsIKtLQ5QwZT0HPmz9DySTHq4HH0A+v/wkmskLX\r\ndwGbwQVJk8qoUeo4mFioxo0rNxzNQAzCUiJQzcnx0QPWSAykhjr7fU55spFh\r\nriislnO4dZlrSuroi20C0wdXzTeY+8lpOH1yOdMM9FjrB5/lT8TeoXpRgBpA\r\ntrX29f8JHlKI17cGQPb8xdnw6Q0BJs8I9C99/womcckGIiHwvwnjsuxFEO9C\r\naVGVrSKzTh1HYAUBrp2wdMCuOqS+eu8Tt3jSMM3KF6yULreEf8J4vwVUDTnp\r\nXiyXQj0hoqUu3Ob5G5FMdUQZRmip9+vUPErBmiKZhe16NlHk/C90UXIljJTN\r\niQPv6AcuGJiZ7KMN1p3PhBiCA+uBFNjxUSM=\r\n=wjsd\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"code4bones","email":"clinch.coffin@gmail.com"},"directories":{},"maintainers":[{"name":"code4bones","email":"clinch.coffin@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-cascade-forms_1.0.4_1673175917108_0.18684286814857298"},"_hasShrinkwrap":false}},"time":{"created":"2023-01-08T11:05:17.053Z","1.0.4":"2023-01-08T11:05:17.342Z","modified":"2023-01-08T11:05:17.492Z"},"maintainers":[{"name":"code4bones","email":"clinch.coffin@gmail.com"}],"description":"React state-driven controls renderer","homepage":"https://github.com/code4bones/react-cascade-forms/wiki","keywords":["Forms","State","Controls","React","Typescript","Less","Storybook"],"repository":{"type":"git","url":"git+https://github.com/code4bones/react-cascade-forms.git"},"author":{"name":"code4bones"},"bugs":{"url":"https://github.com/code4bones/react-cascade-forms/issues"},"license":"MIT","readme":"\n### Cascade Forms -  state-driven container/controls renderer\n\nSimple engine for render  component / group depends on common state\n \n\n`yarn install @code4bones/react-cascade-forms`\n\n```tsx\n\nimport  CascadeForms , {\n  FormItems,\n  ControlRenderProps,\n  FormState,\n  FormItem,\n  OnChangeFn,\n  FormActions } from  \"@code4bones/react-cascade-forms\";\n\n\n...\n\nconst  FORM : FormItems = [ ... ] // check samples !\n\nconst  actions = createRef<FormActions>();\n\nconst [formState,setFormState] = React.useState<FormState>({\n\tname:{ // default state, conforms to  FormState\n\t value:\"\",\n\t}\n});\n\nconst  onRender = (formState:FormState,item:FormItem,onChange:OnChangeFn) => {\n  switch ( item.type ) {\n    case  \"custom\":\n        // Signature = FormControlRenderFn\n\t\treturn  <CustomCtrl  formState={formState}  item={item}  onChange={onChange}  />;\n    default:\n\t\treturn <div>Unexpected type {item.type}</div>\n   }\n  }\n \nconst  onUpdate = (state:any) => {\n\tconsole.log(\"Live State\",state);\n\tsetFormState(state);\n};\n\nconst  onReadState = () => {\n   // read active values ( visible ) only\n   const  state = actions.current?.getState();\n   /* state {\n       [id]:{\n         value:...,\n         state: // => false if no error, or joined string from ValidationError[] (fastest-validator) \n       }\n     }\n    */\n   console.log(\"Actual state\",state);\n};\n\n<CascadeForms  \n\tref={actions}  \n\tform={FORM}  \n\tformState={formState}  \n\tonRender={onRender}  \n\tonUpdate={onUpdate}  />\n\n<Button  text=\"Read state\"  onClick={onReadState}  />\n...\n```\n\nSamples available via storybook.\n\nThat's all, folks !\n\n\n\n","readmeFilename":"README.md"}