{"_id":"@archer-oss/form-builder-core","_rev":"1-ba4e6547679871d9c9f70eaf6d581739","name":"@archer-oss/form-builder-core","dist-tags":{"latest":"1.3.1"},"versions":{"1.3.1":{"name":"@archer-oss/form-builder-core","version":"1.3.1","description":"Core logic for form builder (powered by the dependency checker)","main":"dist/index.cjs.js","module":"dist/index.esm.js","typings":"dist/types/index.d.ts","publishConfig":{"registry":"https://registry.npmjs.org/","tag":"latest","access":"public"},"repository":{"type":"git","url":"git+ssh://git@gitlab.com/archer-oss/form-builder/form-builder-core.git"},"author":{"name":"Sai Hari"},"license":"MIT","scripts":{"build":"npm-run-all --parallel build:app build:types","build:app":"rollup -c","build:types":"tsc -p tsconfig.build.json","format:files":"prettier --ignore-path .gitignore .","format:check":"npm run format:files -- --check","format":"npm run format:files -- --write","lint":"eslint .","start":"npm-run-all --parallel start_watch_build start_server","start_watch_build":"rollup -c rollup.config.dev.js --watch","start_server":"http-server ./demo","test":"jest","typecheck":"tsc --noEmit --emitDeclarationOnly false","validate":"npm-run-all --parallel format:check lint test typecheck"},"peerDependencies":{"@types/react":">=16.x","@types/react-dom":">=16.x","react":">=16.x","react-dom":">=16.x"},"dependencies":{"@archer-oss/dependency-checker-react":"^1.3.1","@babel/runtime":"^7.15.4"},"devDependencies":{"@archer-oss/dev-scripts":"^1.2.0","@rollup/plugin-replace":"^3.0.0","@types/react":"^17.0.24","@types/react-dom":"^17.0.9","http-server":"^13.0.2","jest":"^27.3.0","react":"^17.0.2","react-dom":"^17.0.2","typescript":"^4.4.4","prettier":"2.6.2","@testing-library/react":"^12.0.0","@testing-library/react-hooks":"^8.0.0"},"gitHead":"df425982247daaac309d20eb89f8c1845960a82f","bugs":{"url":"https://gitlab.com/archer-oss/form-builder/form-builder-core/issues"},"homepage":"https://gitlab.com/archer-oss/form-builder/form-builder-core#readme","_id":"@archer-oss/form-builder-core@1.3.1","_nodeVersion":"17.9.0","_npmVersion":"7.24.2","dist":{"integrity":"sha512-RbWQSwHgOVMb2euHC1aeziFzsUgWNztT/JxwVNgm04AHgWoper+Xx2hiTJJBfw+5zgeNacFomBygjBlZRfVkeA==","shasum":"5da68c8b13d7ad312334158354a47b72c6f6486c","tarball":"https://registry.npmjs.org/@archer-oss/form-builder-core/-/form-builder-core-1.3.1.tgz","fileCount":27,"unpackedSize":261216,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPHsf4qh09ZvpwvPqW3suyJ03TjM8lnVwrqwx3cSXoDQIhANVWWHiOIHcOWsauSD+WByJPSTbUDTycf8fcKuU5xXBO"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXaseACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNWRAAgpJSz+24OCl7yrYvA4gulgmiNomdLjADASLFQ/VlO6DQwzN5\r\nczNjxW7wXsfSl+X1bjA/bksw6YQ5yvKNNt/mHUbjUyCgrqRGvwku+jwNO+A+\r\nHV0etsnPMUEogTNTJZrMvRDf/3AbHA3JOoMD2HBvNZAmjjc38VS9oVhB53in\r\nGUwx5b8jUruaEcMlJEJSTiY3C8vcMlBZgPd6QR/Gj1LnZ1bnPTdCBLQSPBCO\r\nt9FI1D0s4NBUrKTR4ycq4PhDw8/ZZkmEaeeGC0Y84BjHQ+zLpTJP78cgzqvH\r\nQJ0T6lrZwB7FLtr48cUfKzZLeOHxC92fXFkVyeRH5fI+WpYL3p8fTrYrIiNx\r\n8uxKDqiK73t0kAHiBUv4n3E/19TqjNeRHc9+n7KCW9F8RVtEZmr09fh87D1S\r\nkH2ZgD8SPCHWZQmOrOoGA1qSZxaY84DOWN2AC5Xzd/6dYIOLL/dOifdaN1ob\r\n0g/2fgfDGYsllDnhj0PNWiMSr1rU65a2RHOd7urpvI+NG7FdgzL6yM3H095U\r\n87f3fUBGdzDq9hDsH+0F51j0lLDWdAx84Gix6KuateXkLsVw/hxs2ijgZzNl\r\nLaximT6SXWYa0Bw3U4wZKn8Jviojz6oHhY+giSFq8+YT8F+j84qSrwiTWNGW\r\nxKHvTwaWUZAyQcWeBQ+wFZjMeM1zWlOK2uc=\r\n=bkA+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"barkerd427","email":"barkerd427@gmail.com"},"directories":{},"maintainers":[{"name":"sai.hari","email":"sai.hari@archerirm.com"},{"name":"barkerd427","email":"barkerd427@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/form-builder-core_1.3.1_1650305821814_0.512957094144469"},"_hasShrinkwrap":false}},"time":{"created":"2022-04-18T18:17:01.749Z","1.3.1":"2022-04-18T18:17:01.976Z","modified":"2022-04-19T15:04:59.508Z"},"maintainers":[{"email":"ryandoll@gmail.com","name":"ryandoll"},{"email":"sai.hari@archerirm.com","name":"sai.hari"},{"email":"barkerd427@gmail.com","name":"barkerd427"}],"description":"Core logic for form builder (powered by the dependency checker)","homepage":"https://gitlab.com/archer-oss/form-builder/form-builder-core#readme","repository":{"type":"git","url":"git+ssh://git@gitlab.com/archer-oss/form-builder/form-builder-core.git"},"author":{"name":"Sai Hari"},"bugs":{"url":"https://gitlab.com/archer-oss/form-builder/form-builder-core/issues"},"license":"MIT","readme":"# form-builder-core\n\nCore logic for form builder (powered by the dependency checker).\n\n## What is Form Builder?\n\nForm Builder is a form state and layout management tool to make creating consistent and robust forms easier. Once a field or layout is defined by a unique `type`, it can be used in any form throughout the app. By using Form Builder, you can guarantee the expected behavior will be the same for all the forms in your app.\n\nIt follows the React philosophy of declarative style programming. You describe the behavior of your form and Form Builder takes care of the rest.\n\n## Quick Start\n\n### Install Form Builder\n\n```bash\nnpm install @archer-oss/form-builder-core\n```\n\n### Configure Form Builder\n\nWhile you don't have to use TypeScript to use Form Builder, it's recommended to improve developer experience. The rest of this quick start guide assumes the use of TypeScript.\n\n#### Import Dependencies\n\n```ts\nimport {\n  configureFormBuilder,\n  CreateDependenciesTypes,\n  FBBaseFormFieldDependencyType,\n  FBBaseLayoutFieldDependencyType,\n  FormBuilderConfig,\n} from '@archer-oss/form-builder-core';\n```\n\n#### Build Types\n\nBy using the Type creation utilities bundled with this package, you can ensure that you get proper TypeScript support.\n\n```ts\n// Form Fields are the input elements in your form.\ntype FormFields = {\n  ['text-field']: { type: 'text-field'; props: { label: string }; value: string };\n};\n\n// Layout Fields are used to position input elements in the form.\n// They don't have a value associated with them.\ntype LayoutFields = {\n  ['two-column-layout']: { type: 'two-column-layout'; props: {} };\n};\n\n// Utility to ensure that all the combinations of\n// dependencies are created for TypeScript support.\ntype Dependencies = CreateDependenciesTypes<FBBaseFormFieldDependencyType<FormFields>, FBBaseLayoutFieldDependencyType<LayoutFields>>;\n```\n\n#### Set Form Builder Defaults\n\nWhen configuring Form Builder, you have the opportunity to set defaults for the fields to control what should be rendered and any properties that should have some kind of value.\n\n```tsx\nconst config: FormBuilderConfig<FormFields, LayoutFields> = {\n  defaultFormFieldConfigs: {\n    'text-field': {\n      data: {\n        // If no label prop is passed when using a\n        // text-field, this text will be used instead.\n        props: { label: 'I am the default label' },\n        // A function which gets the data, metaData and\n        // setters for both to control the field's lifecycle\n        render: ({ data, metaData, setData, setMetaData }) => ({\n          <React.Fragment>\n            <label>\n              {data.props.label}\n              <input\n                type=\"text\"\n                value={data.value}\n                onChange={e => {\n                  // Optionally set the touched property so that the error below\n                  // is only displayed when the user interacts with the field.\n                  setMetaData({ touched: true });\n                  setData({ value: e.target.value });\n                }}\n              />\n            </label>\n            {metaData.touched && data.value === '' && <span>Error: Empty Field</span>}\n          </React.Fragment>\n        })\n      }\n    }\n  },\n  defaultLayoutFieldConfigs: {\n    'two-column-layout': {\n      data: {\n        // The fields that are created as part of\n        // this group when using a two-column-layout\n        render: ({ fields }) => {\n          // Return a two column grid whenever this layout type is used.\n          return (\n            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>\n              {fields}\n            </div>\n          );\n        }\n      }\n    }\n  }\n```\n\n#### Create Form Builder Implementation\n\nThe `configureFormBuilder` function returns a unique implementation of Form Builder which has the default properties set and proper TypeScript support.\n\n```ts\n  const { FormBuilder } = configureFormBuilder<FormFields, LayoutFields, Dependencies>(config);\n};\n```\n\n#### Use Form Builder\n\nTo use Form Builder, pass a set of props which includes an `onChange` which is invoked anytime a field updates in the form and an array of `groups`. The group types should match the LayoutField types. Each group should take an array of `fields`. These fields should match the FormFields.\n\n```tsx\nfunction MyForm() {\n  const formBuilderProps = {\n    onChange: console.log,\n    groups: [\n      {\n        key: 'sign-up-info',\n        // Setting this type allows you to\n        // hook into the defaults from above.\n        type: 'two-column-layout',\n        fields: [\n          {\n            key: 'user-name',\n            type: 'text-field',\n            // Setting the label here overrides the default from above.\n            data: { props: { label: 'User Name' } },\n          },\n          {\n            key: 'email',\n            type: 'text-field',\n            data: { props: { label: 'Email' } },\n          },\n        ],\n      },\n    ],\n  };\n\n  return <FormBuilder {...formBuilderProps} />;\n}\n```\n","readmeFilename":"README.md"}