# Dynamic Form CS3

#### Es un proyecto desarrollado para la empresa CS3, el cual consiste en renderizar un formulario a través de un string.

El proyecto consta de varios componentes, como por ejemplo, inputs, layouts, modales, entre otros.

Los cuales, al colocarlos dentro de un string y enviarlo como argumento, se visualizará como un componente natural de React.

```js=
Ejemplo de template:
        <Layouts.InputsWrapper className="_mb-2">
          <FormInput.InputFormCntx currentId="cont_firstName" label="Primer Nombre*" />
          <FormInput.InputFileSimpleContext currentId="cont_secondName" label="Segundo Nombre" />
        </Layouts.InputsWrapper>
```

En este ejemplo, estamos renderizando dos campos de texto en una misma fila.

> label: Es el título del campo de texto
> currentId: Es el nombre de la variable como se enviará en el formulario

Una vez teniendo el template, podemos utilizar el componente principal llamado Formjson de la siguiente manera:

```js=
Ejemplo de uso:

<Formjson
    queryConfig={queryClient}
    imageBaseURL='https://urlsubirimage.com'
    submitCallback={(data: any) => {onSubmit(data)}}
    formString={`
        <Layouts.InputsWrapper className="_mb-2">
          <FormInput.InputFormCntx currentId="cont_firstName" label="Primer Nombre*" />
          <FormInput.InputFileSimpleContext currentId="cont_secondName" label="Segundo Nombre" />
        </Layouts.InputsWrapper>
      `}
    />
```

Props

**queryConfig**: Hace referencia a la configuración del QueryClient de ReactQuery
Ejemplo:

```js=
const queryClient = {
    defaultOptions: {
        queries: {
        refetchOnWindowFocus: false,
        refetchOnMount: false,
        retry: false,
        },
    },
};
```

**imageBaseURL**: Hace referencia a la URL del sitio para el cargue de imágenes con el componente de FileInput (en caso de que requiera subir imágenes, de lo contrario, puede ser un string vacío)

**formString**: Hace referencia al template principal para renderizar el formulario (puede verlo en el primer ejemplo)

**formSchema**: Hace referencia a una función que devuelve el esquema de validación del formulario:

```json=
Ejemplo:
    const validationScheme = (yup) =>
        yup.object({
          cont_asunto: yup.string().required('Requerido'),
          cont_accept: yup
            .boolean()
            .default(false)
            .required('Requerido')
            .oneOf([true], 'Debe aceptar'),
    })
```

**submitCallback**: Hace referencia al callback que recibe la data del formulario al hacer submit
Para utilizar el botón submit debe proporcionarse en el template como se muestra en el siguiente ejemplo:

```js=
<Buttons.FormButton className="_bg-primary">
    Radicar Solicitud
</Buttons.FormButton>
```

**cancelCallback**: Hace referencia al callback que ejecuta el botón de cancelar. Para utilizar el botón cancelar, se debe proporcionar en el template como se muestra en el siguiente ejemplo:

```js=
<Buttons.CancelButton>
    Regresar
</Buttons.CancelButton>
```
