3.0.0-alpha.12 - Error Messages for XHR Schema

3.0.0-alpha.12

npm install --save react-jsonschema-form-material-ui@3.0.0-alpha.12

Features:

• This release has a big refactor to modularise most of logic used in react-jsonschema using xstate.
• This release also introduces a new feature to provide error messages in xhrSchema based on status codes inside ui:errors
  Example:

"ui:errors": {
    "offline": {
       "title": "You are Offline !",
       "message": "Please try again once you are online."
    },
   "500": {
       "title": "Internal Server Error",
       "message": "My error description"
   }
}

Previously

3.0.0-alpha.9

This Minor release does not have any features but 2 small package updates

• Update on Material pickers with support for react 17.
• Update on React-slate resolves pending vulnerabilities by replacing emotion with styled components.

Now source code is slowly migrating towards typescript with support of jest for running unit tests.

3.0.0-alpha.6

• Demo updated with vscode editor and live validation changes
• New interceptors to transform form and uiData using uiSchema - ui:interceptor
• New xhrSchema feature enabled to make xhr calls onload, onsubmit and onclick to consume or post data
• type: null support included for custom div support
• New Tabs and Stepper UI using ui:page -> "ui:layout": "tabs"
• Integration tests enabled with browserstack
• Support for latest version of Material UI 4
• Support for latest version of Nextjs 10 and react 17

Demo URL: https://react-jsonschema-form-material-ui-github56.vercel.app

Bundler changed to Rollup and CRA Support

3.0.0-alpha.11

This release makes a change in choosing rollup as default bundler for production builds.
It resolves a notable issue with CRA - Now 3.0.0-alpha.11 is compatible with CRA.

npm install --save react-jsonschema-form-material-ui@3.0.0-alpha.11

Previously

3.0.0-alpha.9

This Minor release does not have any features but 2 small package updates

• Update on Material pickers with support for react 17.
• Update on React-slate resolves pending vulnerabilities by replacing emotion with styled components.

Now source code is slowly migrating towards typescript with support of jest for running unit tests.

3.0.0-alpha.6

• Demo updated with vscode editor and live validation changes
• New interceptors to transform form and uiData using uiSchema - ui:interceptor
• New xhrSchema feature enabled to make xhr calls onload, onsubmit and onclick to consume or post data
• type: null support included for custom div support
• New Tabs and Stepper UI using ui:page -> "ui:layout": "tabs"
• Integration tests enabled with browserstack
• Support for latest version of Material UI 4
• Support for latest version of Nextjs 10 and react 17

Demo URL: https://react-jsonschema-form-material-ui-github56.vercel.app
Integration test run sample: https://automate.browserstack.com/dashboard/v2/builds/3fd8a04b06f0e5e2a8352cba4ab1226a63cc7fde

3.0.0-alpha.9 - Jest and Typescript Integration

3.0.0-alpha.9

This Minor release does not have any features but 2 small package updates

• Update on Material pickers with support for react 17.
• Update on React-slate resolves pending vulnerabilities by replacing emotion with styled components.

Now source code is slowly migrating towards typescript with support of jest for running unit tests.

npm install --save react-jsonschema-form-material-ui@3.0.0-alpha.9

Previously

3.0.0-alpha.6

• Demo updated with vscode editor and live validation changes
• New interceptors to transform form and uiData using uiSchema - ui:interceptor
• New xhrSchema feature enabled to make xhr calls onload, onsubmit and onclick to consume or post data
• type: null support included for custom div support
• New Tabs and Stepper UI using ui:page -> "ui:layout": "tabs"
• Integration tests enabled with browserstack
• Support for latest version of Material UI 4
• Support for latest version of Nextjs 10 and react 17

Demo URL: https://react-jsonschema-form-material-ui-github56.vercel.app
Integration test run sample: https://automate.browserstack.com/dashboard/v2/builds/3fd8a04b06f0e5e2a8352cba4ab1226a63cc7fde

3.0.0-alpha.6 - XHR Schema NextJS, MUI-4 Latest support

npm install --save react-jsonschema-form-material-ui@3.0.0-alpha.6

3.0.0-alpha.6

• Demo updated with vscode editor and live validation changes
• New interceptors to transform form and uiData using uiSchema - ui:interceptor
• New xhrSchema feature enabled to make xhr calls onload, onsubmit and onclick to consume or post data
• type: null support included for custom div support
• New Tabs and Stepper UI using ui:page -> "ui:layout": "tabs"
• Integration tests enabled with browserstack
• Support for latest version of Material UI 4
• Support for latest version of Nextjs 10 and react 17

Demo URL: https://react-jsonschema-form-material-ui-github56.vercel.app
Integration test run sample: https://automate.browserstack.com/dashboard/v2/builds/3fd8a04b06f0e5e2a8352cba4ab1226a63cc7fde

3.0.0-alpha.6-mui-5 - XHR Schema, NextJS and MUI5 support

npm install --save react-jsonschema-form-material-ui@3.0.0-alpha.6-mui-5

3.0.0-alpha.6-mui-5

