All Projects → yahoo → Jafar

yahoo / Jafar

Licence: mit
🌟!(Just another form application renderer)

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Jafar

Final Form
🏁 Framework agnostic, high performance, subscription-based form state management
Stars: ✭ 2,787 (+2504.67%)
Mutual labels:  form-validation, form, forms
Rsformview
A Cocoapods library designed to easily create forms with multiple data entry fields
Stars: ✭ 84 (-21.5%)
Mutual labels:  form-validation, ui-components, forms
Vue Form Json Schema
Create forms using JSON schema. Bring your components!
Stars: ✭ 253 (+136.45%)
Mutual labels:  json, form, forms
Composable Form
Build type-safe composable forms in Elm
Stars: ✭ 179 (+67.29%)
Mutual labels:  form-validation, form, forms
grav-plugin-form
Grav Form Plugin
Stars: ✭ 48 (-55.14%)
Mutual labels:  forms, form, form-validation
Redux Form
A Higher Order Component using react-redux to keep form state in a Redux store
Stars: ✭ 12,597 (+11672.9%)
Mutual labels:  form-validation, form, forms
ember-validity-modifier
Ember Octane addon to add custom validity (form validation) to form fields
Stars: ✭ 28 (-73.83%)
Mutual labels:  forms, form, form-validation
FrontendForms
A module for ProcessWire CMS to create and validate forms on the frontend easily using the Valitron library.
Stars: ✭ 0 (-100%)
Mutual labels:  forms, form, form-validation
vue-use-form
✅ A Vue.js composition API function to validate forms
Stars: ✭ 97 (-9.35%)
Mutual labels:  forms, form, form-validation
react-cool-form
😎 📋 React hooks for forms state and validation, less code more performant.
Stars: ✭ 246 (+129.91%)
Mutual labels:  forms, form, form-validation
React Controlled Form
Flexible, Modular & Controlled Forms for React and Redux
Stars: ✭ 121 (+13.08%)
Mutual labels:  form-validation, form, forms
React Final Form
🏁 High performance subscription-based form state management for React
Stars: ✭ 6,781 (+6237.38%)
Mutual labels:  form-validation, form, forms
Form For
ReactJS forms made easy
Stars: ✭ 118 (+10.28%)
Mutual labels:  form-validation, form, forms
Form bloc
🔥 Dart and Flutter Package 🔥 Easy Form State Management using BLoC pattern 🔥 Wizard/stepper forms, asynchronous validation, dynamic and conditional fields, submission progress, serialization and more! 🔥
Stars: ✭ 239 (+123.36%)
Mutual labels:  form-validation, form, forms
form-data-json
A zero dependency, cross browser library to easily get or set/manipulate form input values as/from a json object.
Stars: ✭ 37 (-65.42%)
Mutual labels:  forms, form, form-validation
React Hook Form
📋 React Hooks for form state management and validation (Web + React Native)
Stars: ✭ 24,831 (+23106.54%)
Mutual labels:  form-validation, form, forms
Usetheform
React library for composing declarative forms, manage their state, handling their validation and much more.
Stars: ✭ 40 (-62.62%)
Mutual labels:  form-validation, form, forms
Customui
Library to create custom UI's in MCPE 1.2+
Stars: ✭ 60 (-43.93%)
Mutual labels:  form, forms
Http Prompt
An interactive command-line HTTP and API testing client built on top of HTTPie featuring autocomplete, syntax highlighting, and more. https://twitter.com/httpie
Stars: ✭ 8,329 (+7684.11%)
Mutual labels:  json, development
React Xmasonry
Simple, minimalistic and featured native masonry layout for React JS.
Stars: ✭ 62 (-42.06%)
Mutual labels:  layout, react-components

JAFAR

Jafar - 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.

Table Of Content

Background & Usage

Managing complicated forms is a hard task for developers. Dealing with field validations, dependencies, disable or exclude fields in some conditions and more can make the code complicated, hard to maintain and hard to write to begin with.

