Mui-form-generator NPM

mui-form-generator

Makes forms using material ui

Install

npm install --save mui-form-generator

Props:

// Note: Docs are still a WIP
MuiFormGeneratorProps {
    blueprint: BlueprintProps, // Must be in a bluePrint format
    validate?: {
  required?: boolean | string, // if boolean, the default error message will be "Required"
  isEmail?: boolean | string,
  minLength?: [number, string],
  maxLength?: [number, string],
  min?: [number, string],
  max?: [number, string],
  lessThan?: [number, string],
  greaterThan?: [number, string],
  canNotEqual?: [any[], string]
  isPassword?: PasswordValidationProps
  },
    manualValidate?: (values)=>boolean,
    initialValues: object,
    isLoading?: boolean,
    handleSubmit?: (values, formikProps) => any,
    cachedStateKey?: string | undefined,
    theme?: any | undefined
    startDirty?: boolean

}

BlueprintProps {
Rows: RowProps[],
}

RowProps {
    title?: string | any,
    Cols: ColProps[],
    hide?: boolean,
    justify?: any,
    divider?: boolean,
    style?: object,
    collapsable?: string | any,

}

ColProps {
    title?: string | any,
    as?: boolean | "auto" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | undefined,
    Input: any,
    Inputs?: any,
    hide?: boolean,
    Button?: any,
    style?: any,
    justifyContent?: string,
}
Input {
    ...HTML_INPUT_PROPS,
    style: object,
    Component: ()=>any, custom component, returns formik and input props
    hide: boolean, 
    options: optionProps[], for select fields
    labelPlacement: "end" | "start",
}

Usage

import React from 'react'
import { MuiFormGenerator } from 'mui-form-generator'
import 'mui-form-generator/dist/index.css'

const bluePrint = () => {
    return ({
        Rows: [{
            Cols: [
                {
                    Input: {
                        id: 'firstName',
                        label: 'firstName',
                        type: 'text',
                    }
                },
                {
                    Input: {
                        id: 'lastName',
                        label: 'lastName',
                        type: 'text',
                    }
                },
                {
                    Input: {
                        id: 'email',
                        label: 'Email',
                        type: 'email',
                    }
                },
            ]
        }]
    })
}

export default function ExampleForm() {
    const initialValues = { firstName: '', lastName: '', email: '' }

    function validate(values: any) {
        const errors = {}
        Object.keys(values).forEach(field=>{
            const isEmpty = (Array.isArray(values[field]) && !values[field].length) || (!values[field]) || (typeof values[field] === 'string' && !values[field].length)
            if (isEmpty) {
                errors[field] = 'required'
            }
        })
        return errors
    }
    function handleSubmit(values: any, formik: any) {
        window.alert(JSON.stringify(values))
        formik.resetForm()
    }
    return (
<MuiFormGenerator
            manualValidate={validate}
            blueprint={bluePrint()}
            initialValues={initialValues}
            handleSubmit={handleSubmit}
        />
        
    )
}

// Extensive Blueprint Example
const SignUpFormBluePrint = () => {
    return ({
        Rows: [
            {
                title:'Single Selects',
                Cols: [
                    {
                        Input: {
                            label: 'Single Select',
                            id: 'singleSelect',
                            name: 'singleSelect',
                            type: 'select',
                            options: defaultOptions,
                        },
                    },
                    {
                        Input: {
                            label: 'Async Single',
                            id: 'asyncSingle',
                            name: 'asyncSingle',
                            type: 'select',
                            options: defaultOptions,
                            isAsync: true,
                            asyncCall: async()=>{
                                // must return data in format: [{label: '', value: ''}]
                                const mockData = await mockApiCall()
                                return mockData
                            },
                            appendAddButton: (props: any)=>{
                                window.alert('Do stuff')
                                console.log('log:appendAddButton ', props)
                            }
                        },
                    },
                ]
            },
            {
                title:'Multiple Selects',
                Cols: [
                    {
                        Input: {
                            label: 'Multiple Select',
                            id: 'multipleSelect',
                            name: 'multipleSelect',
                            type: 'select',
                            options: defaultOptions,
                            multiple: true,
                        },
                    },
                    {
                        Input: {
                            label: 'Async Multiple',
                            id: 'asyncMultiple',
                            name: 'asyncMultiple',
                            type: 'select',
                            multiple: true,
                            options: [{label: 'Connecticut', value: 'Connecticut'}],
                            isAsync: true,
                            asyncCall: async()=>{
                                // must return data in format: [{label: '', value: ''}]
                                const mockData = await mockApiCall()
                                return mockData
                            },
                        },
                    },
                ]
            },
{
    title: 'Text Fields', 
    Cols: [
        {
            Input:{
                id: 'email',
                name: 'email',
                type: 'email',
                label: 'Email',

            }
        },
        {
            Input:{
                id: 'password',
                name: 'password',
                type: 'password',
                label: 'Password',

            }
        },
        {
            title: 'Custom',
            Input:{
                id: 'custom',
                name: 'custom',
                type: 'custom',
                Component: (props: any)=>{
                    function handleChange(e:any){
                        const { value } = e.target
                        props.formik.setFieldValue('custom', value)
                    }
                    return <input style={{border: '2px solid blue', height: '30px'}} onChange={handleChange} id="custom" value={props.formik.values.custom} type="text"></input>
                },
            }
        },
    ]
},
{
    title: 'Number Field', 
    Cols: [
        {
            Input:{
                id: 'number',
                name: 'number',
                type: 'number',
                label: 'Number',

            }
        },

    ]
},
{
    title: 'Date Fields', 
    style: {marginTop: '15px'},
    Cols: [
        {
            Input:{
                id: 'time',
                name: 'time',
                type: 'time',
                label: 'Time',
            }
        },
        {
            Input:{
                id: 'date',
                name: 'date',
                type: 'date',
                label: 'Date',

            }
        },
        {
            Input:{
                id: 'dateTime',
                name: 'dateTime',
                type: 'dateTime',
                label: 'Date Time',

            }
        },
        {
            as: 12,
            Input:{
                id: 'dateRange',
                name: 'dateRange',
                type: 'dateRange',
                label: 'Date Range',

            }
        },


    ]
},
{
    Cols: [
        {
            Input:{
                Component: (props:any)=>{
                    console.log('log: custom components props', props)
                return <div>Custom Component</div>
            }
            }
           
        }
    ]
},
            {
                Cols: [
                    {
                        justifyContent: 'flex-end',
                        Button:{
                            id: 'signupSubmit',
                            name: 'submit',
                            type: 'submit',
                            label: 'Submit',
                        }
                    },
                ]
            },
        ]
    })
}