{"_id":"@8base/react-forms","_rev":"6-eedb674f9d22e66f999da90ad438dfa0","name":"@8base/react-forms","dist-tags":{"beta":"3.1.0-beta.0","latest":"3.0.0-beta.0"},"versions":{"3.0.0-beta.0":{"name":"@8base/react-forms","version":"3.0.0-beta.0","repository":{"type":"git","url":"git+https://github.com/8base/sdk.git"},"homepage":"https://github.com/8base/sdk/tree/master/packages/react/forms","main":"dist/cjs/index.js","types":"dist/mjs/index.d.ts","module":"dist/mjs/index.js","scripts":{"build":"../../../bin/build-package.sh","watch":"../../../bin/watch-package.sh","test":"NPM_ENV=test jest"},"peerDependencies":{"react":"^17.0.1","react-dom":"^17.0.1"},"dependencies":{"@8base/error-codes":"^1.0.22","@8base/react-permissions-provider":"^3.0.0-beta.0","@8base/react-table-schema-provider":"^3.0.0-beta.0","@8base/utils":"^3.0.0-beta.0","@8base/validate":"^3.0.0-beta.0","final-form":"^4.20.1","final-form-arrays":"^3.0.2","prop-types":"^15.7.2","ramda":"^0.27.1","react-final-form":"^6.5.2","react-final-form-arrays":"^3.1.3"},"devDependencies":{"@types/jest":"^26.0.20","@types/node":"^14.14.22","@types/ramda":"^0.27.36","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","@types/react-test-renderer":"^17.0.0","jest":"26.6.3","react":"^17.0.1","react-dom":"^17.0.1","react-test-renderer":"^17.0.1","ts-jest":"^26.4.4","typescript":"^4.1.3"},"jest":{"globals":{"ts-jest":{"tsconfig":"<rootDir>/test/tsconfig.json"}},"setupFiles":["<rootDir>/test/jest.setup.ts"],"collectCoverageFrom":["<rootDir>/src/**","!<rootDir>/**/__tests__/**"],"moduleNameMapper":{"@8base/sdk-core":"<rootDir>/../../core/8base-sdk/src/index.ts","@8base/api-client":"<rootDir>/../../core/api-client/src/index.ts","@8base/api-token-auth-client":"<rootDir>/../../core/api-token-auth-client/src/index.ts","@8base/apollo-client":"<rootDir>/../../core/apollo-client/src/index.ts","@8base/apollo-links":"<rootDir>/../../core/apollo-links/src/index.ts","@8base/auth":"<rootDir>/../../core/auth/src/index.ts","@8base/utils":"<rootDir>/../../core/utils/src/index.ts","@8base/validate":"<rootDir>/../../core/validate/src/index.ts","@8base/web-auth0-auth-client":"<rootDir>/../../core/web-auth0-auth-client/src/index.ts","@8base/web-cognito-auth-client":"<rootDir>/../../core/web-cognito-auth-client/src/index.ts","@8base/web-native-auth-client":"<rootDir>/../../core/web-native-auth-client/src/index.ts","@8base/web-oauth-client":"<rootDir>/../../core/web-oauth-client/src/index.ts","@8base/sdk-react":"<rootDir>/../../react/8base-react-sdk/src/index.ts","@8base/react-app-provider":"<rootDir>/../../react/app-provider/src/index.ts","@8base/react-auth":"<rootDir>/../../react/auth/src/index.ts","@8base/react-crud":"<rootDir>/../../react/crud/src/index.ts","@8base/react-file-input":"<rootDir>/../../react/file-input/src/index.ts","@8base/react-forms":"<rootDir>/../../react/forms/src/index.ts","@8base/react-permissions-provider":"<rootDir>/../../react/permissions-provider/src/index.ts","@8base/react-table-schema-provider":"<rootDir>/../../react/table-schema-provider/src/index.ts","@8base/react-utils":"<rootDir>/../../react/utils/src/index.ts"},"moduleFileExtensions":["ts","tsx","js","jsx"],"transform":{"^.+\\.(ts|tsx)$":"ts-jest"},"testMatch":["**/__tests__/**/*.[jt]s?(x)","**/?(*.)+(spec|test).[jt]s?(x)"]},"license":"MIT","description":"8base Forms is a thin React wrapper for React Final Forms to easy implement forms for 8base API entities.","bugs":{"url":"https://github.com/8base/sdk/issues"},"_id":"@8base/react-forms@3.0.0-beta.0","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-6/l40R4rvvv/Rs6SwFLngLrbNkR0FWYx4jKpXbNRtseII3343KBtPwres8qAbIZrm+2rmWrUL+wTtectm5W4Jg==","shasum":"cab39a42536e326bc8be33d120acfbc14fd3f380","tarball":"https://registry.npmjs.org/@8base/react-forms/-/react-forms-3.0.0-beta.0.tgz","fileCount":92,"unpackedSize":95124,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdJvQ0tLFMKnWuPaO5GeauBSSoPziqX+CSCOXXc5Yk2gIgeDQWGhhcQ/qVnoJHCmh+9Z1rJ3EBk4cw/WanoBfP/bE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiszO3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrsUA/+OP847tGHq+I1M7DfoTvTGmIQT4zGQP+CTcal8cdPCNfciQAi\r\n8wtetRafWNA2FbsAcUXffSnf/Zd+Qpg7r7QBCFTMFIOgps3tKaWpK+8/pW64\r\nIZMSdTM+Uek4jkFpOUuE0KvGx8Ot8eWk6W6afzWH7Ikzom7FaSZRF/o2pG5Z\r\nvjP9q64hGzMl8PgLH1/zzGCUmxXmFhdwWV0tU+EFz8NMrW23o05u5FzYe+Th\r\nyPTu1ebz7S2yJYsZamN7v05wFKl+8acbKr+yK2xLwTl4JesEy+ogMUngKBoD\r\nORaxfT+7jMoBbMo68AjliBmj9UvtpA+U6ohHVo8mZ2OXPZhm/YOPBeH/v+UR\r\n7M/QjkqZTGueqsvvBcAMPz+Jf58n4EkQxfekSBpWLep4RtppmzJqpghAbrza\r\nEoJvcVmcWKb7E9GWysV5by7O4CR/SAivrJ8utRnUBeW6B7RQN8VqavVWYcKD\r\n8maxXNh2HOa6VtEoR1zsmWtVP4v0Gyy9lyl4TBS8CW5IXaiQEhHuau+dR1Um\r\ndPuqOeBxur3DH/IyriYsfBRlICwDzlp0bG1Vill4yQVxjPDxByFWGk68jlDS\r\nerBlNZgy3QQcnQVOPI+tciWiMcd2gyXtF+TxC9CyrMhI31PLhoGZNanOQO75\r\nPFQrRQX+8cimmnTxBfc8bIL7X+EYqc7Hq4g=\r\n=9OAQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"8base-bot","email":"npmpublisher@8base.com"},"directories":{},"maintainers":[{"name":"8base-bot","email":"npmpublisher@8base.com"},{"name":"selnapenek","email":"slel64222@gmail.com"},{"name":"8basetimmyers","email":"timothy.myers@8base.com"},{"name":"s1owjke","email":"s1ow933@yahoo.com"},{"name":"eugene.antonevich","email":"eugene.antonevich@8base.com"},{"name":"ilazarev","email":"ilya.lazarev@8base.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-forms_3.0.0-beta.0_1655911350924_0.18940341000547112"},"_hasShrinkwrap":false},"3.0.0-beta.1":{"name":"@8base/react-forms","version":"3.0.0-beta.1","repository":{"type":"git","url":"git+https://github.com/8base/sdk.git"},"homepage":"https://github.com/8base/sdk/tree/master/packages/react/forms","main":"dist/cjs/index.js","types":"dist/mjs/index.d.ts","module":"dist/mjs/index.js","scripts":{"build":"../../../bin/build-package.sh","watch":"../../../bin/watch-package.sh","test":"NPM_ENV=test jest"},"peerDependencies":{"react":"^17.0.1","react-dom":"^17.0.1"},"dependencies":{"@8base/error-codes":"^1.0.22","@8base/react-permissions-provider":"^3.0.0-beta.1","@8base/react-table-schema-provider":"^3.0.0-beta.1","@8base/utils":"^3.0.0-beta.1","@8base/validate":"^3.0.0-beta.1","final-form":"^4.20.1","final-form-arrays":"^3.0.2","prop-types":"^15.7.2","ramda":"^0.27.1","react-final-form":"^6.5.2","react-final-form-arrays":"^3.1.3"},"devDependencies":{"@types/jest":"^26.0.20","@types/node":"^14.14.22","@types/ramda":"^0.27.36","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","@types/react-test-renderer":"^17.0.0","jest":"26.6.3","react":"^17.0.1","react-dom":"^17.0.1","react-test-renderer":"^17.0.1","ts-jest":"^26.4.4","typescript":"^4.1.3"},"jest":{"globals":{"ts-jest":{"tsconfig":"<rootDir>/test/tsconfig.json"}},"setupFiles":["<rootDir>/test/jest.setup.ts"],"collectCoverageFrom":["<rootDir>/src/**","!<rootDir>/**/__tests__/**"],"moduleNameMapper":{"@8base/sdk-core":"<rootDir>/../../core/8base-sdk/src/index.ts","@8base/api-client":"<rootDir>/../../core/api-client/src/index.ts","@8base/api-token-auth-client":"<rootDir>/../../core/api-token-auth-client/src/index.ts","@8base/apollo-client":"<rootDir>/../../core/apollo-client/src/index.ts","@8base/apollo-links":"<rootDir>/../../core/apollo-links/src/index.ts","@8base/auth":"<rootDir>/../../core/auth/src/index.ts","@8base/utils":"<rootDir>/../../core/utils/src/index.ts","@8base/validate":"<rootDir>/../../core/validate/src/index.ts","@8base/web-auth0-auth-client":"<rootDir>/../../core/web-auth0-auth-client/src/index.ts","@8base/web-cognito-auth-client":"<rootDir>/../../core/web-cognito-auth-client/src/index.ts","@8base/web-native-auth-client":"<rootDir>/../../core/web-native-auth-client/src/index.ts","@8base/web-oauth-client":"<rootDir>/../../core/web-oauth-client/src/index.ts","@8base/sdk-react":"<rootDir>/../../react/8base-react-sdk/src/index.ts","@8base/react-app-provider":"<rootDir>/../../react/app-provider/src/index.ts","@8base/react-auth":"<rootDir>/../../react/auth/src/index.ts","@8base/react-crud":"<rootDir>/../../react/crud/src/index.ts","@8base/react-file-input":"<rootDir>/../../react/file-input/src/index.ts","@8base/react-forms":"<rootDir>/../../react/forms/src/index.ts","@8base/react-permissions-provider":"<rootDir>/../../react/permissions-provider/src/index.ts","@8base/react-table-schema-provider":"<rootDir>/../../react/table-schema-provider/src/index.ts","@8base/react-utils":"<rootDir>/../../react/utils/src/index.ts"},"moduleFileExtensions":["ts","tsx","js","jsx"],"transform":{"^.+\\.(ts|tsx)$":"ts-jest"},"testMatch":["**/__tests__/**/*.[jt]s?(x)","**/?(*.)+(spec|test).[jt]s?(x)"]},"license":"MIT","readme":"# 8base Forms\n\n8base Forms is a thin React wrapper for React Final Forms to easy implement forms for 8base API entities.\n\n## API\n\n<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n#### Table of Contents\n\n- [8base Forms](#8base-forms)\n  - [API](#api)\n      - [Table of Contents](#table-of-contents)\n    - [Field](#field)\n      - [Properties](#properties)\n    - [FieldArray](#fieldarray)\n    - [Fieldset](#fieldset)\n      - [Properties](#properties-1)\n    - [Form](#form)\n      - [Properties](#properties-2)\n  - [Examples](#examples)\n    - [Basic Form](#basic-form)\n    - [Form with FieldArray](#form-with-fieldarray)\n    - [Multiple Forms with TableSchemaProvider](#multiple-forms-with-tableschemaprovider)\n    - [Complex form](#complex-form)\n\n### Field\n\n**Extends React.Component**\n\n`Field` wrapper based on `Field` from the [`react-final-form`](https://github.com/final-form/react-final-form). This component accepts [`FieldProps`](https://github.com/final-form/react-final-form#fieldprops) and other props for easy implementation with the 8base API.\n\n#### Properties\n\n-   `fieldSchema` **FieldSchema?** The 8base API field schema.\n-   `name` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** The name of field, based on the 8base API table schema.\n\n### FieldArray\n\n**Extends React.Component**\n\n`FieldArray` wrapper based on `FieldArray` from the [`react-final-form-arrays`](https://github.com/final-form/react-final-form-arrays). It accepts [`FieldArrayProps`](https://github.com/final-form/react-final-form-arrays#fieldarrayprops) as a prop.\n\n### Fieldset\n\n**Extends React.Component**\n\n`Fieldset` passes relation table schema to the children fields.\n\n#### Properties\n\n-   `tableSchema` **TableSchema?** The 8base API table schema.\n-   `tableSchemaName` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** The name of the 8base API table schema. This prop only works if `SchemaContext` is provided.\n\n### Form\n\n**Extends React.Component**\n\n`Form` wrapper based on `Form` from the [`react-final-form`](https://github.com/final-form/react-final-form). This component accepts [`FormProps`](https://github.com/final-form/react-final-form#formprops) and other props for easy implementation with the 8base API.\n\n#### Properties\n\n-   `tableSchema` **TableSchema?** The 8base API table schema.\n-   `tableSchemaName` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** The name of the 8base API table schema. This prop only works if `SchemaContext` is provided.\n-   `ignorePristineValues` - This flag allow you to optimize initial data, for example if you don't send mutation with data which has not changed\n\n## Examples\n\n### Basic Form\n\n```jsx\nimport React from 'react';\nimport { render } from 'react-dom';\nimport { Form, Field } from '@8base/forms';\n\nconst TABLE_SCHEMA = {\n  name: 'client',\n  displayName: 'Client',\n  isSystem: false,\n  fields: [{\n    name: 'firstName',\n    displayName: 'First Name',\n    description: null,\n    fieldType: 'TEXT',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: 'Vladimir',\n    relation: null,\n  }, {\n    name: 'lastName',\n    displayName: 'Last Name',\n    description: null,\n    fieldType: 'TEXT',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: 'Putin',\n    relation: null,\n  }, {\n    name: 'age',\n    displayName: 'Age',\n    description: null,\n    fieldType: 'NUMBER',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: null,\n    relation: null,\n  }],\n};\n\nrender(\n  <Form type=\"CREATE\" onSubmit={onSubmit}>\n    {\n      ({ handleSubmit }) => (\n        <form onSubmit={ handleSubmit }>\n          <Field name=\"firstName\" component=\"input\" />\n          <Field name=\"lastName\" component=\"input\" />\n          <Field name=\"age\" component=\"input\" />\n          <button type=\"submit\">Create Client</button>\n        </form>\n      )\n    }\n  </Form>\n, document.getElementById('root'));\n```\n\n### Form with FieldArray\n\n```jsx\nimport React from 'react';\nimport { render } from 'react-dom';\nimport { Form, Field, FieldArray } from '@8base/forms';\n\nconst TABLE_SCHEMA = {\n  name: 'client',\n  displayName: 'Client',\n  isSystem: false,\n  fields: [{\n    name: 'firstName',\n    displayName: 'First Name',\n    description: null,\n    fieldType: 'TEXT',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: 'Vladimir',\n    relation: null,\n  }, {\n    name: 'lastName',\n    displayName: 'Last Name',\n    description: null,\n    fieldType: 'TEXT',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: 'Putin',\n    relation: null,\n  }, {\n    name: 'age',\n    displayName: 'Age',\n    description: null,\n    fieldType: 'NUMBER',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: null,\n    relation: null,\n  }, {\n    name: 'fieldArray',\n    displayName: 'FieldArray',\n    description: null,\n    fieldType: 'TEXT',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: true,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: null,\n    relation: null,\n  }],\n};\n\nrender(\n  <Form type=\"CREATE\" onSubmit={onSubmit}>\n    {\n      ({ handleSubmit }) => (\n        <form onSubmit={ handleSubmit }>\n          <Field name=\"firstName\" component=\"input\" />\n          <Field name=\"lastName\" component=\"input\" />\n          <Field name=\"age\" component=\"input\" />\n          <FieldArray name=\"fieldArray\">\n            {\n              React.Children.toArray(({ fields }) => (\n                <React.Fragment>\n                  {\n                    fields.map((name, index) => (\n                      <React.Fragment>\n                        <Field key={ name } name={ name } component=\"input\" />\n                        <button onClick={ () => fields.remove(index) }>Remove</button>\n                      </React.Fragment>\n                    ))\n                  }\n                  <button onClick={ () => fields.push('New Field Array Item') }>Add</button>\n                </React.Fragment>\n              ))\n            }\n          </FieldArray>\n          <button type=\"submit\">Create Client</button>\n        </form>\n      )\n    }\n  </Form>\n, document.getElementById('root'));\n```\n\n### Multiple Forms with TableSchemaProvider\n\n```jsx\nimport React from 'react';\nimport { render } from 'react-dom';\nimport { Form, Field } from '@8base/forms';\nimport { TableSchemaProvider } from '@8base/table-schema-provider';\n\nconst SCHEMA = [{\n  name: 'client',\n  displayName: 'Client',\n  isSystem: false,\n  fields: [{\n    name: 'firstName',\n    displayName: 'First Name',\n    description: null,\n    fieldType: 'TEXT',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: 'Vladimir',\n    relation: null,\n  }, {\n    name: 'lastName',\n    displayName: 'Last Name',\n    description: null,\n    fieldType: 'TEXT',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: 'Putin',\n    relation: null,\n  }, {\n    name: 'age',\n    displayName: 'Age',\n    description: null,\n    fieldType: 'NUMBER',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: null,\n    relation: null,\n  }],\n}, {\n  name: 'order',\n  displayName: 'Order',\n  isSystem: false,\n  fields: [{\n    name: 'name',\n    displayName: 'name',\n    description: null,\n    fieldType: 'TEXT',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: null,\n    relation: null,\n  }, {\n    name: 'deliveryDate',\n    displayName: 'Delivery Date',\n    description: null,\n    fieldType: 'DATE',\n    fieldTypeAttributes: {\n      format: 'DATE',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: null,\n    relation: null,\n  }],\n}];\n\nrender(\n  <TableSchemaProvider schema={SCHEMA}>\n    <Form type=\"CREATE\" tableSchemaName=\"client\" onSubmit={ onSubmitClient }>\n      {\n        ({ handleSubmit }) => (\n          <form onSubmit={ handleSubmit }>\n            <Field name=\"firstName\" component=\"input\" />\n            <Field name=\"lastName\" component=\"input\" />\n            <Field name=\"age\" component=\"input\" />\n            <button type=\"submit\">Create Client</button>\n          </form>\n        )\n      }\n    </Form>\n    <Form type=\"CREATE\" tableSchemaName=\"order\" onSubmit={onSubmitOrder}>\n      {\n        ({ handleSubmit }) => (\n          <form onSubmit={ handleSubmit }>\n            <Field name=\"name\" component=\"input\" />\n            <Field name=\"deliveryDate\" component=\"input\" />\n            <button type=\"submit\">Create Order</button>\n          </form>\n        )\n      }\n    </Form>\n  </TableSchemaProvider>\n, document.getElementById('root'));\n```\n\n### Complex form\n\n```jsx\nimport React from 'react';\nimport { render } from 'react-dom';\nimport { Form, Field } from '@8base/forms';\nimport { TableSchemaProvider } from '@8base/table-schema-provider';\n\nconst SCHEMA = [{\n  id: 'TABLE_SCHEMA_ID',\n  name: 'tableSchema',\n  displayName: 'Table Schema',\n  isSystem: false,\n  fields: [\n    {\n      name: 'scalar',\n      displayName: 'Scalar',\n      description: null,\n      fieldType: 'TEXT',\n      fieldTypeAttributes: {\n        format: 'UNFORMATTED',\n        fieldSize: 100,\n      },\n      isList: false,\n      isRequired: false,\n      isUnique: false,\n      defaultValue: 'Scalar Default Value',\n      relation: null,\n    },\n    {\n      name: 'scalarList',\n      displayName: 'Scalar List',\n      description: null,\n      fieldType: 'TEXT',\n      fieldTypeAttributes: {\n        format: 'UNFORMATTED',\n        fieldSize: 100,\n      },\n      isList: true,\n      isRequired: false,\n      isUnique: false,\n      defaultValue: 'Scalar List Default Value 1',\n      relation: null,\n    },\n    {\n      name: 'relation',\n      displayName: 'Relation',\n      description: null,\n      fieldType: 'RELATION',\n      fieldTypeAttributes: null,\n      isList: false,\n      isRequired: false,\n      isUnique: null,\n      defaultValue: null,\n      relation: {\n        id: 'RELATION_FIELD_ID_1',\n        relationTableName: 'RELATION_TABLE_NAME_1',\n        relationFieldName: 'aid',\n        refTable: {\n          id: 'RELATION_TABLE_SCHEMA_ID',\n        },\n        refFieldIsList: false,\n        refFieldIsRequired: true,\n      },\n    },\n    {\n      name: 'relationList',\n      displayName: 'RelationList',\n      description: null,\n      fieldType: 'RELATION',\n      fieldTypeAttributes: null,\n      isList: true,\n      isRequired: false,\n      isUnique: null,\n      defaultValue: null,\n      relation: {\n        id: 'RELATION_FIELD_ID_2',\n        relationTableName: 'RELATION_TABLE_NAME_2',\n        relationFieldName: 'aid',\n        refTable: {\n          id: 'RELATION_TABLE_SCHEMA_ID',\n        },\n        refFieldIsList: false,\n        refFieldIsRequired: true,\n      },\n    },\n  ],\n}, {\n  id: 'RELATION_TABLE_SCHEMA_ID',\n  name: 'relationTableSchema',\n  displayName: 'Relation Table Schema',\n  isSystem: false,\n  fields: [\n    {\n      name: 'scalar',\n      displayName: 'Scalar',\n      description: null,\n      fieldType: 'TEXT',\n      fieldTypeAttributes: {\n        format: 'UNFORMATTED',\n        fieldSize: 100,\n      },\n      isList: false,\n      isRequired: false,\n      isUnique: false,\n      defaultValue: 'Scalar Default Value',\n      relation: null,\n    },\n    {\n      name: 'scalarList',\n      displayName: 'Scalar List',\n      description: null,\n      fieldType: 'TEXT',\n      fieldTypeAttributes: {\n        format: 'UNFORMATTED',\n        fieldSize: 100,\n      },\n      isList: true,\n      isRequired: false,\n      isUnique: false,\n      defaultValue: 'Scalar List Default Value 1',\n      relation: null,\n    },\n    {\n      name: 'relation',\n      displayName: 'Relation',\n      description: null,\n      fieldType: 'RELATION',\n      fieldTypeAttributes: null,\n      isList: false,\n      isRequired: false,\n      isUnique: null,\n      defaultValue: null,\n      relation: {\n        id: 'RELATION_FIELD_ID_3',\n        relationTableName: 'RELATION_TABLE_NAME_1',\n        relationFieldName: 'aid',\n        refTable: {\n          id: 'TABLE_SCHEMA_ID',\n        },\n        refFieldIsList: false,\n        refFieldIsRequired: true,\n      },\n    },\n    {\n      name: 'relationList',\n      displayName: 'RelationList',\n      description: null,\n      fieldType: 'RELATION',\n      fieldTypeAttributes: null,\n      isList: true,\n      isRequired: false,\n      isUnique: null,\n      defaultValue: null,\n      relation: {\n        id: 'RELATION_FIELD_ID_4',\n        relationTableName: 'RELATION_TABLE_NAME_2',\n        relationFieldName: 'aid',\n        refTable: {\n          id: 'TABLE_SCHEMA_ID',\n        },\n        refFieldIsList: false,\n        refFieldIsRequired: true,\n      },\n    },\n  ],\n}];\n\nconst INITIAL_VALUES = {\n  scalar: 'Scalar Value',\n  scalarList: [\n    'Scalar List Value',\n  ],\n  relation: {\n    scalar: 'Relation Scalar Value',\n  },\n  relationList: [{\n    scalar: 'Relation List Scalar Value',\n  }],\n};\n\nrender(\n  <TableSchemaProvider value={ SCHEMA }>\n    <Form type=\"CREATE\" tableSchemaName=\"tableSchema\" initialValues={ INITIAL_VALUES } onSubmit={ onSubmitForm }>\n      {\n        ({ handleSubmit }) => (\n          <form onSubmit={ handleSubmit }>\n            <Field name=\"scalar\" component=\"input\" />\n            <FieldArray name=\"scalarList\">\n              {\n                ({ fields }) => (\n                  fields.map((name) => (\n                    <Field key={ name } name={ name } component=\"input\" />\n                  ))\n                )\n              }\n            </FieldArray>\n            <Fieldset tableSchemaName=\"relationTableSchema\">\n              <Field name=\"relation.scalar\" component=\"input\" />\n            </Fieldset>\n            <FieldArray name=\"relationList\">\n              {\n                ({ fields }) => (\n                  fields.map((name) => (\n                    <Fieldset key={ name } tableSchemaName=\"relationTableSchema\">\n                      <Field name={ `${name}.scalar` } component=\"input\" />\n                    </Fieldset>\n                  ))\n                )\n              }\n            </FieldArray>\n          </form>\n        )\n      }\n    </Form>\n  </TableSchemaProvider>\n, document.getElementById('root'));\n```\n","readmeFilename":"README.md","description":"8base Forms is a thin React wrapper for React Final Forms to easy implement forms for 8base API entities.","bugs":{"url":"https://github.com/8base/sdk/issues"},"_id":"@8base/react-forms@3.0.0-beta.1","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-Znm0N7zHF8lyH8COdQUghkiVigSM5ZZ0ryWhn2SvvO2vYydpv+GTo2dWdqkQynJn7AUXZscPVw6JXGltHpcO/A==","shasum":"4cd2f3e183c70632ad56e4b31d096aaef1918483","tarball":"https://registry.npmjs.org/@8base/react-forms/-/react-forms-3.0.0-beta.1.tgz","fileCount":92,"unpackedSize":95287,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtuELYbUm4CdAntz2wvyh9Fzns46vHsNjgHWJnL8SbLAIhAIhNAJuRk+QXvwk2xs5qlOVmjAh2zmiWP+UcEbuOPwQM"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNukKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5tg/9E5RL2Iqj9zr0+jskjg5nIxGAcs+uI6N5UcV/uTk43sOjkf4a\r\n0+IUiScS+0dG6ayrS97D9zs6d4dA8HuQ0XFPi5HGqHfSR4rklKvRjGyeL27E\r\niDIc3fM30uvS5GIjwXASrBUXhLHskLqZpgq51xNEBfJqhLDNibJnMo9Ld+dZ\r\nEAorI8xb3LxHdF1cpOXtOvdPvslS/MgeVLTISXy51n6N2xrveBAZHkTtAmGu\r\n71C3NTAZoM4ZxqahENXxC9kJSfUsieSepZQ1s+ufRxPgYAQ3/XLlXzwaeZWC\r\n/3Gc8GR9/+s+aEHIhHxPh81MmpJaxUcSNccsSYe4XKr2HxT+Bunj3zvHtIjv\r\nYhdq1j/uLHppBZ8+QGJs5IeYHFc/C/V2+f8ZAZ/5pLAN9U7tDJ3ogTod+Imm\r\nDXn6zqfg2oWzBGYmBfPfalsOSskasmQufWLFdOTXMFfHArRtqejkXJVMUjUK\r\nbbDvDCiUMUVZLggOmkaFuuzF/Mphzi9dNVnCtMiaBGe+TY8eyQ41QUUHe/4O\r\nIKpN9fcsQjXdrVQs9ZQ0mYK2XmYM4WDQZB0WzRvvodQDFl07xSP0DAtULEIP\r\n5DEAQg3Bq3tU33BoQIXi1/rTU6sh4QFfp9yZF6OHsFE2BpYat0dyYpcmgjg5\r\nBVXn1fFqN5MYmjkfoZUv+jyHsYpdBVsUbsY=\r\n=c9u2\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"8base-bot","email":"npmpublisher@8base.com"},"directories":{},"maintainers":[{"name":"8base-bot","email":"npmpublisher@8base.com"},{"name":"selnapenek","email":"slel64222@gmail.com"},{"name":"8basetimmyers","email":"timothy.myers@8base.com"},{"name":"s1owjke","email":"s1ow933@yahoo.com"},{"name":"eugene.antonevich","email":"eugene.antonevich@8base.com"},{"name":"ilazarev","email":"ilya.lazarev@8base.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-forms_3.0.0-beta.1_1681320202468_0.22969256094940071"},"_hasShrinkwrap":false},"3.0.0-beta.3":{"name":"@8base/react-forms","version":"3.0.0-beta.3","repository":{"type":"git","url":"git+https://github.com/8base/sdk.git"},"homepage":"https://github.com/8base/sdk/tree/master/packages/react/forms","main":"dist/cjs/index.js","types":"dist/mjs/index.d.ts","module":"dist/mjs/index.js","scripts":{"build":"../../../bin/build-package.sh","watch":"../../../bin/watch-package.sh","test":"NPM_ENV=test jest"},"peerDependencies":{"react":"^17.0.1","react-dom":"^17.0.1"},"dependencies":{"@8base/error-codes":"^1.0.22","@8base/react-permissions-provider":"^3.0.0-beta.3","@8base/react-table-schema-provider":"^3.0.0-beta.3","@8base/utils":"^3.0.0-beta.3","@8base/validate":"^3.0.0-beta.3","final-form":"^4.20.1","final-form-arrays":"^3.0.2","prop-types":"^15.7.2","ramda":"^0.27.1","react-final-form":"^6.5.2","react-final-form-arrays":"^3.1.3"},"devDependencies":{"@types/jest":"^26.0.20","@types/node":"^14.14.22","@types/ramda":"^0.27.36","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","@types/react-test-renderer":"^17.0.0","jest":"26.6.3","react":"^17.0.1","react-dom":"^17.0.1","react-test-renderer":"^17.0.1","ts-jest":"^26.4.4","typescript":"^4.1.3"},"jest":{"globals":{"ts-jest":{"tsconfig":"<rootDir>/test/tsconfig.json"}},"setupFiles":["<rootDir>/test/jest.setup.ts"],"collectCoverageFrom":["<rootDir>/src/**","!<rootDir>/**/__tests__/**"],"moduleNameMapper":{"@8base/sdk-core":"<rootDir>/../../core/8base-sdk/src/index.ts","@8base/api-client":"<rootDir>/../../core/api-client/src/index.ts","@8base/api-token-auth-client":"<rootDir>/../../core/api-token-auth-client/src/index.ts","@8base/apollo-client":"<rootDir>/../../core/apollo-client/src/index.ts","@8base/apollo-links":"<rootDir>/../../core/apollo-links/src/index.ts","@8base/auth":"<rootDir>/../../core/auth/src/index.ts","@8base/utils":"<rootDir>/../../core/utils/src/index.ts","@8base/validate":"<rootDir>/../../core/validate/src/index.ts","@8base/web-auth0-auth-client":"<rootDir>/../../core/web-auth0-auth-client/src/index.ts","@8base/web-cognito-auth-client":"<rootDir>/../../core/web-cognito-auth-client/src/index.ts","@8base/web-native-auth-client":"<rootDir>/../../core/web-native-auth-client/src/index.ts","@8base/web-oauth-client":"<rootDir>/../../core/web-oauth-client/src/index.ts","@8base/sdk-react":"<rootDir>/../../react/8base-react-sdk/src/index.ts","@8base/react-app-provider":"<rootDir>/../../react/app-provider/src/index.ts","@8base/react-auth":"<rootDir>/../../react/auth/src/index.ts","@8base/react-crud":"<rootDir>/../../react/crud/src/index.ts","@8base/react-file-input":"<rootDir>/../../react/file-input/src/index.ts","@8base/react-forms":"<rootDir>/../../react/forms/src/index.ts","@8base/react-permissions-provider":"<rootDir>/../../react/permissions-provider/src/index.ts","@8base/react-table-schema-provider":"<rootDir>/../../react/table-schema-provider/src/index.ts","@8base/react-utils":"<rootDir>/../../react/utils/src/index.ts"},"moduleFileExtensions":["ts","tsx","js","jsx"],"transform":{"^.+\\.(ts|tsx)$":"ts-jest"},"testMatch":["**/__tests__/**/*.[jt]s?(x)","**/?(*.)+(spec|test).[jt]s?(x)"]},"license":"MIT","readme":"# 8base Forms\n\n8base Forms is a thin React wrapper for React Final Forms to easy implement forms for 8base API entities.\n\n## API\n\n<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n#### Table of Contents\n\n- [8base Forms](#8base-forms)\n  - [API](#api)\n      - [Table of Contents](#table-of-contents)\n    - [Field](#field)\n      - [Properties](#properties)\n    - [FieldArray](#fieldarray)\n    - [Fieldset](#fieldset)\n      - [Properties](#properties-1)\n    - [Form](#form)\n      - [Properties](#properties-2)\n  - [Examples](#examples)\n    - [Basic Form](#basic-form)\n    - [Form with FieldArray](#form-with-fieldarray)\n    - [Multiple Forms with TableSchemaProvider](#multiple-forms-with-tableschemaprovider)\n    - [Complex form](#complex-form)\n\n### Field\n\n**Extends React.Component**\n\n`Field` wrapper based on `Field` from the [`react-final-form`](https://github.com/final-form/react-final-form). This component accepts [`FieldProps`](https://github.com/final-form/react-final-form#fieldprops) and other props for easy implementation with the 8base API.\n\n#### Properties\n\n-   `fieldSchema` **FieldSchema?** The 8base API field schema.\n-   `name` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** The name of field, based on the 8base API table schema.\n\n### FieldArray\n\n**Extends React.Component**\n\n`FieldArray` wrapper based on `FieldArray` from the [`react-final-form-arrays`](https://github.com/final-form/react-final-form-arrays). It accepts [`FieldArrayProps`](https://github.com/final-form/react-final-form-arrays#fieldarrayprops) as a prop.\n\n### Fieldset\n\n**Extends React.Component**\n\n`Fieldset` passes relation table schema to the children fields.\n\n#### Properties\n\n-   `tableSchema` **TableSchema?** The 8base API table schema.\n-   `tableSchemaName` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** The name of the 8base API table schema. This prop only works if `SchemaContext` is provided.\n\n### Form\n\n**Extends React.Component**\n\n`Form` wrapper based on `Form` from the [`react-final-form`](https://github.com/final-form/react-final-form). This component accepts [`FormProps`](https://github.com/final-form/react-final-form#formprops) and other props for easy implementation with the 8base API.\n\n#### Properties\n\n-   `tableSchema` **TableSchema?** The 8base API table schema.\n-   `tableSchemaName` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** The name of the 8base API table schema. This prop only works if `SchemaContext` is provided.\n-   `ignorePristineValues` - This flag allow you to optimize initial data, for example if you don't send mutation with data which has not changed\n\n## Examples\n\n### Basic Form\n\n```jsx\nimport React from 'react';\nimport { render } from 'react-dom';\nimport { Form, Field } from '@8base/forms';\n\nconst TABLE_SCHEMA = {\n  name: 'client',\n  displayName: 'Client',\n  isSystem: false,\n  fields: [{\n    name: 'firstName',\n    displayName: 'First Name',\n    description: null,\n    fieldType: 'TEXT',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: 'Vladimir',\n    relation: null,\n  }, {\n    name: 'lastName',\n    displayName: 'Last Name',\n    description: null,\n    fieldType: 'TEXT',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: 'Putin',\n    relation: null,\n  }, {\n    name: 'age',\n    displayName: 'Age',\n    description: null,\n    fieldType: 'NUMBER',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: null,\n    relation: null,\n  }],\n};\n\nrender(\n  <Form type=\"CREATE\" onSubmit={onSubmit}>\n    {\n      ({ handleSubmit }) => (\n        <form onSubmit={ handleSubmit }>\n          <Field name=\"firstName\" component=\"input\" />\n          <Field name=\"lastName\" component=\"input\" />\n          <Field name=\"age\" component=\"input\" />\n          <button type=\"submit\">Create Client</button>\n        </form>\n      )\n    }\n  </Form>\n, document.getElementById('root'));\n```\n\n### Form with FieldArray\n\n```jsx\nimport React from 'react';\nimport { render } from 'react-dom';\nimport { Form, Field, FieldArray } from '@8base/forms';\n\nconst TABLE_SCHEMA = {\n  name: 'client',\n  displayName: 'Client',\n  isSystem: false,\n  fields: [{\n    name: 'firstName',\n    displayName: 'First Name',\n    description: null,\n    fieldType: 'TEXT',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: 'Vladimir',\n    relation: null,\n  }, {\n    name: 'lastName',\n    displayName: 'Last Name',\n    description: null,\n    fieldType: 'TEXT',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: 'Putin',\n    relation: null,\n  }, {\n    name: 'age',\n    displayName: 'Age',\n    description: null,\n    fieldType: 'NUMBER',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: null,\n    relation: null,\n  }, {\n    name: 'fieldArray',\n    displayName: 'FieldArray',\n    description: null,\n    fieldType: 'TEXT',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: true,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: null,\n    relation: null,\n  }],\n};\n\nrender(\n  <Form type=\"CREATE\" onSubmit={onSubmit}>\n    {\n      ({ handleSubmit }) => (\n        <form onSubmit={ handleSubmit }>\n          <Field name=\"firstName\" component=\"input\" />\n          <Field name=\"lastName\" component=\"input\" />\n          <Field name=\"age\" component=\"input\" />\n          <FieldArray name=\"fieldArray\">\n            {\n              React.Children.toArray(({ fields }) => (\n                <React.Fragment>\n                  {\n                    fields.map((name, index) => (\n                      <React.Fragment>\n                        <Field key={ name } name={ name } component=\"input\" />\n                        <button onClick={ () => fields.remove(index) }>Remove</button>\n                      </React.Fragment>\n                    ))\n                  }\n                  <button onClick={ () => fields.push('New Field Array Item') }>Add</button>\n                </React.Fragment>\n              ))\n            }\n          </FieldArray>\n          <button type=\"submit\">Create Client</button>\n        </form>\n      )\n    }\n  </Form>\n, document.getElementById('root'));\n```\n\n### Multiple Forms with TableSchemaProvider\n\n```jsx\nimport React from 'react';\nimport { render } from 'react-dom';\nimport { Form, Field } from '@8base/forms';\nimport { TableSchemaProvider } from '@8base/table-schema-provider';\n\nconst SCHEMA = [{\n  name: 'client',\n  displayName: 'Client',\n  isSystem: false,\n  fields: [{\n    name: 'firstName',\n    displayName: 'First Name',\n    description: null,\n    fieldType: 'TEXT',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: 'Vladimir',\n    relation: null,\n  }, {\n    name: 'lastName',\n    displayName: 'Last Name',\n    description: null,\n    fieldType: 'TEXT',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: 'Putin',\n    relation: null,\n  }, {\n    name: 'age',\n    displayName: 'Age',\n    description: null,\n    fieldType: 'NUMBER',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: null,\n    relation: null,\n  }],\n}, {\n  name: 'order',\n  displayName: 'Order',\n  isSystem: false,\n  fields: [{\n    name: 'name',\n    displayName: 'name',\n    description: null,\n    fieldType: 'TEXT',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: null,\n    relation: null,\n  }, {\n    name: 'deliveryDate',\n    displayName: 'Delivery Date',\n    description: null,\n    fieldType: 'DATE',\n    fieldTypeAttributes: {\n      format: 'DATE',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: null,\n    relation: null,\n  }],\n}];\n\nrender(\n  <TableSchemaProvider schema={SCHEMA}>\n    <Form type=\"CREATE\" tableSchemaName=\"client\" onSubmit={ onSubmitClient }>\n      {\n        ({ handleSubmit }) => (\n          <form onSubmit={ handleSubmit }>\n            <Field name=\"firstName\" component=\"input\" />\n            <Field name=\"lastName\" component=\"input\" />\n            <Field name=\"age\" component=\"input\" />\n            <button type=\"submit\">Create Client</button>\n          </form>\n        )\n      }\n    </Form>\n    <Form type=\"CREATE\" tableSchemaName=\"order\" onSubmit={onSubmitOrder}>\n      {\n        ({ handleSubmit }) => (\n          <form onSubmit={ handleSubmit }>\n            <Field name=\"name\" component=\"input\" />\n            <Field name=\"deliveryDate\" component=\"input\" />\n            <button type=\"submit\">Create Order</button>\n          </form>\n        )\n      }\n    </Form>\n  </TableSchemaProvider>\n, document.getElementById('root'));\n```\n\n### Complex form\n\n```jsx\nimport React from 'react';\nimport { render } from 'react-dom';\nimport { Form, Field } from '@8base/forms';\nimport { TableSchemaProvider } from '@8base/table-schema-provider';\n\nconst SCHEMA = [{\n  id: 'TABLE_SCHEMA_ID',\n  name: 'tableSchema',\n  displayName: 'Table Schema',\n  isSystem: false,\n  fields: [\n    {\n      name: 'scalar',\n      displayName: 'Scalar',\n      description: null,\n      fieldType: 'TEXT',\n      fieldTypeAttributes: {\n        format: 'UNFORMATTED',\n        fieldSize: 100,\n      },\n      isList: false,\n      isRequired: false,\n      isUnique: false,\n      defaultValue: 'Scalar Default Value',\n      relation: null,\n    },\n    {\n      name: 'scalarList',\n      displayName: 'Scalar List',\n      description: null,\n      fieldType: 'TEXT',\n      fieldTypeAttributes: {\n        format: 'UNFORMATTED',\n        fieldSize: 100,\n      },\n      isList: true,\n      isRequired: false,\n      isUnique: false,\n      defaultValue: 'Scalar List Default Value 1',\n      relation: null,\n    },\n    {\n      name: 'relation',\n      displayName: 'Relation',\n      description: null,\n      fieldType: 'RELATION',\n      fieldTypeAttributes: null,\n      isList: false,\n      isRequired: false,\n      isUnique: null,\n      defaultValue: null,\n      relation: {\n        id: 'RELATION_FIELD_ID_1',\n        relationTableName: 'RELATION_TABLE_NAME_1',\n        relationFieldName: 'aid',\n        refTable: {\n          id: 'RELATION_TABLE_SCHEMA_ID',\n        },\n        refFieldIsList: false,\n        refFieldIsRequired: true,\n      },\n    },\n    {\n      name: 'relationList',\n      displayName: 'RelationList',\n      description: null,\n      fieldType: 'RELATION',\n      fieldTypeAttributes: null,\n      isList: true,\n      isRequired: false,\n      isUnique: null,\n      defaultValue: null,\n      relation: {\n        id: 'RELATION_FIELD_ID_2',\n        relationTableName: 'RELATION_TABLE_NAME_2',\n        relationFieldName: 'aid',\n        refTable: {\n          id: 'RELATION_TABLE_SCHEMA_ID',\n        },\n        refFieldIsList: false,\n        refFieldIsRequired: true,\n      },\n    },\n  ],\n}, {\n  id: 'RELATION_TABLE_SCHEMA_ID',\n  name: 'relationTableSchema',\n  displayName: 'Relation Table Schema',\n  isSystem: false,\n  fields: [\n    {\n      name: 'scalar',\n      displayName: 'Scalar',\n      description: null,\n      fieldType: 'TEXT',\n      fieldTypeAttributes: {\n        format: 'UNFORMATTED',\n        fieldSize: 100,\n      },\n      isList: false,\n      isRequired: false,\n      isUnique: false,\n      defaultValue: 'Scalar Default Value',\n      relation: null,\n    },\n    {\n      name: 'scalarList',\n      displayName: 'Scalar List',\n      description: null,\n      fieldType: 'TEXT',\n      fieldTypeAttributes: {\n        format: 'UNFORMATTED',\n        fieldSize: 100,\n      },\n      isList: true,\n      isRequired: false,\n      isUnique: false,\n      defaultValue: 'Scalar List Default Value 1',\n      relation: null,\n    },\n    {\n      name: 'relation',\n      displayName: 'Relation',\n      description: null,\n      fieldType: 'RELATION',\n      fieldTypeAttributes: null,\n      isList: false,\n      isRequired: false,\n      isUnique: null,\n      defaultValue: null,\n      relation: {\n        id: 'RELATION_FIELD_ID_3',\n        relationTableName: 'RELATION_TABLE_NAME_1',\n        relationFieldName: 'aid',\n        refTable: {\n          id: 'TABLE_SCHEMA_ID',\n        },\n        refFieldIsList: false,\n        refFieldIsRequired: true,\n      },\n    },\n    {\n      name: 'relationList',\n      displayName: 'RelationList',\n      description: null,\n      fieldType: 'RELATION',\n      fieldTypeAttributes: null,\n      isList: true,\n      isRequired: false,\n      isUnique: null,\n      defaultValue: null,\n      relation: {\n        id: 'RELATION_FIELD_ID_4',\n        relationTableName: 'RELATION_TABLE_NAME_2',\n        relationFieldName: 'aid',\n        refTable: {\n          id: 'TABLE_SCHEMA_ID',\n        },\n        refFieldIsList: false,\n        refFieldIsRequired: true,\n      },\n    },\n  ],\n}];\n\nconst INITIAL_VALUES = {\n  scalar: 'Scalar Value',\n  scalarList: [\n    'Scalar List Value',\n  ],\n  relation: {\n    scalar: 'Relation Scalar Value',\n  },\n  relationList: [{\n    scalar: 'Relation List Scalar Value',\n  }],\n};\n\nrender(\n  <TableSchemaProvider value={ SCHEMA }>\n    <Form type=\"CREATE\" tableSchemaName=\"tableSchema\" initialValues={ INITIAL_VALUES } onSubmit={ onSubmitForm }>\n      {\n        ({ handleSubmit }) => (\n          <form onSubmit={ handleSubmit }>\n            <Field name=\"scalar\" component=\"input\" />\n            <FieldArray name=\"scalarList\">\n              {\n                ({ fields }) => (\n                  fields.map((name) => (\n                    <Field key={ name } name={ name } component=\"input\" />\n                  ))\n                )\n              }\n            </FieldArray>\n            <Fieldset tableSchemaName=\"relationTableSchema\">\n              <Field name=\"relation.scalar\" component=\"input\" />\n            </Fieldset>\n            <FieldArray name=\"relationList\">\n              {\n                ({ fields }) => (\n                  fields.map((name) => (\n                    <Fieldset key={ name } tableSchemaName=\"relationTableSchema\">\n                      <Field name={ `${name}.scalar` } component=\"input\" />\n                    </Fieldset>\n                  ))\n                )\n              }\n            </FieldArray>\n          </form>\n        )\n      }\n    </Form>\n  </TableSchemaProvider>\n, document.getElementById('root'));\n```\n","readmeFilename":"README.md","description":"8base Forms is a thin React wrapper for React Final Forms to easy implement forms for 8base API entities.","bugs":{"url":"https://github.com/8base/sdk/issues"},"_id":"@8base/react-forms@3.0.0-beta.3","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-JO8AaKG5psu7nFhRpNgpiX7gFLmAnuMKZZtfQ0m/4kEtdReCDDKTQWt/dybyKqIFqqy4T5nwar5PKwpWd5Qu4g==","shasum":"718d2a1cd0e31d4bc3095c7f53719ce539502ffc","tarball":"https://registry.npmjs.org/@8base/react-forms/-/react-forms-3.0.0-beta.3.tgz","fileCount":92,"unpackedSize":95613,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBcweSw1HrSlGIFbmF5iYP5+ndzfAhawpMkkkXbXOLS5AiEAq8VZTO1rjqD5xceU4p7E3ARITnPg7u30hPVOrQVPzu0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNvHSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqv+Q//XesWbjMSxlz+uYSgaNGxt7B2IGdJKtfOngoV+8NQyH26Rojs\r\nb287peQdoB3tblllGvcwFK+FCQrbccEvSSL8g04EjGnqPEQ/xB0v7g4D43//\r\nMwijiBTXNNO5f5Ks45LAg4jSBrvFoHvGBrBArht4wzDQvq4MuwkLU5Hg7OTh\r\nrtYG6jAo/n37aKL9byX5twO89sQPXKK+GdvkNDWyiYwWImtpjBBpRrELk2eH\r\nR6ZwmN2fucMt9D0PcICkDKykZzFVhHxhzuG5QJ1oblB8IBTbNAgBLs2NvQvM\r\nljCqduXnuYpNImU4oOwxWJIfhI14g0uwU6QG7HfK5N/IIU7bpSV/kfZ5vWL6\r\nuTf/PTeyIWO4tJVOcjwqIqCHKnAO9tYfnFWYF1UhQw6vGCIU7GxZfFtu3UgN\r\nekaRtM/xk+DPvI1LdHlCAdADTEDe3BKIusgvUDIUbPu4PQd25J4Pw/8/EdKE\r\nqF+X8wRz3XtkvV6z+JArkTmvnpFBgU2oN8NWNo8tEZOajl2NZmm+m4DV0em5\r\nAnjjx5l8MZIHc9imhsreEBVjxed/8jfHiOS10M2u3yFiRUES6MqMgG/U2FPA\r\n9NFYVhWQMqO4SsCsW1xPlE0ADXvV349xOPypa3j1Bm+fQUNns+ST5MpzQZPz\r\nNWPr1GznP/m7bQEIY1S8KwWm74rJdsOFeoU=\r\n=WL2R\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"8base-bot","email":"npmpublisher@8base.com"},"directories":{},"maintainers":[{"name":"8base-bot","email":"npmpublisher@8base.com"},{"name":"selnapenek","email":"slel64222@gmail.com"},{"name":"8basetimmyers","email":"timothy.myers@8base.com"},{"name":"s1owjke","email":"s1ow933@yahoo.com"},{"name":"eugene.antonevich","email":"eugene.antonevich@8base.com"},{"name":"ilazarev","email":"ilya.lazarev@8base.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-forms_3.0.0-beta.3_1681322450493_0.38278650747446563"},"_hasShrinkwrap":false},"3.1.0-beta.0":{"name":"@8base/react-forms","version":"3.1.0-beta.0","repository":{"type":"git","url":"git+https://github.com/8base/sdk.git"},"homepage":"https://github.com/8base/sdk/tree/master/packages/react/forms","main":"dist/cjs/index.js","types":"dist/mjs/index.d.ts","module":"dist/mjs/index.js","scripts":{"build":"../../../bin/build-package.sh","watch":"../../../bin/watch-package.sh","test":"NPM_ENV=test jest"},"peerDependencies":{"react":">=17.0.1","react-dom":">=17.0.1"},"dependencies":{"@8base/error-codes":"^1.0.22","@8base/react-permissions-provider":"^3.1.0-beta.0","@8base/react-table-schema-provider":"^3.1.0-beta.0","@8base/utils":"^3.1.0-beta.0","@8base/validate":"^3.1.0-beta.0","final-form":"^4.20.1","final-form-arrays":"^3.0.2","prop-types":"^15.7.2","ramda":"^0.27.1","react-final-form":"^6.5.2","react-final-form-arrays":"^3.1.3"},"devDependencies":{"@types/jest":"^26.0.20","@types/node":"^14.14.22","@types/ramda":"^0.27.36","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","@types/react-test-renderer":"^17.0.0","jest":"26.6.3","react":"^17.0.1","react-dom":"^17.0.1","react-test-renderer":"^17.0.1","ts-jest":"^26.4.4","typescript":"^4.1.3"},"jest":{"globals":{"ts-jest":{"tsconfig":"<rootDir>/test/tsconfig.json"}},"setupFiles":["<rootDir>/test/jest.setup.ts"],"collectCoverageFrom":["<rootDir>/src/**","!<rootDir>/**/__tests__/**"],"moduleNameMapper":{"@8base/sdk-core":"<rootDir>/../../core/8base-sdk/src/index.ts","@8base/api-client":"<rootDir>/../../core/api-client/src/index.ts","@8base/api-token-auth-client":"<rootDir>/../../core/api-token-auth-client/src/index.ts","@8base/apollo-client":"<rootDir>/../../core/apollo-client/src/index.ts","@8base/apollo-links":"<rootDir>/../../core/apollo-links/src/index.ts","@8base/auth":"<rootDir>/../../core/auth/src/index.ts","@8base/utils":"<rootDir>/../../core/utils/src/index.ts","@8base/validate":"<rootDir>/../../core/validate/src/index.ts","@8base/web-auth0-auth-client":"<rootDir>/../../core/web-auth0-auth-client/src/index.ts","@8base/web-cognito-auth-client":"<rootDir>/../../core/web-cognito-auth-client/src/index.ts","@8base/web-native-auth-client":"<rootDir>/../../core/web-native-auth-client/src/index.ts","@8base/web-oauth-client":"<rootDir>/../../core/web-oauth-client/src/index.ts","@8base/sdk-react":"<rootDir>/../../react/8base-react-sdk/src/index.ts","@8base/react-app-provider":"<rootDir>/../../react/app-provider/src/index.ts","@8base/react-auth":"<rootDir>/../../react/auth/src/index.ts","@8base/react-crud":"<rootDir>/../../react/crud/src/index.ts","@8base/react-file-input":"<rootDir>/../../react/file-input/src/index.ts","@8base/react-forms":"<rootDir>/../../react/forms/src/index.ts","@8base/react-permissions-provider":"<rootDir>/../../react/permissions-provider/src/index.ts","@8base/react-table-schema-provider":"<rootDir>/../../react/table-schema-provider/src/index.ts","@8base/react-utils":"<rootDir>/../../react/utils/src/index.ts"},"moduleFileExtensions":["ts","tsx","js","jsx"],"transform":{"^.+\\.(ts|tsx)$":"ts-jest"},"testMatch":["**/__tests__/**/*.[jt]s?(x)","**/?(*.)+(spec|test).[jt]s?(x)"]},"license":"MIT","readme":"# 8base Forms\n\n8base Forms is a thin React wrapper for React Final Forms to easy implement forms for 8base API entities.\n\n## API\n\n<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n#### Table of Contents\n\n- [8base Forms](#8base-forms)\n  - [API](#api)\n      - [Table of Contents](#table-of-contents)\n    - [Field](#field)\n      - [Properties](#properties)\n    - [FieldArray](#fieldarray)\n    - [Fieldset](#fieldset)\n      - [Properties](#properties-1)\n    - [Form](#form)\n      - [Properties](#properties-2)\n  - [Examples](#examples)\n    - [Basic Form](#basic-form)\n    - [Form with FieldArray](#form-with-fieldarray)\n    - [Multiple Forms with TableSchemaProvider](#multiple-forms-with-tableschemaprovider)\n    - [Complex form](#complex-form)\n\n### Field\n\n**Extends React.Component**\n\n`Field` wrapper based on `Field` from the [`react-final-form`](https://github.com/final-form/react-final-form). This component accepts [`FieldProps`](https://github.com/final-form/react-final-form#fieldprops) and other props for easy implementation with the 8base API.\n\n#### Properties\n\n-   `fieldSchema` **FieldSchema?** The 8base API field schema.\n-   `name` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** The name of field, based on the 8base API table schema.\n\n### FieldArray\n\n**Extends React.Component**\n\n`FieldArray` wrapper based on `FieldArray` from the [`react-final-form-arrays`](https://github.com/final-form/react-final-form-arrays). It accepts [`FieldArrayProps`](https://github.com/final-form/react-final-form-arrays#fieldarrayprops) as a prop.\n\n### Fieldset\n\n**Extends React.Component**\n\n`Fieldset` passes relation table schema to the children fields.\n\n#### Properties\n\n-   `tableSchema` **TableSchema?** The 8base API table schema.\n-   `tableSchemaName` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** The name of the 8base API table schema. This prop only works if `SchemaContext` is provided.\n\n### Form\n\n**Extends React.Component**\n\n`Form` wrapper based on `Form` from the [`react-final-form`](https://github.com/final-form/react-final-form). This component accepts [`FormProps`](https://github.com/final-form/react-final-form#formprops) and other props for easy implementation with the 8base API.\n\n#### Properties\n\n-   `tableSchema` **TableSchema?** The 8base API table schema.\n-   `tableSchemaName` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** The name of the 8base API table schema. This prop only works if `SchemaContext` is provided.\n-   `ignorePristineValues` - This flag allow you to optimize initial data, for example if you don't send mutation with data which has not changed\n\n## Examples\n\n### Basic Form\n\n```jsx\nimport React from 'react';\nimport { render } from 'react-dom';\nimport { Form, Field } from '@8base/forms';\n\nconst TABLE_SCHEMA = {\n  name: 'client',\n  displayName: 'Client',\n  isSystem: false,\n  fields: [{\n    name: 'firstName',\n    displayName: 'First Name',\n    description: null,\n    fieldType: 'TEXT',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: 'Vladimir',\n    relation: null,\n  }, {\n    name: 'lastName',\n    displayName: 'Last Name',\n    description: null,\n    fieldType: 'TEXT',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: 'Putin',\n    relation: null,\n  }, {\n    name: 'age',\n    displayName: 'Age',\n    description: null,\n    fieldType: 'NUMBER',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: null,\n    relation: null,\n  }],\n};\n\nrender(\n  <Form type=\"CREATE\" onSubmit={onSubmit}>\n    {\n      ({ handleSubmit }) => (\n        <form onSubmit={ handleSubmit }>\n          <Field name=\"firstName\" component=\"input\" />\n          <Field name=\"lastName\" component=\"input\" />\n          <Field name=\"age\" component=\"input\" />\n          <button type=\"submit\">Create Client</button>\n        </form>\n      )\n    }\n  </Form>\n, document.getElementById('root'));\n```\n\n### Form with FieldArray\n\n```jsx\nimport React from 'react';\nimport { render } from 'react-dom';\nimport { Form, Field, FieldArray } from '@8base/forms';\n\nconst TABLE_SCHEMA = {\n  name: 'client',\n  displayName: 'Client',\n  isSystem: false,\n  fields: [{\n    name: 'firstName',\n    displayName: 'First Name',\n    description: null,\n    fieldType: 'TEXT',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: 'Vladimir',\n    relation: null,\n  }, {\n    name: 'lastName',\n    displayName: 'Last Name',\n    description: null,\n    fieldType: 'TEXT',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: 'Putin',\n    relation: null,\n  }, {\n    name: 'age',\n    displayName: 'Age',\n    description: null,\n    fieldType: 'NUMBER',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: null,\n    relation: null,\n  }, {\n    name: 'fieldArray',\n    displayName: 'FieldArray',\n    description: null,\n    fieldType: 'TEXT',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: true,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: null,\n    relation: null,\n  }],\n};\n\nrender(\n  <Form type=\"CREATE\" onSubmit={onSubmit}>\n    {\n      ({ handleSubmit }) => (\n        <form onSubmit={ handleSubmit }>\n          <Field name=\"firstName\" component=\"input\" />\n          <Field name=\"lastName\" component=\"input\" />\n          <Field name=\"age\" component=\"input\" />\n          <FieldArray name=\"fieldArray\">\n            {\n              React.Children.toArray(({ fields }) => (\n                <React.Fragment>\n                  {\n                    fields.map((name, index) => (\n                      <React.Fragment>\n                        <Field key={ name } name={ name } component=\"input\" />\n                        <button onClick={ () => fields.remove(index) }>Remove</button>\n                      </React.Fragment>\n                    ))\n                  }\n                  <button onClick={ () => fields.push('New Field Array Item') }>Add</button>\n                </React.Fragment>\n              ))\n            }\n          </FieldArray>\n          <button type=\"submit\">Create Client</button>\n        </form>\n      )\n    }\n  </Form>\n, document.getElementById('root'));\n```\n\n### Multiple Forms with TableSchemaProvider\n\n```jsx\nimport React from 'react';\nimport { render } from 'react-dom';\nimport { Form, Field } from '@8base/forms';\nimport { TableSchemaProvider } from '@8base/table-schema-provider';\n\nconst SCHEMA = [{\n  name: 'client',\n  displayName: 'Client',\n  isSystem: false,\n  fields: [{\n    name: 'firstName',\n    displayName: 'First Name',\n    description: null,\n    fieldType: 'TEXT',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: 'Vladimir',\n    relation: null,\n  }, {\n    name: 'lastName',\n    displayName: 'Last Name',\n    description: null,\n    fieldType: 'TEXT',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: 'Putin',\n    relation: null,\n  }, {\n    name: 'age',\n    displayName: 'Age',\n    description: null,\n    fieldType: 'NUMBER',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: null,\n    relation: null,\n  }],\n}, {\n  name: 'order',\n  displayName: 'Order',\n  isSystem: false,\n  fields: [{\n    name: 'name',\n    displayName: 'name',\n    description: null,\n    fieldType: 'TEXT',\n    fieldTypeAttributes: {\n      format: 'UNFORMATTED',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: null,\n    relation: null,\n  }, {\n    name: 'deliveryDate',\n    displayName: 'Delivery Date',\n    description: null,\n    fieldType: 'DATE',\n    fieldTypeAttributes: {\n      format: 'DATE',\n      fieldSize: 100,\n    },\n    isList: false,\n    isRequired: true,\n    isUnique: false,\n    defaultValue: null,\n    relation: null,\n  }],\n}];\n\nrender(\n  <TableSchemaProvider schema={SCHEMA}>\n    <Form type=\"CREATE\" tableSchemaName=\"client\" onSubmit={ onSubmitClient }>\n      {\n        ({ handleSubmit }) => (\n          <form onSubmit={ handleSubmit }>\n            <Field name=\"firstName\" component=\"input\" />\n            <Field name=\"lastName\" component=\"input\" />\n            <Field name=\"age\" component=\"input\" />\n            <button type=\"submit\">Create Client</button>\n          </form>\n        )\n      }\n    </Form>\n    <Form type=\"CREATE\" tableSchemaName=\"order\" onSubmit={onSubmitOrder}>\n      {\n        ({ handleSubmit }) => (\n          <form onSubmit={ handleSubmit }>\n            <Field name=\"name\" component=\"input\" />\n            <Field name=\"deliveryDate\" component=\"input\" />\n            <button type=\"submit\">Create Order</button>\n          </form>\n        )\n      }\n    </Form>\n  </TableSchemaProvider>\n, document.getElementById('root'));\n```\n\n### Complex form\n\n```jsx\nimport React from 'react';\nimport { render } from 'react-dom';\nimport { Form, Field } from '@8base/forms';\nimport { TableSchemaProvider } from '@8base/table-schema-provider';\n\nconst SCHEMA = [{\n  id: 'TABLE_SCHEMA_ID',\n  name: 'tableSchema',\n  displayName: 'Table Schema',\n  isSystem: false,\n  fields: [\n    {\n      name: 'scalar',\n      displayName: 'Scalar',\n      description: null,\n      fieldType: 'TEXT',\n      fieldTypeAttributes: {\n        format: 'UNFORMATTED',\n        fieldSize: 100,\n      },\n      isList: false,\n      isRequired: false,\n      isUnique: false,\n      defaultValue: 'Scalar Default Value',\n      relation: null,\n    },\n    {\n      name: 'scalarList',\n      displayName: 'Scalar List',\n      description: null,\n      fieldType: 'TEXT',\n      fieldTypeAttributes: {\n        format: 'UNFORMATTED',\n        fieldSize: 100,\n      },\n      isList: true,\n      isRequired: false,\n      isUnique: false,\n      defaultValue: 'Scalar List Default Value 1',\n      relation: null,\n    },\n    {\n      name: 'relation',\n      displayName: 'Relation',\n      description: null,\n      fieldType: 'RELATION',\n      fieldTypeAttributes: null,\n      isList: false,\n      isRequired: false,\n      isUnique: null,\n      defaultValue: null,\n      relation: {\n        id: 'RELATION_FIELD_ID_1',\n        relationTableName: 'RELATION_TABLE_NAME_1',\n        relationFieldName: 'aid',\n        refTable: {\n          id: 'RELATION_TABLE_SCHEMA_ID',\n        },\n        refFieldIsList: false,\n        refFieldIsRequired: true,\n      },\n    },\n    {\n      name: 'relationList',\n      displayName: 'RelationList',\n      description: null,\n      fieldType: 'RELATION',\n      fieldTypeAttributes: null,\n      isList: true,\n      isRequired: false,\n      isUnique: null,\n      defaultValue: null,\n      relation: {\n        id: 'RELATION_FIELD_ID_2',\n        relationTableName: 'RELATION_TABLE_NAME_2',\n        relationFieldName: 'aid',\n        refTable: {\n          id: 'RELATION_TABLE_SCHEMA_ID',\n        },\n        refFieldIsList: false,\n        refFieldIsRequired: true,\n      },\n    },\n  ],\n}, {\n  id: 'RELATION_TABLE_SCHEMA_ID',\n  name: 'relationTableSchema',\n  displayName: 'Relation Table Schema',\n  isSystem: false,\n  fields: [\n    {\n      name: 'scalar',\n      displayName: 'Scalar',\n      description: null,\n      fieldType: 'TEXT',\n      fieldTypeAttributes: {\n        format: 'UNFORMATTED',\n        fieldSize: 100,\n      },\n      isList: false,\n      isRequired: false,\n      isUnique: false,\n      defaultValue: 'Scalar Default Value',\n      relation: null,\n    },\n    {\n      name: 'scalarList',\n      displayName: 'Scalar List',\n      description: null,\n      fieldType: 'TEXT',\n      fieldTypeAttributes: {\n        format: 'UNFORMATTED',\n        fieldSize: 100,\n      },\n      isList: true,\n      isRequired: false,\n      isUnique: false,\n      defaultValue: 'Scalar List Default Value 1',\n      relation: null,\n    },\n    {\n      name: 'relation',\n      displayName: 'Relation',\n      description: null,\n      fieldType: 'RELATION',\n      fieldTypeAttributes: null,\n      isList: false,\n      isRequired: false,\n      isUnique: null,\n      defaultValue: null,\n      relation: {\n        id: 'RELATION_FIELD_ID_3',\n        relationTableName: 'RELATION_TABLE_NAME_1',\n        relationFieldName: 'aid',\n        refTable: {\n          id: 'TABLE_SCHEMA_ID',\n        },\n        refFieldIsList: false,\n        refFieldIsRequired: true,\n      },\n    },\n    {\n      name: 'relationList',\n      displayName: 'RelationList',\n      description: null,\n      fieldType: 'RELATION',\n      fieldTypeAttributes: null,\n      isList: true,\n      isRequired: false,\n      isUnique: null,\n      defaultValue: null,\n      relation: {\n        id: 'RELATION_FIELD_ID_4',\n        relationTableName: 'RELATION_TABLE_NAME_2',\n        relationFieldName: 'aid',\n        refTable: {\n          id: 'TABLE_SCHEMA_ID',\n        },\n        refFieldIsList: false,\n        refFieldIsRequired: true,\n      },\n    },\n  ],\n}];\n\nconst INITIAL_VALUES = {\n  scalar: 'Scalar Value',\n  scalarList: [\n    'Scalar List Value',\n  ],\n  relation: {\n    scalar: 'Relation Scalar Value',\n  },\n  relationList: [{\n    scalar: 'Relation List Scalar Value',\n  }],\n};\n\nrender(\n  <TableSchemaProvider value={ SCHEMA }>\n    <Form type=\"CREATE\" tableSchemaName=\"tableSchema\" initialValues={ INITIAL_VALUES } onSubmit={ onSubmitForm }>\n      {\n        ({ handleSubmit }) => (\n          <form onSubmit={ handleSubmit }>\n            <Field name=\"scalar\" component=\"input\" />\n            <FieldArray name=\"scalarList\">\n              {\n                ({ fields }) => (\n                  fields.map((name) => (\n                    <Field key={ name } name={ name } component=\"input\" />\n                  ))\n                )\n              }\n            </FieldArray>\n            <Fieldset tableSchemaName=\"relationTableSchema\">\n              <Field name=\"relation.scalar\" component=\"input\" />\n            </Fieldset>\n            <FieldArray name=\"relationList\">\n              {\n                ({ fields }) => (\n                  fields.map((name) => (\n                    <Fieldset key={ name } tableSchemaName=\"relationTableSchema\">\n                      <Field name={ `${name}.scalar` } component=\"input\" />\n                    </Fieldset>\n                  ))\n                )\n              }\n            </FieldArray>\n          </form>\n        )\n      }\n    </Form>\n  </TableSchemaProvider>\n, document.getElementById('root'));\n```\n","readmeFilename":"README.md","description":"8base Forms is a thin React wrapper for React Final Forms to easy implement forms for 8base API entities.","bugs":{"url":"https://github.com/8base/sdk/issues"},"_id":"@8base/react-forms@3.1.0-beta.0","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-iT5UGqmbW7ZEROvNTRFQ7wRtHbihnHWEaWZhFUiNBwBFavV45ZwtcQoe1kcMlZQnjWP9PKQyfO/Cr6eQMBMm/w==","shasum":"ef4452d0e0269a49feb6ac79d050f37c88c0ceff","tarball":"https://registry.npmjs.org/@8base/react-forms/-/react-forms-3.1.0-beta.0.tgz","fileCount":92,"unpackedSize":95615,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFat+CctlC7EjB4x5xaTVRNx5WnUy+C/ST1fzl62N5E2AiBQsPEgB4bolK259SZzcn/x6vyVWEq4An3Tx4rpmF4IKQ=="}]},"_npmUser":{"name":"8base-bot","email":"npmpublisher@8base.com"},"directories":{},"maintainers":[{"name":"dav1nx1","email":"oscar.corcho@8base.com"},{"name":"jorge.osorio","email":"jorge.osorio@8base.com"},{"name":"8base-bot","email":"npmpublisher@8base.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-forms_3.1.0-beta.0_1700841711300_0.7266123875465553"},"_hasShrinkwrap":false}},"time":{"created":"2022-06-22T15:22:30.867Z","3.0.0-beta.0":"2022-06-22T15:22:31.074Z","modified":"2023-11-24T16:01:51.712Z","3.0.0-beta.1":"2023-04-12T17:23:22.689Z","3.0.0-beta.3":"2023-04-12T18:00:50.681Z","3.1.0-beta.0":"2023-11-24T16:01:51.492Z"},"maintainers":[{"name":"dav1nx1","email":"oscar.corcho@8base.com"},{"name":"jorge.osorio","email":"jorge.osorio@8base.com"},{"name":"8base-bot","email":"npmpublisher@8base.com"}],"description":"8base Forms is a thin React wrapper for React Final Forms to easy implement forms for 8base API entities.","homepage":"https://github.com/8base/sdk/tree/master/packages/react/forms","repository":{"type":"git","url":"git+https://github.com/8base/sdk.git"},"bugs":{"url":"https://github.com/8base/sdk/issues"},"license":"MIT","readme":"","readmeFilename":""}