{"id":20038494,"url":"https://github.com/yahoo/jafar","last_synced_at":"2025-08-19T07:31:25.601Z","repository":{"id":39266412,"uuid":"231425652","full_name":"yahoo/jafar","owner":"yahoo","description":"🌟!(Just another form application renderer)","archived":false,"fork":false,"pushed_at":"2023-05-03T06:43:28.000Z","size":40268,"stargazers_count":110,"open_issues_count":45,"forks_count":9,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-08-08T18:13:44.552Z","etag":null,"topics":["dev","development","form","form-validation","forms","jafar","javascript","json","json-editing","json-editor","layout","persistence","react","react-components","react-form","react-forms","reactjs","ui","ui-components","web"],"latest_commit_sha":null,"homepage":"https://yahoo.github.io/jafar","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yahoo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE-OF-CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2020-01-02T17:09:18.000Z","updated_at":"2024-12-06T16:12:21.000Z","dependencies_parsed_at":"2023-02-03T12:15:55.385Z","dependency_job_id":"bc5738a0-0157-472d-8a24-3a85ec802451","html_url":"https://github.com/yahoo/jafar","commit_stats":{"total_commits":93,"total_committers":4,"mean_commits":23.25,"dds":0.5053763440860215,"last_synced_commit":"67c01b28b92e1d9f08891629b8a52aced34c1db8"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/yahoo/jafar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yahoo%2Fjafar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yahoo%2Fjafar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yahoo%2Fjafar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yahoo%2Fjafar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yahoo","download_url":"https://codeload.github.com/yahoo/jafar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yahoo%2Fjafar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271119815,"owners_count":24702688,"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-19T02:00:09.176Z","response_time":63,"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":["dev","development","form","form-validation","forms","jafar","javascript","json","json-editing","json-editor","layout","persistence","react","react-components","react-form","react-forms","reactjs","ui","ui-components","web"],"created_at":"2024-11-13T10:29:32.084Z","updated_at":"2025-08-19T07:31:24.938Z","avatar_url":"https://github.com/yahoo.png","language":"JavaScript","readme":"# JAFAR\n\nJafar - not `Just another form application renderer`, a set of tools which implement form capabilities using a simple JSON form object, containing fields and plenty of advanced features.\n\n## Table Of Content\n\n* [Background \u0026 Usage](#background-\u0026-usage)\n* [Install](#install)\n* [Examples](#examples)\n* [Docs \u0026 Demos](#docs-\u0026-demos)\n* [Run Demos Locally](#run-docs-\u0026-demos-locally)\n* [Contribute](#contribute)\n* [Licence](#licence)\n\n\u003cp align=\"left\"\u003e\u003cimg width=\"40%\" src=\"https://repository-images.githubusercontent.com/231425652/fb7b0480-3141-11ea-8092-c7a5b668f2fc\"/\u003e\u003c/p\u003e\n\n## Background \u0026 Usage\n\nManaging complicated forms is a hard task for developers. Dealing with field validations, dependencies, disable or exclude fields in some conditions and more can\nmake the code complicated, hard to maintain and hard to write to begin with.\n\nJafar let developers build forms easily by defining a readable and intuitive form definition (model json \u0026 resources json) that represent the entire form lifescycle - such as fields and their corresponding data path, initial data, validators, dto conversions and more. It's based on a pure javascript, ui free form class which handles the form's definition, lifecycle and data manipulations. With the basic form class, any ui library (such as react, angular and vue) can easily use it to expose Form and Field components.\n\n\u003cp align=\"center\"\u003e\u003cimg width=\"50%\" src=\"https://yahoo.github.io/jafar/docs/assets/class-inheritance-v1.0.0.png\"/\u003e\u003c/p\u003e\n\n### Supported Form Products\n\n#### Javascript Form Class\n\nJavascript Form class which manage fields and data manipulations. [More info](form-overview.html)\n\n#### React\n\nSupplies 3 products to manage forms in [react](https://reactjs.org) applications. [More info](react-overview.html)\n- React Form \u0026 Field components based on Form class. \n- Common components for usage such as Text, Number, Select and more, based on [Material UI](https://material-ui.com/)\n- Layout components to build form pages / peaces with the same UI / UX experience such as Item component which contain header, sections,\nfooter actions and menu actions.\n\nPotentially a single page (edit / create / details / list) can be implemented using these 3 packages\n\n\u003cp align=\"center\"\u003e\u003cimg width=\"60%\" src=\"https://yahoo.github.io/jafar/docs/assets/manage-page-v1.0.0.png\"/\u003e\u003c/p\u003e\n\n### Highlights\n\n* Manage Complicated Forms\n* Framework Agnostic\n* High Performance\n* Form Persistency\n* Full Lifecycle Log\n* Replay Client Actions For Debug\n* Form Snapshots and Undo Operations\n* Server Side Validation\n* Grid Usage\n* UI Components And Layout Supply\n* Vast Documentation And Demos\n* Low Dependencies Number\n* Small Package Size\n* High Test Coverage\n\n\n## Install\n\nTo install one of our consumable packages:\n- `form` - Javascript Form class\n- `react-form` - Form \u0026 Field components\n- `react-components` - Text, Number, Checkbox and more\n- `react-layout` - Item, Sections and more layout components\n\nRun:\n\nusing npm - `npm install --save @jafar/{package-name-here}`\n\nusing yarn - `yarn add @jafar/{package-name-here}`\n\n## Examples\n\nThe following is a simple javascript `Form class` test example:\n\n### Javascript Form Class\n\n```javascript\nimport Form from '@jafar/form';\nimport UserService from './UserService';\n\n// define form model object that will be the initial state of the form\nconst model = {\n  id: 'user-form',\n  fields: {\n    firstName: {\n      label: 'First Name',\n      path: 'firstName',\n      required: true,\n      validators: [{\n        name: 'minLength'\n        args: {\n          value: 2\n        }\n      },\n    },\n    lastName: {\n      label: 'Last Name',\n      path: 'lastName',\n    },\n    email: {\n      label: 'Email',\n      path: 'email',\n      validators: [{\n        name: 'email',\n      }, {\n        name: 'uniqueField',\n        args: { serverField: 'email' }\n      }],\n    },\n  },\n  data: {\n    firstName: 'Ross',\n    lastName: 'Geller',\n    email: 'unagi@salmonskinroll.com',\n  },\n};\n\n// define form resources object that contains all the handlers that the model needs\nconst resources = {\n  validators: {\n    uniqueField: {\n      func: async ({ value, args }) =\u003e {\n        return await UserService.isFieldUnique(args.serverField, value);\n      },\n      message: ({ value }) =\u003e `${ value } is already taken`,\n    }\n  },\n  hooks: {\n    submit: async ({ data }) =\u003e {\n      return await UserService.save(data);\n    }\n  }\n};\n\n// create user form instance\nconst form = new Form();\nawait form.init(model, resources);\n\n// verify form is valid\nexpect(form.invalid).toBeFalsy();\n\n// change field firstName\nawait form.changeValue('firstName', 'Monica');\n\n// verify form is valid\nexpect(form.invalid).toBeFalsy();\n\n// change field firstName to undefined\nawait form.changeValue('firstName', '');\n\n// verify form is invalid (since field 'firstName' is required and has minimum length)\nexpect(form.invalid).toBeTruthy();\n\n// verify errors\nexpect(form.fields.firstName.errors).toEqual([\n  { name: 'required', message: 'Field required' }, \n  { name: 'minLength', message: 'Minimum length is 2' }\n]);\n\n// make form valid again\nawait form.changeValue('firstName', 'Monica');\n\n// submit the form\nconst success = await form.submit();\n\n// verify submit success\nexpect(success).toEqual(true);\n```\n\n### React Form Component\n\nThe following is a simple react `Form` \u0026 `Field` components (based on `Form class`) example:\n\n```jsx\nimport { Form, Field } from '@jafar/react-form';\n\nconst model = { /*...*/ };\nconst resources = { /*...*/ };\n\n\u003cForm model={model} resources={resources}\u003e\n  \u003ch2\u003eBasic Info\u003c/h2\u003e\n  \u003cField id=\"firstName\" /\u003e\n  \u003cField id=\"lastName\" /\u003e\n  \u003ch2\u003eContact Info\u003c/h2\u003e\n  \u003cField id=\"email\" /\u003e\n\u003c/Form\u003e\n```\n\n## Docs \u0026 Demos\n\nJafar's full docs and demos are [available here](https://yahoo.github.io/jafar).\n\n## Run Docs \u0026 Demos Locally\n\n### Clone repository\n\n```\ngit clone https://github.com/yahoo/jafar.git\n```\n\n### Install packages and link them\n\nusing npm - `cd /jafar \u0026\u0026 npm run bootstrap`\n\nusing yarn - `cd /jafar \u0026\u0026 yarn run bootstrap`\n\n* Alternatively, run `npm install` (or `yarn install`) in the desired sub-package (under `jafar/packages` folder) to install it without links.\n\n### Run website locally\n\nTo run demos and docs locally for one of `react-form`, `react-components`, `react-layout`, `react-editor` and `documentation` packages:\n\nusing npm - `cd /jafar/packages/{package-name-here} \u0026\u0026 npm start`\n\nusing yarn - `cd /jafar/packages/{package-name-here} \u0026\u0026 yarn start`\n\n## Contribute \n\nPlease refer to the [CONTRIBUTING.md](https://github.com/yahoo/jafar/blob/master/CONTRIBUTING.md) file for information about how to get involved. We welcome issues, questions, and pull requests. Pull Requests are welcome.\n\n## Licence \n\nJafar is [MIT licensed](https://github.com/yahoo/jafar/blob/master/LICENSE).\n\n\u003cp align=\"center\"\u003e\u003cimg width=\"100px\" src=\"packages/documentation/website/static/img/jafar-standing.svg\"/\u003e\u003c/p\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyahoo%2Fjafar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyahoo%2Fjafar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyahoo%2Fjafar/lists"}