• Demo updated with vscode editor and live validation changes
• New interceptors to transform form and uiData using uiSchema - ui:interceptor
• New xhrSchema feature enabled to make xhr calls onload, onsubmit and onclick to consume or post data
• type: null support included for custom div support
• New Tabs and Stepper UI using ui:page -> "ui:layout": "tabs"
• Integration tests enabled with browserstack
• Support for latest version of Material UI 5
• Support for latest version of Nextjs 10 and react 17

Demo URL: https://react-jsonschema-form-material-ui-git-next-github56.vercel.app
Integration test run sample: https://automate.browserstack.com/dashboard/v2/builds/3fd8a04b06f0e5e2a8352cba4ab1226a63cc7fde

3.0.0 [Breaking Changes] [JSONSchema-Draft-7 Support]

npm install --save react-jsonschema-form-material-ui@3.0.0-alpha.0

3.0.0-alpha.0

• Build system now upgraded to webpack 5
• React select values are no longer stringify results but array values.
• New Tabs UI
• Additional Properties and Additional Items feature enabled
• "ui:options" and "ui:style" enabled for prop passing and styling every field
• On the fly module creation
• Reference Schema's via http and inline references
• Support alternatives - oneOf, anyOf, allOf
• Support for dependencies - array of conditionals
• new Prop onError to get errors available in form on every change
• new Prop uiData to control ui only data to add separation of concern with form data
• Demo updated with monaco editor and live validation changes
• New interceptors to transform form and uiData using uiSchema - ui:interceptor

Minor Fixes for form labels

npm install --save react-jsonschema-form-material-ui@2.2.2

2.2.2

Form labels are now aligned with Material UI Guidelines.

Validations enabled with support for custom and realtime validations

Validations are now enabled can be seen below with following example.
Detailed docs can be seen here

React Component

// Library Import
import Form from 'react-jsonschema-form-material-ui';

// Form Model
const schema = require('./schema.json');
const uiSchema = require('./uiSchema.json');
const formData = require('./formData.json');

const MaterialJsonSchemaForm = () => (
  <Form
	schema={givenSchema}
	uiSchema={givenUISchema}
	formData={givenFormData}
	onSubmit={onSubmit}
        validations={{
	    confirmPassword: ({ schema, validations, formData, value }) => value !== formData.pass1 && ({
	      message: validations.confirmPassword.message,
	      inline: true,
	    }),
	}}
  />
);

Schema.json

{
  "title": "Custom validation",
  "description": "This form defines custom validation rules checking that the two passwords match.",
  "type": "object",
  "properties": {
    "pass1": {
      "title": "Password",
      "type": "string",
      "minLength": 3
    },
    "pass2": {
      "title": "Repeat password",
      "type": "string",
      "minLength": 3
    },
    "age": {
      "title": "Age",
      "type": "number",
      "minimum": 18
    }
  }
}

UI-Schema.json

{
  "pass1": {
    "ui:widget": "password"
  },
  "pass2": {
    "ui:widget": "password",
    "ui:validations": {
      "confirmPassword": {
	   "message": "Both passwords should be the same (2)",
	   "inline": true
      }
    }
  }
}

Output

Playground Example: https://react-jsonschema-form-material-ui.github56.now.sh/#validation

Validations enabled with support for custom and realtime validations

Validations are now enabled can be seen below with following example.
Detailed docs can be seen here

React Component

// Library Import
import Form from 'react-jsonschema-form-material-ui';

// Form Model
const schema = require('./schema.json');
const uiSchema = require('./uiSchema.json');
const formData = require('./formData.json');

const MaterialJsonSchemaForm = () => (
  <Form
	schema={givenSchema}
	uiSchema={givenUISchema}
	formData={givenFormData}
	onSubmit={onSubmit}
        validations={{
	    confirmPassword: (schema, uiSchema, value) => value !== givenFormData.pass1 && ({
	      message: uiSchema['ui:validations'].confirmPassword.message,
	      inline: true,
	    }),
	}}
  />
);

Schema.json

{
  "title": "Custom validation",
  "description": "This form defines custom validation rules checking that the two passwords match.",
  "type": "object",
  "properties": {
    "pass1": {
      "title": "Password",
      "type": "string",
      "minLength": 3
    },
    "pass2": {
      "title": "Repeat password",
      "type": "string",
      "minLength": 3
    },
    "age": {
      "title": "Age",
      "type": "number",
      "minimum": 18
    }
  }
}

UI-Schema.json

{
  "pass1": {
    "ui:widget": "password"
  },
  "pass2": {
    "ui:widget": "password",
    "ui:validations": {
      "confirmPassword": {
	   "message": "Both passwords should be the same (2)",
	   "inline": true
      }
    }
  }
}

Output

Playground Example: https://react-jsonschema-form-material-ui.github56.now.sh/#validation

UISchema Props support for custom components

Now custom components for any given schema property should be defined in ui:schema

Below example :

schema.json

"properties": {
  "customRating": {
      "type": "integer",
      "title": "Custom Rating"
  }
}

ui-schema.json

{
   "customRating": {
	"ui:component": "customRating",
	"ui:options": {
	   "color": "red"
	}
   }
}

Anything passed as part of ui:options will be automatically added as props for given custom component.

Working example can be seen here.