mui-rff-template

An easy template/generator that allows users to quicky create a responsive form with mui and rff. Uses Yup for validation

Install

npm install --save mui-rff-template

Demo

https://codesandbox.io/s/strange-almeida-gogs9

Docs

This utility allows any user to quickly bootstrap a responsive with minimal overhead. The validationSchema is written through Yup. The Frontend framework is MaterialUI.

Form Template

data (Array) [Required]

An array of objects that represent fields in your form. Each object has subfields:

name (String) [Required]

Name assigned to the field in your form. This name must match the corresponding keys in defaultValues and validation schema

type (String) [Required]

The type of your form field. Currently supports 'text', 'select', 'radio', 'autocomplete', 'file', and 'rating'

label (String) [Required]

The label for the field

options (Array) [Required: type === 'autocomplete' || 'select' || 'radio' || 'checkbox']

Required if your type is 'select' or 'autocomplete'. This is an array of of objects, where each object is an option in your dropdown. The object must contain EXACTLY 'label' and 'value' keys if the type is checkbox or radio. If the type is autocomplete or select, the keys can be overwritten with the props below. If you do not provide a 'value' key the label key will also be treated as the value.

optionLabelKey (String) [Required]

Will overwrite the 'label' key for objects in the options array.

#Default

{
...
options: [{ label: 'SomeName', value: 'SomeValue'}]
}

#Using optionLabelKey

{
...
optionLabelKey: 'realName'
options: [{ realName: 'SomeName', value: 'SomeValue'}]
}

optionValueKey (String) [Optional]

Will overwrite the 'value' key for objects in the options array.

#Default

{
...
options: [{ label: 'SomeName', value: 'SomeValue'}]
}

#Using optionValueKey

{
...
optionValueKey: 'realValue'
options: [{ label: 'SomeName', realValue: 'SomeValue'}]
}

multiple (String) [Optional: type === 'autocomplete']

Will allow a multiselect option for autocomplete fields. This requires that the initial autocomplete value passed in is an array. import * as Yup from 'yup'

const data1 = [
  ///
  [
    {
      name: 'username',
      label: 'Username',
      type: 'text'
    },
    { name: 'password', label: 'Password', type: 'password' },
    { name: 'date', label: 'Date', type: 'date' }
  ]
  ///
]

const data2 = [
  ///
  { name: 'time', label: 'Time', type: 'time' },
  {
    name: 'email',
    label: 'Email',
    type: 'select',
    options: [
      {
        realName: '[email protected]'
      }
    ],
    optionLabelKey: 'realName'
  }

  ///
]

const data3 = [
  ///
  {
    name: 'autocomplete',
    label: 'Autocomplete',
    type: 'autocomplete',
    options: [
      { title: 'Movie' },
      { title: 'TV Show' },
      { title: 'Videogame' },
      { title: 'Good TV Show' },
      { title: 'Bad Movie' }
    ],
    optionLabelKey: 'title',
    multiple: true
  },

  {
    name: 'checkbox',
    type: 'checkbox',
    options: [{ label: 'Remember Me?', value: true }]
  },
  {
    name: 'Radio',
    type: 'radio',
    options: [
      { label: 'Mustard', value: 'Mustard' },
      { label: 'Ketchup', value: 'Ketchup' },
      { label: 'Relish', value: 'Relish' }
    ]
  }
]

export const data = [data1, data2, data3]

const schema1 = Yup.object().shape({
  username: Yup.string()
    .min(2, 'Too Short! ')
    .max(50, 'Too Long! ')
    .required('Required'),
  password: Yup.string()
    .min(2, 'Too Short! ')
    .max(50, 'Too Long! ')
    .required('Required'),

  date: Yup.date().required('Required').nullable()
})

const schema2 = Yup.object().shape({
  email: Yup.string().email('Invalid email').required('Required'),
  time: Yup.date().required('Required').nullable()
})

const schema3 = Yup.object().shape({
  autocomplete: Yup.string().required('Required')
})

export const validationSchema = [schema1, schema2, schema3]

export const initialValues = [
  { username: 'Naveed', password: '', date: null },

  { email: '', time: null },

  { autocomplete: [] }
]

validationSchema (Object) [Required]

A Yup object that has the same keys as defaultValues and the same names as the objects in the data prop

validationSchema = Yup.object().shape({
  firstName: Yup.string()
    .min(2, 'Too Short!')
    .max(50, 'Too Long!')
    .required('Required'),
  lastName: Yup.string()
    .min(2, 'Too Short!')
    .max(50, 'Too Long!')
    .required('Required'),
  email: Yup.string().email('Invalid email').required('Required')
})

cancel [Optional]

Determines whether or not there will be a cancel button. Defaults to true.

handleSubmit [Required]

A function that is to be executed upon submission of the form.

handleCancel [Optional]

A function that is to be executed upon canceling the form. If this prop is not provided, it will just reset the form.

submitButtonLabel [Optional]

The label of the submit button. Defaults to "Submit"

cancelButtonLabel [Optional]

The label of the cancel button. Defaults to "Cancel"

cancelDisabled [Optional]

Some boolean condition in which the cancel button should be disabled

initialValues [Required]

An object of defaultValues to be assigned to the form. This is a REQUIRED prop. The keys should match up with those in the validationSchema and the names of the objects in the data prop.

{ firstName: "", lastName: "", email: "" }

Basic Example

import * as Yup from 'yup'