Jafar let developers build forms easily by defining a readable and intuitive form definition (model json & 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.

Supported Form Products

Javascript Form Class

Javascript Form class which manage fields and data manipulations. More info

React

Supplies 3 products to manage forms in react applications. More info

  • React Form & Field components based on Form class.
  • Common components for usage such as Text, Number, Select and more, based on Material UI
  • Layout components to build form pages / peaces with the same UI / UX experience such as Item component which contain header, sections, footer actions and menu actions.

Potentially a single page (edit / create / details / list) can be implemented using these 3 packages

Highlights

  • Manage Complicated Forms
  • Framework Agnostic
  • High Performance
  • Form Persistency
  • Full Lifecycle Log
  • Replay Client Actions For Debug
  • Form Snapshots and Undo Operations
  • Server Side Validation
  • Grid Usage
  • UI Components And Layout Supply
  • Vast Documentation And Demos
  • Low Dependencies Number
  • Small Package Size
  • High Test Coverage

Install

To install one of our consumable packages:

  • form - Javascript Form class
  • react-form - Form & Field components
  • react-components - Text, Number, Checkbox and more
  • react-layout - Item, Sections and more layout components

Run:

using npm - npm install --save @jafar/{package-name-here}

using yarn - yarn add @jafar/{package-name-here}

Examples

The following is a simple javascript Form class test example:

Javascript Form Class

import Form from '@jafar/form';
import UserService from './UserService';

// define form model object that will be the initial state of the form
const model = {
  id: 'user-form',
  fields: {
    firstName: {
      label: 'First Name',
      path: 'firstName',
      required: true,
      validators: [{
        name: 'minLength'
        args: {
          value: 2
        }
      },
    },
    lastName: {
      label: 'Last Name',
      path: 'lastName',
    },
    email: {
      label: 'Email',
      path: 'email',
      validators: [{
        name: 'email',
      }, {
        name: 'uniqueField',
        args: { serverField: 'email' }
      }],
    },
  },
  data: {
    firstName: 'Ross',
    lastName: 'Geller',
    email: '[email protected]',
  },
};

// define form resources object that contains all the handlers that the model needs
const resources = {
  validators: {
    uniqueField: {
      func: async ({ value, args }) => {
        return await UserService.isFieldUnique(args.serverField, value);
      },
      message: ({ value }) => `${ value } is already taken`,
    }
  },
  hooks: {
    submit: async ({ data }) => {
      return await UserService.save(data);
    }
  }
};

// create user form instance
const form = new Form();
await form.init(model, resources);

// verify form is valid
expect(form.invalid).toBeFalsy();

// change field firstName
await form.changeValue('firstName', 'Monica');

// verify form is valid
expect(form.invalid).toBeFalsy();

// change field firstName to undefined
await form.changeValue('firstName', '');

// verify form is invalid (since field 'firstName' is required and has minimum length)
expect(form.invalid).toBeTruthy();

// verify errors
expect(form.fields.firstName.errors).toEqual([
  { name: 'required', message: 'Field required' }, 
  { name: 'minLength', message: 'Minimum length is 2' }
]);

// make form valid again
await form.changeValue('firstName', 'Monica');

// submit the form
const success = await form.submit();

// verify submit success
expect(success).toEqual(true);

React Form Component

The following is a simple react Form & Field components (based on Form class) example:

import { Form, Field } from '@jafar/react-form';

const model = { /*...*/ };
const resources = { /*...*/ };

<Form model={model} resources={resources}>
  <h2>Basic Info</h2>
  <Field id="firstName" />
  <Field id="lastName" />
  <h2>Contact Info</h2>
  <Field id="email" />
</Form>

Docs & Demos

Jafar's full docs and demos are available here.

Run Docs & Demos Locally

Clone repository

git clone https://github.com/yahoo/jafar.git

Install packages and link them

using npm - cd /jafar && npm run bootstrap

using yarn - cd /jafar && yarn run bootstrap

  • Alternatively, run npm install (or yarn install) in the desired sub-package (under jafar/packages folder) to install it without links.

Run website locally

To run demos and docs locally for one of react-form, react-components, react-layout, react-editor and documentation packages:

using npm - cd /jafar/packages/{package-name-here} && npm start

using yarn - cd /jafar/packages/{package-name-here} && yarn start

Contribute

Please refer to the CONTRIBUTING.md file for information about how to get involved. We welcome issues, questions, and pull requests. Pull Requests are welcome.

Licence

Jafar is MIT licensed.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].