{"id":23033941,"url":"https://github.com/freenowtech/uniform","last_synced_at":"2025-08-01T08:33:48.646Z","repository":{"id":34978740,"uuid":"189205128","full_name":"freenowtech/uniform","owner":"freenowtech","description":"Component for creating dynamic forms","archived":false,"fork":false,"pushed_at":"2022-12-09T04:22:23.000Z","size":1221,"stargazers_count":9,"open_issues_count":11,"forks_count":0,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-07-19T18:53:52.625Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/freenowtech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":"SECURITY.md","support":null}},"created_at":"2019-05-29T10:37:46.000Z","updated_at":"2023-09-01T10:20:36.000Z","dependencies_parsed_at":"2023-01-15T11:22:12.219Z","dependency_job_id":null,"html_url":"https://github.com/freenowtech/uniform","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/freenowtech/uniform","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freenowtech%2Funiform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freenowtech%2Funiform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freenowtech%2Funiform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freenowtech%2Funiform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/freenowtech","download_url":"https://codeload.github.com/freenowtech/uniform/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freenowtech%2Funiform/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268192551,"owners_count":24210541,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-01T02:00:08.611Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-15T16:28:08.822Z","updated_at":"2025-08-01T08:33:48.619Z","avatar_url":"https://github.com/freenowtech.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Uniform](assets/logo.png)\n[![Build Status](https://travis-ci.com/freenowtech/uniform.svg?branch=master)](https://travis-ci.com/freenowtech/uniform)\n[![codecov](https://codecov.io/gh/freenowtech/uniform/branch/master/graph/badge.svg)](https://codecov.io/gh/freenowtech/uniform)\n\n## Description\n\nThis library allows you to generate forms based on provided JSON configuration.\n\n## Features\n\n* Use your own components on the Field level (https://jaredpalmer.com/formik/docs/api/field#component).\n* Flexible validation in config (using [Yup](https://github.com/jquense/yup)).\n* Conditional display logic.\n* Custom options in Form level.\n\n## Tutorial\n\n#### Installation\n\n1. Install library.\n2. Import package `import formGenerator from '@freenow/uniform';`.\n3. Generate form and include in your component: \n    ```\n    const Form = formGenerator(formConfig, components);\n\n    ...\n\n    \u003cForm\n        onSubmit={/*your submit function*/}\n    /\u003e\n    ```\n\n#### Form configuration\n\nThe `formConfig` is an object that contains all field definitions. Let's look at simple example:\n```\nconst formConfig = {\n    fields: [\n        {\n            component: 'TextInput',\n            defaultValue: 'default',\n            label: 'Text input with default value',\n            name: 'default',\n        },\n    ],\n    name: 'test',\n};\n```\nSo the config consist of `fields` array and `name` (Unique form name). Each `field` element can have following properties: `component`, `defaultValue`, `label`, `name`, `displayConfigs`, `validationConfig`.\n\n#### Validations\n\nThe `validationConfig` is implemented using [Yup](https://github.com/jquense/yup) library. In our case validation checks that the field is string and required. You can chain validation by adding elements in `methods` array.\n```\nconst formConfig = {\n    fields: [\n        {\n            component: 'TextInput',\n            label: 'Text input with validation logic',\n            name: 'validation',\n            validationConfig: {\n                methods: [\n                    {\n                        message: 'Required',\n                        type: 'required',\n                    },\n                ],\n                type: 'string',\n            },\n        },\n    ],\n    name: 'test',\n};\n```\n\n#### Display logic\n\nThe `displayConfigs` is implemented using [Yup](https://github.com/jquense/yup) library. In the example below we only show the \"display\" field when field with the name \"default\" has value \"show\". Feel free to depend on multiple fields values by adding additional element to `displayConfig`.\n```\nconst formConfig = {\n    fields: [\n        {\n            component: 'TextInput',\n            defaultValue: 'default',\n            label: 'Text input with default value',\n            name: 'default',\n        },\n        {\n            component: 'TextInput',\n            displayConfigs: [\n                {\n                    methods: [\n                        {\n                            compareValue: ['show'],\n                            type: 'oneOf',\n                        },\n                    ],\n                    type: 'string',\n                    valueKey: 'default',\n                },\n            ],\n            label: 'Text input with display logic',\n            name: 'display',\n        },\n    ],\n    name: 'test',\n};\n```\n\n#### Component mapping\n\nThe `component` property refers to render function of each field and specified in the second paramer in generator. Let's have a look at this:\n```\nconst FormContainer = ({ children, ...rest }) =\u003e (\n    \u003cform {...rest}\u003e{children}\u003c/form\u003e\n);\nFormContainer.propTypes = {\n    children: PropTypes.node.isRequired,\n};\n\nconst TextInput = ({ field, setFieldValue }) =\u003e (\n    \u003cinput\n        {...field}\n        onChange={e =\u003e setFieldValue(field.name, e.target.value)}\n        id={field \u0026\u0026 field.name}\n    /\u003e\n);\nTextInput.propTypes = {\n    field: PropTypes.object.isRequired,\n    setFieldValue: PropTypes.func.isRequired,\n};\n\nconst SubmitButton = props =\u003e \u003cbutton {...props} type='submit' /\u003e;\n\nconst components = {\n    FormContainer,\n    SubmitButton,\n    TextInput,\n};\n```\n\nThe `components` object is a mapping between names and the actual components.  `SubmitButton` and `FormContainer` are required to create. And `TextInput` will be linked to `component: 'TextInput'` in the form config. To create custom components for your field please follow [Formik docs on the Field element](https://jaredpalmer.com/formik/docs/api/field#component).\n\n## Tests\nBy default, mandatory minimum test coverage of the library is set to 80%.\n\n## [Contributing](./CONTRIBUTING.md)\n\n## Authors and acknowledgment\n\n### Authors\n\n* [Ilya Lyamkin](https://github.com/ilyamkin)\n* [Yasin Can Akmehmet](https://github.com/yasincanakmehmet)\n* [Nikolai Lopin](https://github.com/nlopin)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffreenowtech%2Funiform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffreenowtech%2Funiform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffreenowtech%2Funiform/lists"}