npm package: @licuido-ui/ui_render-form
Description: Created a React component, Render Form that reder group of input fields with validations
Latest version: 0.0.4

# RenderForm

Created a React component, Render Form that reder group of input fields with validations

### Author

- @author Hariharan <hariharan@crayond.co>

## Link

[Story Book Link RenderForm](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_render-form
```

## Import component

```jsx
import { RenderForm } from '@licuido-ui/ui_render-form';
```

## Usage

```jsx
<RenderForm formList={[]} />
```

## Image

![alt text](./renderForm.png)

## Sample Code

```jsx
<RenderForm
    formButtonContainerStyle={{}}
    gridStyle={{}}
    gridContainerProps={{ columnSpacing: 3, spacing: 0 }}
    defaultValues={undefined}
    yupSchemaValidation={undefined}
    submitButton={{
      visible: true,
      title: 'Save',
      onClick: (data: object) => console.log(data),
      sx: {},
    }} 
    formList={ [
      {
        type: 'heading',
        containerStyle: {},
        gridStyle: {},
        breakPoint: {
          xs: 12,
          sm: 12,
          md: 12,
          lg: 12,
          lx: 12,
        },
        inputProps: {
          value: 'Basic Details',
          sx: {
            fontSize: '16px',
            color: '#111111',
            fontWeight: '500',
            margin: '0 0 8px 0',
          },
        },
      },
      {
        type: 'input',
        containerStyle: {},
        gridStyle: {},
        breakPoint: {
          xs: 12,
          sm: 6,
          md: 6,
          lg: 6,
          lx: 6,
        },
        inputProps: {
          type: 'text',
          label: 'First Name',
          name: 'firstName',
          labelVariant: 'standard',
        },
      },
      {
        type: 'input',
        containerStyle: {},
        gridStyle: {},
        breakPoint: {
          xs: 12,
          sm: 6,
          md: 6,
          lg: 6,
          lx: 6,
        },
        inputProps: {
          type: 'text',
          label: 'Last Name',
          name: 'lastName',
          labelVariant: 'standard',
          rules: {
            required: 'Please enter Last name',
            minLength: {
              value: 5,
              message: 'min length is 4',
            },
            maxLength: {
              value: 15,
              message: 'min length is 14',
            },
          },
        },
      },
      {
        type: 'date',
        containerStyle: {},
        gridStyle: {},
        breakPoint: {
          xs: 12,
          sm: 6,
          md: 6,
          lg: 6,
          lx: 6,
        },
        inputProps: {
          type: 'text',
          label: 'DOB',
          name: 'dob',
          labelVariant: 'standard',
          rules: {
            required: 'Please enter DOB',
          },
          inputFormat: 'dd-MM-yyyy',
        },
      },
      {
        type: 'chipSelect',
        containerStyle: {},
        gridStyle: {},
        breakPoint: {
          xs: 12,
          sm: 6,
          md: 6,
          lg: 6,
          lx: 6,
        },
        inputProps: {
          label: 'Gender',
          name: 'gender',
          labelVariant: 'standard',
          rules: {
            required: 'Please enter Gender',
            minLength: {
              value: 5,
              message: 'min length is 4',
            },
            maxLength: {
              value: 15,
              message: 'min length is 14',
            },
          },
          options: [
            { label: 'Male', value: 'Male' },
            { label: 'Female', value: 'Female' },
            { label: 'Others', value: 'Others' },
          ],
        },
      },
      {
        type: 'dropDown',
        containerStyle: {},
        gridStyle: {},
        breakPoint: {
          xs: 12,
          sm: 6,
          md: 6,
          lg: 6,
          lx: 6,
        },
        inputProps: {
          type: 'text',
          label: 'Designation',
          name: 'designation',
          labelVariant: 'standard',
          rules: {
            required: 'Please enter Designation',
          },
          selectOption: [
            { label: 'Developer', value: 'Developer' },
            { label: 'Designer', value: 'Designer' },
            { label: 'designation', value: 'designation' },
          ],
        },
      },
      {
        type: 'heading',
        containerStyle: {},
        gridStyle: {},
        breakPoint: {
          xs: 12,
          sm: 12,
          md: 12,
          lg: 12,
          lx: 12,
        },
        inputProps: {
          value: 'Contact Information',
          sx: {
            fontSize: '16px',
            color: '#111111',
            fontWeight: '500',
            margin: '18px 0 8px 0',
          },
        },
      },
      {
        type: 'mobileNumberInput',
        containerStyle: {},
        gridStyle: {},
        breakPoint: {
          xs: 12,
          sm: 6,
          md: 6,
          lg: 6,
          lx: 6,
        },
        inputProps: {
          label: 'Mobile Number',
          name: 'mobileNumber',
          labelVariant: 'standard',
          required: true
        },
      },
      {
        type: 'input',
        containerStyle: {},
        gridStyle: {},
        breakPoint: {
          xs: 12,
          sm: 6,
          md: 6,
          lg: 6,
          lx: 6,
        },
        inputProps: {
          type: 'text',
          label: 'Email ID',
          name: 'email',
          labelVariant: 'standard',
          rules: {
            required: 'Please enter Email',
            minLength: {
              value: 5,
              message: 'min length is 4',
            },
            maxLength: {
              value: 15,
              message: 'min length is 14',
            },
          },
          errorMessage: 'Please enter Email Id',
        },
      },
      {
        type: 'input',
        containerStyle: {},
        gridStyle: {},
        breakPoint: {
          xs: 12,
          sm: 6,
          md: 6,
          lg: 6,
          lx: 6,
        },
        inputProps: {
          type: 'text',
          label: 'Address Line 1',
          name: 'address1',
          labelVariant: 'standard',
          rules: {
            required: 'Please enter Address 1',
            minLength: {
              value: 5,
              message: 'min length is 4',
            },
            maxLength: {
              value: 15,
              message: 'min length is 14',
            },
          },
          errorMessage: 'Please enter Address Line 1',
        },
      },
      {
        type: 'input',
        containerStyle: {},
        gridStyle: {},
        breakPoint: {
          xs: 12,
          sm: 6,
          md: 6,
          lg: 6,
          lx: 6,
        },
        inputProps: {
          id: 'address2',
          type: 'text',
          label: 'Address Line 2',
          name: 'address2',
          labelVariant: 'standard',
          rules: {
            required: 'Please enter Address 2',
            minLength: {
              value: 5,
              message: 'min length is 4',
            },
            maxLength: {
              value: 15,
              message: 'min length is 14',
            },
          },
          errorMessage: 'Please enter Address Line 2',
        },
      },
      {
        type: 'custom',
        containerStyle: {},
        gridStyle: {},
        breakPoint: {
          xs: 12,
          sm: 6,
          md: 6,
          lg: 6,
          lx: 6,
        },
        component: <BasicButton type='button'>Custom Com</BasicButton>,
      },
     ]}
/>
```

## Props

| **Name**                     | **Description**                                                                                                                                                                                                                                                  | **Default** | **Control**                                                                                                             |
| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------- |
| **id**                       | string                                                                                                                                                                                                                                                           | string      | string                                                                                                                  |
| **formList**                 | formProps\[\]                                                                                                                                                                                                                                                    | \[\]        | RAWformList : \[\]                                                                                                      |
| **formButtonContainerStyle** | SxProps&lt;\{\}&gt;                                                                                                                                                                                                                                              | \-          | RAWformButtonContainerStyle : \{\}                                                                                      |
| **gridStyle**                | SxProps&lt;\{\}&gt;                                                                                                                                                                                                                                              | \{ \}       | RAWgridStyle : \{\}                                                                                                     |
| **gridContainerProps**       | SystemProps&lt;Theme&gt; &amp; \{ children?: ReactNode; classes?: Partial&lt;GridClasses&gt;; columns?: ResponsiveStyleValue&lt;number&gt;; \.\.\. 8 more \.\.\.; zeroMinWidth?: boolean; \} &amp; RegularBreakpoints &amp; CommonProps &amp; Omit&lt;\.\.\.&gt; | \{ \}       | RAWgridContainerProps : \{columnSpacing : 3spacing : 0\}                                                                |
| **defaultValues**            | object                                                                                                                                                                                                                                                           | \-          | Set object                                                                                                              |
| **yupSchemaValidation**      | Resolver&lt;FieldValues, any&gt;                                                                                                                                                                                                                                 | \-          | Set object                                                                                                              |
| **submitButton**             | \{ \[key: string\]: unknown; visible?: boolean; title?: string; onClick?: \(data: object\) =&gt; void; sx: SxProps&lt;\{\}&gt;; \}                                                                                                                               | \-          | RAWsubmitButton : \{visible : truetitle : "Save"onClick : \(data\) =&gt; console\.log\(data\)sx : \{\.\.\.\} 0 keys\}   |
| **cancelButton**             | \{ \[key: string\]: any; visible?: boolean; title?: string; onClick?: \(event: React\.MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;\) =&gt; void; sx?: SxProps&lt;\{\}&gt;; \}                                                                                 | \-          | RAWcancelButton : \{visible : truetitle : "Cancel"onClick : \(data\) =&gt; console\.log\(data\)sx : \{\.\.\.\} 0 keys\} |
| **customButton**             | \{ component: React\.ReactNode; \}                                                                                                                                                                                                                               | \-          | RAWcustomButton : \{component : \{\.\.\.\} 7 keys\}                                                                     |
| **className**                | string                                                                                                                                                                                                                                                           | \-          | Set string                                                                                                              |
| **sx**                       | SxProps&lt;Theme&gt;                                                                                                                                                                                                                                             | \-          | Set object                                                                                                              |