sladg / form-generator

Util that creates formik form from basic object definition.

formGenerator

Util that creates formik form from basic object definition.

Install

npm install @qest/form-generator

yarn add @qest/form-generator

Basic form definition

import formGenerator from '@qest/form-generator';
import { FormDefinition } from '@qest/form-generator/types';
import React from 'react';
import * as yup from 'yup';

const SignInForm = () => {
    const formDefinition: FormDefinition = {
        onSubmit: (values, { setSubmitting }) => {
            console.log(values);
            setSubmitting(false);
        },
        gutter: 16,
        fields: [
            {
                name: 'username',
                label: t('forms.SignInForm.username'),
                validation: yup.string().required(t('forms.validation.required')),
                rowStart: true,
                col: { span: 12 },
            },
            {
                name: 'password',
                type: 'password',
                label: t('forms.SignInForm.password'),
                validation: yup.string().required(t('forms.validation.required')),
                rowEnd: true,
                col: { span: 12 },
            },
        ]
    };

    return formGenerator(formDefinition);
};

export default SignInForm;

Overloading current components or declaring new ones, per project

in root of application:

formComponentMapping.projectSpecialSelect = (props: CombinedComponentProps) => {
    return <div>{JSON.stringify(props, null, 2)}</div>;
};

Prop custom mapping

in form definition you can, map props
(for instance, disable and toggle loading on button when submitting form):

{
    component: 'button',
    children: 'Submit',
    htmlType: 'submit',
    propMapping: (fieldProps) => ({
        disabled: fieldProps.formProps.isSubmitting,
        loading: fieldProps.formProps.isSubmitting,
    }),
}

Custom components in form definition

if you pass "custom" to component field, you can render anything trough "custom" prop:

{
    name: 'custom',
    component: 'custom',
    custom: (props) => <div>{JSON.stringify(props, null, 2)}</div>,
}

Validation and cross fieldValidation

validation accepts yup schema, and it supports crossField validation:

{
    name: 'input',
    label: 'input',
    component: 'input',
    validation: Yup.string().when('autocomplete', {
        is: (autocomplete) => !!autocomplete,
        then: Yup.string().required('required'),
    }),
    placeholder: 'placeholder',
}

From default it supports most of antd components:

Component	Link to doc
AutoComplete	AutoCompleteProps
Button	ButtonProps
Cascader	CascaderProps
Checkbox	CheckboxProps
CheckboxGroup	CheckboxProps
DatePicker	DatePickerProps
Input	InputProps
InputNumber	InputNumberProps
Radio	RadioGroupProps
Rate	RateProps
Select	SelectProps
Slider	SliderProps
Switch	SwitchProps
TimePicker	TimePickerProps
Transfer	TransferProps
TreeSelect	TreeSelectProps