export const data = [
  [
    {
      name: 'username',
      label: 'Username',
      type: 'text'
    },
    { name: 'password', label: 'Password', type: 'password' },
    { name: 'date', label: 'Date', type: 'date' }
  ],
  { name: 'time', label: 'Time', type: 'time' },
  {
    name: 'email',
    label: 'Email',
    type: 'select',
    options: [
      {
        realName: '[email protected]'
      }
    ],
    optionLabelKey: 'realName'
  },
  {
    name: 'autocomplete',
    label: 'Autocomplete',
    type: 'autocomplete',
    options: [
      { title: 'Movie' },
      { title: 'TV Show' },
      { title: 'Videogame' },
      { title: 'Good TV Show' },
      { title: 'Bad Movie' }
    ],
    optionLabelKey: 'title',
    multiple: true
  },
  {
    name: 'checkbox',
    type: 'checkbox',
    options: [{ label: 'Remember Me?', value: true }]
  },
  {
    name: 'rating',
    type: 'rating',
    label: 'Rating'
  },
  { name: 'files', label: 'Upload Image', type: 'file', multiple: false }
]

const fileSizeCheck = (files) => {
  let valid = true
  Array.from(files).map((file) => {
    let size = file.size
    if (size > 10000000) {
      valid = false
    }
  })
  return valid
}

const fileTypeCheck = (files) => {
  let valid = true
  Array.from(files).map((file) => {
    if (!['image/jpeg', 'image/png'].includes(file.type)) {
      valid = false
    }
  })

  return valid
}

export const validationSchema = Yup.object().shape({
  username: Yup.string()
    .min(2, 'Too Short! ')
    .max(50, 'Too Long! ')
    .required('Required'),
  password: Yup.string()
    .min(2, 'Too Short! ')
    .max(50, 'Too Long! ')
    .required('Required'),
  email: Yup.string().email('Invalid email').required('Required'),
  date: Yup.date().required('Required').nullable(),
  time: Yup.date().required('Required').nullable(),
  autocomplete: Yup.string().required('Required'),
  rating: Yup.number().required('Required'),
  files: Yup.mixed()
    .test('file-size', 'File size must be less than 100mb. ', fileSizeCheck)
    .test('file-type', 'File must be of type jpeg or png. ', fileTypeCheck)
})

export const initialValues = {
  username: '',
  password: '',
  email: '',
  files: [],
  date: null,
  time: null,
  autocomplete: [],
  rating: 0,
  files: []
}

import React, { Component } from 'react'
import { FormTemplate } from 'mui-rff-template'
import { Paper, Grid } from '@material-ui/core'
import {
  data,
  validationSchema,
  initialValues
} from './forms/form-template-example'
import PagedFormTemplateExample from './PagedFormTemplateExample'

class FormTemplateExample extends Component {
  handleSubmit = async (data) => {
    console.log(data)
  }

  render() {
    return (
      <div>
        <Grid container justifyContent='center'>
          <Paper style={{ padding: 16, width: '50%' }}>
            <FormTemplate
              pages={true}
              data={data}
              handleSubmit={this.handleSubmit}
              validationSchema={validationSchema}
              initialValues={initialValues}
            />
          </Paper>
        </Grid>

        <PagedFormTemplateExample />
      </div>
    )
  }
}

export default FormTemplateExample

PagedFormTemplate

data (Array) [Required]

An array of arrays. Each element of the array is the same as the data prop for an individual Form Template, and it represents one page of the form.

validationSchema (Array) [Required]

An array of validation schemas. Each element of the array is the same as the validationSchema prop for an individual Form Template, it validates one page of the form.

handleSubmit (Func) [Required]

A function that is to be executed upon submission of the form.

initialValues (Array) [Required]

An array of initial values. Each element of the array is the same as the initialValues prop for an individual Form Template, and represents one page of the form. Must include one ever for evey field in the form.

labels (Array) [Optional]

An array of strings, where each elemen is a label of each page.

PagedFormTemplate Example

import * as Yup from 'yup'

const data1 = [
  ///
  [
    {
      name: 'username',
      label: 'Username',
      type: 'text'
    },
    { name: 'password', label: 'Password', type: 'password' },
    { name: 'date', label: 'Date', type: 'date' }
  ]
  ///
]

const data2 = [
  ///
  { name: 'time', label: 'Time', type: 'time' },
  {
    name: 'email',
    label: 'Email',
    type: 'select',
    options: [
      {
        realName: '[email protected]'
      }
    ],
    optionLabelKey: 'realName'
  }

  ///
]

const data3 = [
  {
    name: 'checkbox',
    type: 'checkbox',
    options: [{ label: 'Remember Me?', value: true }]
  },
  {
    name: 'Radio',
    type: 'radio',
    options: [
      { label: 'Mustard', value: 'Mustard' },
      { label: 'Ketchup', value: 'Ketchup' },
      { label: 'Relish', value: 'Relish' }
    ]
  }
]

export const data = [data1, data2, data3]

const schema1 = Yup.object().shape({
  username: Yup.string()
    .min(2, 'Too Short! ')
    .max(50, 'Too Long! ')
    .required('Required'),
  password: Yup.string()
    .min(2, 'Too Short! ')
    .max(50, 'Too Long! ')
    .required('Required'),

  date: Yup.date().required('Required').nullable()
})

const schema2 = Yup.object().shape({
  email: Yup.string().email('Invalid email').required('Required'),
  time: Yup.date().required('Required').nullable()
})

export const validationSchema = [schema1, schema2]

export const initialValues = [
  { username: 'Naveed', password: '', date: null },

  { email: '', time: null },
  { checkbox: null, radio: null }
]

Disclaimer: Multiple autocomplete is WIP for paged form template.

License

MIT © Naveed-Naqi