oddsgate-ds 1.0.174 → 1.0.175

package/src/components/atoms/FormField/FormField.stories.tsx

@@ -1,499 +1,499 @@
-import {
-  ErrorMessage,
-  Field,
-  Form,
-  Formik,
-  FormikHelpers,
-  FormikValues
-} from 'formik'
-import type { Meta, StoryObj } from '@storybook/react'
-import React, { MouseEventHandler } from 'react'
-
-import CheckRadioField from './CheckRadioField'
-import Flex from '../Flex'
-import FormField from './FormField.component'
-import { IFormField } from './FormField.interface'
-import Icon from '../Icon'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/FormField',
-  component: FormField,
-  tags: ['autodocs'],
-  args: {
-    name: 'nome',
-    type: 'text',
-    as: 'input'
-  },
-  argTypes: {
-    as: {
-      defaultValue: 'input',
-      description: 'Overwritten description',
-      options: ['input', 'textarea', 'select']
-    },
-    name: {
-      defaultValue: 'texto',
-      description: 'Required name property'
-    },
-    type: {
-      defaultValue: 'text',
-      control: 'select',
-      description: 'Type of input element if as is input',
-      options: [
-        'button',
-        'checkbox',
-        'color',
-        'date',
-        'datetime-local',
-        'email',
-        'hidden',
-        'image',
-        'month',
-        'number',
-        'password',
-        'radio',
-        'range',
-        'reset',
-        'search',
-        'submit',
-        'tel',
-        'text',
-        'time',
-        'url',
-        'week'
-      ]
-    }
-  }
-} as Meta
-
-export const Simple: StoryObj<IFormField> = {
-  render: args => (
-    <Formik
-      initialValues={{}}
-      onSubmit={function (
-        values: FormikValues,
-        formikHelpers: FormikHelpers<FormikValues>
-      ): void | Promise<any> {
-        throw new Error('Function not implemented.')
-      }}
-    >
-      <Form>
-        <FormField label={'My custom input'} id={'input-1'}>
-          <Field
-            label={'My custom input'}
-            id={'input-1'}
-            name={'input-1'}
-            required={false}
-            className={''}
-          ></Field>
-          <ErrorMessage name={'input-1'} />
-        </FormField>
-      </Form>
-    </Formik>
-  ),
-  args: {}
-}
-
-export const WithIcon: StoryObj<IFormField> = {
-  render: args => (
-    <Formik
-      initialValues={{}}
-      onSubmit={function (
-        values: FormikValues,
-        formikHelpers: FormikHelpers<FormikValues>
-      ): void | Promise<any> {
-        throw new Error('Function not implemented.')
-      }}
-    >
-      <Form>
-        <FormField
-          id={'input-1'}
-          label={'My custom input'}
-          leftIcon={<Icon icon={'icon-search'} />}
-        >
-          <Field
-            label={'My custom input'}
-            id={'input-1'}
-            name={'input-1'}
-            required={false}
-            className={''}
-          ></Field>
-          <ErrorMessage name={'input-1'} />
-        </FormField>
-      </Form>
-    </Formik>
-  ),
-  args: {}
-}
-
-export const FilterWithInputs: StoryObj<IFormField> = {
-  render: args => (
-    <Formik
-      initialValues={{}}
-      onSubmit={function (
-        values: FormikValues,
-        formikHelpers: FormikHelpers<FormikValues>
-      ): void | Promise<any> {
-        throw new Error('Function not implemented.')
-      }}
-    >
-      <Form>
-        <Flex align="center" style={{ gap: '8px' }}>
-          <FormField
-            id={'input-1'}
-            label={'My custom input'}
-            leftIcon={<Icon icon={'icon-search'} />}
-          >
-            <Field
-              label={'My custom input'}
-              id={'input-1'}
-              name={'input-1'}
-              placeholder="Procurar"
-              onChange={(e: MouseEventHandler) => console.log(e)}
-            ></Field>
-            <ErrorMessage name={'input-1'} />
-          </FormField>
-
-          <FormField
-            id={'event_type'}
-            label={'My custom input'}
-            leftIcon={<Icon icon={'icon-search'} />}
-          >
-            <Field
-              as="select"
-              label={'My custom input'}
-              id={'event_type'}
-              name={'event_type'}
-              placeholder="Procurar"
-              onChange={(e: MouseEventHandler) => console.log(e)}
-            >
-              <option value="text">Evento tipo 1</option>
-              <option value="text2">Evento tipo 2</option>
-              <option value="text3">Evento tipo 2</option>
-            </Field>
-            <ErrorMessage name={'event_type'} />
-          </FormField>
-
-          <FormField
-            id={'date'}
-            label={'Date'}
-            leftIcon={<Icon icon={'icon-search'} />}
-          >
-            <Field
-              type="date"
-              label={'Date'}
-              id={'date'}
-              name={'date'}
-              placeholder="DD/MM/YYYY"
-              onChange={(e: MouseEventHandler) => console.log(e)}
-            ></Field>
-            <ErrorMessage name={'date'} />
-          </FormField>
-        </Flex>
-      </Form>
-    </Formik>
-  ),
-  args: {}
-}
-
-export const DarkStyle: StoryObj<IFormField> = {
-  render: args => (
-    <div className="style-dark color-white bg-primary50">
-      <Formik
-        initialValues={{}}
-        onSubmit={function (
-          values: FormikValues,
-          formikHelpers: FormikHelpers<FormikValues>
-        ): void | Promise<any> {
-          throw new Error('Function not implemented.')
-        }}
-      >
-        <Form>
-          <Flex align="center" style={{ gap: '8px' }}>
-            <FormField
-              id={'input-1'}
-              label={'My custom input'}
-              leftIcon={<Icon icon={'icon-search'} />}
-            >
-              <Field
-                label={'My custom input'}
-                id={'input-1'}
-                name={'input-1'}
-                placeholder="Procurar"
-                onChange={(e: MouseEventHandler) => console.log(e)}
-              ></Field>
-              <ErrorMessage name={'input-1'} />
-            </FormField>
-
-            <FormField
-              id={'event_type'}
-              label={'My custom input'}
-              leftIcon={<Icon icon={'icon-search'} />}
-            >
-              <Field
-                as="select"
-                label={'My custom input'}
-                id={'event_type'}
-                name={'event_type'}
-                placeholder="Procurar"
-                onChange={(e: MouseEventHandler) => console.log(e)}
-              >
-                <option value="text">Evento tipo 1</option>
-                <option value="text2">Evento tipo 2</option>
-                <option value="text3">Evento tipo 2</option>
-              </Field>
-              <ErrorMessage name={'event_type'} />
-            </FormField>
-
-            <FormField
-              id={'date'}
-              label={'Date'}
-              leftIcon={<Icon icon={'icon-search'} />}
-            >
-              <Field
-                type="date"
-                label={'Date'}
-                id={'date'}
-                name={'date'}
-                placeholder="DD/MM/YYYY"
-                onChange={(e: MouseEventHandler) => console.log(e)}
-              ></Field>
-              <ErrorMessage name={'date'} />
-            </FormField>
-
-            <FormField id={'upload'} label={'Upload'}>
-              <Field
-                type="file"
-                label={'Upload'}
-                id={'upload'}
-                name={'upload'}
-                onChange={(e: MouseEventHandler) => console.log(e)}
-              ></Field>
-              <ErrorMessage name={'upload'} />
-            </FormField>
-
-            <FormField
-              id={'checkboxes'}
-              label={'Checkboxes'}
-              isCheckRadio={true}
-            >
-              <CheckRadioField id={`checkbox-1`} label={'Option 1'}>
-                <Field
-                  type={'checkbox'}
-                  id={`checkbox-1`}
-                  name={'checkboxes'}
-                  value={'1'}
-                />
-              </CheckRadioField>
-              <CheckRadioField id={`checkbox-2`} label={'Option 2'}>
-                <Field
-                  type={'checkbox'}
-                  id={`checkbox-2`}
-                  name={'checkboxes'}
-                  value={'2'}
-                />
-              </CheckRadioField>
-              <CheckRadioField id={`checkbox-3`} label={'Option 3'}>
-                <Field
-                  type={'checkbox'}
-                  id={`checkbox-2`}
-                  name={'checkboxes'}
-                  value={'2'}
-                />
-              </CheckRadioField>
-              <ErrorMessage name={'checkboxes'} />
-            </FormField>
-
-            <FormField id={'radios'} label={'Radios'} isCheckRadio={true}>
-              <CheckRadioField id={`radio-1`} label={'Option 1'}>
-                <Field
-                  type={'radio'}
-                  id={`radio-1`}
-                  name={'radios'}
-                  value={'1'}
-                />
-              </CheckRadioField>
-              <CheckRadioField id={`radio-2`} label={'Option 2'}>
-                <Field
-                  type={'radio'}
-                  id={`radio-2`}
-                  name={'radios'}
-                  value={'2'}
-                />
-              </CheckRadioField>
-              <CheckRadioField id={`radio-3`} label={'Option 3'}>
-                <Field
-                  type={'radio'}
-                  id={`radio-3`}
-                  name={'radios'}
-                  value={'3'}
-                />
-              </CheckRadioField>
-              <ErrorMessage name={'radios'} />
-            </FormField>
-
-            <FormField id={'description'} label={'Description'}>
-              <Field
-                as="textarea"
-                id={'description'}
-                name={'description'}
-                placeholder="Your message"
-                onChange={(e: MouseEventHandler) => console.log(e)}
-              ></Field>
-              <ErrorMessage name={'description'} />
-            </FormField>
-          </Flex>
-        </Form>
-      </Formik>
-    </div>
-  ),
-  args: {}
-}
-
-export const All: StoryObj<IFormField> = {
-  render: args => (
-    <Formik
-      initialValues={{}}
-      onSubmit={function (
-        values: FormikValues,
-        formikHelpers: FormikHelpers<FormikValues>
-      ): void | Promise<any> {
-        throw new Error('Function not implemented.')
-      }}
-    >
-      <Form>
-        <Flex align="center" style={{ gap: '8px' }}>
-          <FormField
-            id={'input-1'}
-            label={'My custom input'}
-            leftIcon={<Icon icon={'icon-search'} />}
-          >
-            <Field
-              label={'My custom input'}
-              id={'input-1'}
-              name={'input-1'}
-              placeholder="Procurar"
-              onChange={(e: MouseEventHandler) => console.log(e)}
-            ></Field>
-            <ErrorMessage name={'input-1'} />
-          </FormField>
-
-          <FormField
-            id={'event_type'}
-            label={'My custom input'}
-            leftIcon={<Icon icon={'icon-search'} />}
-          >
-            <Field
-              as="select"
-              label={'My custom input'}
-              id={'event_type'}
-              name={'event_type'}
-              placeholder="Procurar"
-              onChange={(e: MouseEventHandler) => console.log(e)}
-            >
-              <option value="text">Evento tipo 1</option>
-              <option value="text2">Evento tipo 2</option>
-              <option value="text3">Evento tipo 2</option>
-            </Field>
-            <ErrorMessage name={'event_type'} />
-          </FormField>
-
-          <FormField
-            id={'date'}
-            label={'Date'}
-            leftIcon={<Icon icon={'icon-search'} />}
-          >
-            <Field
-              type="date"
-              label={'Date'}
-              id={'date'}
-              name={'date'}
-              placeholder="DD/MM/YYYY"
-              onChange={(e: MouseEventHandler) => console.log(e)}
-            ></Field>
-            <ErrorMessage name={'date'} />
-          </FormField>
-
-          <FormField id={'upload'} label={'Upload'}>
-            <Field
-              type="file"
-              label={'Upload'}
-              id={'upload'}
-              name={'upload'}
-              onChange={(e: MouseEventHandler) => console.log(e)}
-            ></Field>
-            <ErrorMessage name={'upload'} />
-          </FormField>
-
-          <FormField id={'checkboxes'} label={'Checkboxes'} isCheckRadio={true}>
-            <CheckRadioField id={`checkbox-1`} label={'Option 1'}>
-              <Field
-                type={'checkbox'}
-                id={`checkbox-1`}
-                name={'checkboxes'}
-                value={'1'}
-              />
-            </CheckRadioField>
-            <CheckRadioField id={`checkbox-2`} label={'Option 2'}>
-              <Field
-                type={'checkbox'}
-                id={`checkbox-2`}
-                name={'checkboxes'}
-                value={'2'}
-              />
-            </CheckRadioField>
-            <CheckRadioField id={`checkbox-3`} label={'Option 3'}>
-              <Field
-                type={'checkbox'}
-                id={`checkbox-3`}
-                name={'checkboxes'}
-                value={'3'}
-              />
-            </CheckRadioField>
-            <ErrorMessage name={'checkboxes'} />
-          </FormField>
-
-          <FormField id={'radios'} label={'Radios'} isCheckRadio={true}>
-            <CheckRadioField id={`radio-1`} label={'Option 1'}>
-              <Field
-                type={'radio'}
-                id={`radio-1`}
-                name={'radios'}
-                value={'1'}
-              />
-            </CheckRadioField>
-            <CheckRadioField id={`radio-2`} label={'Option 2'}>
-              <Field
-                type={'radio'}
-                id={`radio-2`}
-                name={'radios'}
-                value={'2'}
-              />
-            </CheckRadioField>
-            <CheckRadioField id={`radio-3`} label={'Option 3'}>
-              <Field
-                type={'radio'}
-                id={`radio-3`}
-                name={'radios'}
-                value={'3'}
-              />
-            </CheckRadioField>
-            <ErrorMessage name={'radios'} />
-          </FormField>
-
-          <FormField id={'description'} label={'Description'}>
-            <Field
-              as="textarea"
-              id={'description'}
-              name={'description'}
-              placeholder="Your message"
-              onChange={(e: MouseEventHandler) => console.log(e)}
-            ></Field>
-            <ErrorMessage name={'description'} />
-          </FormField>
-        </Flex>
-      </Form>
-    </Formik>
-  ),
-  args: {}
-}
+import {
+  ErrorMessage,
+  Field,
+  Form,
+  Formik,
+  FormikHelpers,
+  FormikValues
+} from 'formik'
+import type { Meta, StoryObj } from '@storybook/react'
+import React, { MouseEventHandler } from 'react'
+
+import CheckRadioField from './CheckRadioField'
+import Flex from '../Flex'
+import FormField from './FormField.component'
+import { IFormField } from './FormField.interface'
+import Icon from '../Icon'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/FormField',
+  component: FormField,
+  tags: ['autodocs'],
+  args: {
+    name: 'nome',
+    type: 'text',
+    as: 'input'
+  },
+  argTypes: {
+    as: {
+      defaultValue: 'input',
+      description: 'Overwritten description',
+      options: ['input', 'textarea', 'select']
+    },
+    name: {
+      defaultValue: 'texto',
+      description: 'Required name property'
+    },
+    type: {
+      defaultValue: 'text',
+      control: 'select',
+      description: 'Type of input element if as is input',
+      options: [
+        'button',
+        'checkbox',
+        'color',
+        'date',
+        'datetime-local',
+        'email',
+        'hidden',
+        'image',
+        'month',
+        'number',
+        'password',
+        'radio',
+        'range',
+        'reset',
+        'search',
+        'submit',
+        'tel',
+        'text',
+        'time',
+        'url',
+        'week'
+      ]
+    }
+  }
+} as Meta
+
+export const Simple: StoryObj<IFormField> = {
+  render: args => (
+    <Formik
+      initialValues={{}}
+      onSubmit={function (
+        values: FormikValues,
+        formikHelpers: FormikHelpers<FormikValues>
+      ): void | Promise<any> {
+        throw new Error('Function not implemented.')
+      }}
+    >
+      <Form>
+        <FormField label={'My custom input'} id={'input-1'}>
+          <Field
+            label={'My custom input'}
+            id={'input-1'}
+            name={'input-1'}
+            required={false}
+            className={''}
+          ></Field>
+          <ErrorMessage name={'input-1'} />
+        </FormField>
+      </Form>
+    </Formik>
+  ),
+  args: {}
+}
+
+export const WithIcon: StoryObj<IFormField> = {
+  render: args => (
+    <Formik
+      initialValues={{}}
+      onSubmit={function (
+        values: FormikValues,
+        formikHelpers: FormikHelpers<FormikValues>
+      ): void | Promise<any> {
+        throw new Error('Function not implemented.')
+      }}
+    >
+      <Form>
+        <FormField
+          id={'input-1'}
+          label={'My custom input'}
+          leftIcon={<Icon icon={'icon-search'} />}
+        >
+          <Field
+            label={'My custom input'}
+            id={'input-1'}
+            name={'input-1'}
+            required={false}
+            className={''}
+          ></Field>
+          <ErrorMessage name={'input-1'} />
+        </FormField>
+      </Form>
+    </Formik>
+  ),
+  args: {}
+}
+
+export const FilterWithInputs: StoryObj<IFormField> = {
+  render: args => (
+    <Formik
+      initialValues={{}}
+      onSubmit={function (
+        values: FormikValues,
+        formikHelpers: FormikHelpers<FormikValues>
+      ): void | Promise<any> {
+        throw new Error('Function not implemented.')
+      }}
+    >
+      <Form>
+        <Flex align="center" style={{ gap: '8px' }}>
+          <FormField
+            id={'input-1'}
+            label={'My custom input'}
+            leftIcon={<Icon icon={'icon-search'} />}
+          >
+            <Field
+              label={'My custom input'}
+              id={'input-1'}
+              name={'input-1'}
+              placeholder="Procurar"
+              onChange={(e: MouseEventHandler) => console.log(e)}
+            ></Field>
+            <ErrorMessage name={'input-1'} />
+          </FormField>
+
+          <FormField
+            id={'event_type'}
+            label={'My custom input'}
+            leftIcon={<Icon icon={'icon-search'} />}
+          >
+            <Field
+              as="select"
+              label={'My custom input'}
+              id={'event_type'}
+              name={'event_type'}
+              placeholder="Procurar"
+              onChange={(e: MouseEventHandler) => console.log(e)}
+            >
+              <option value="text">Evento tipo 1</option>
+              <option value="text2">Evento tipo 2</option>
+              <option value="text3">Evento tipo 2</option>
+            </Field>
+            <ErrorMessage name={'event_type'} />
+          </FormField>
+
+          <FormField
+            id={'date'}
+            label={'Date'}
+            leftIcon={<Icon icon={'icon-search'} />}
+          >
+            <Field
+              type="date"
+              label={'Date'}
+              id={'date'}
+              name={'date'}
+              placeholder="DD/MM/YYYY"
+              onChange={(e: MouseEventHandler) => console.log(e)}
+            ></Field>
+            <ErrorMessage name={'date'} />
+          </FormField>
+        </Flex>
+      </Form>
+    </Formik>
+  ),
+  args: {}
+}
+
+export const DarkStyle: StoryObj<IFormField> = {
+  render: args => (
+    <div className="style-dark color-white bg-primary50">
+      <Formik
+        initialValues={{}}
+        onSubmit={function (
+          values: FormikValues,
+          formikHelpers: FormikHelpers<FormikValues>
+        ): void | Promise<any> {
+          throw new Error('Function not implemented.')
+        }}
+      >
+        <Form>
+          <Flex align="center" style={{ gap: '8px' }}>
+            <FormField
+              id={'input-1'}
+              label={'My custom input'}
+              leftIcon={<Icon icon={'icon-search'} />}
+            >
+              <Field
+                label={'My custom input'}
+                id={'input-1'}
+                name={'input-1'}
+                placeholder="Procurar"
+                onChange={(e: MouseEventHandler) => console.log(e)}
+              ></Field>
+              <ErrorMessage name={'input-1'} />
+            </FormField>
+
+            <FormField
+              id={'event_type'}
+              label={'My custom input'}
+              leftIcon={<Icon icon={'icon-search'} />}
+            >
+              <Field
+                as="select"
+                label={'My custom input'}
+                id={'event_type'}
+                name={'event_type'}
+                placeholder="Procurar"
+                onChange={(e: MouseEventHandler) => console.log(e)}
+              >
+                <option value="text">Evento tipo 1</option>
+                <option value="text2">Evento tipo 2</option>
+                <option value="text3">Evento tipo 2</option>
+              </Field>
+              <ErrorMessage name={'event_type'} />
+            </FormField>
+
+            <FormField
+              id={'date'}
+              label={'Date'}
+              leftIcon={<Icon icon={'icon-search'} />}
+            >
+              <Field
+                type="date"
+                label={'Date'}
+                id={'date'}
+                name={'date'}
+                placeholder="DD/MM/YYYY"
+                onChange={(e: MouseEventHandler) => console.log(e)}
+              ></Field>
+              <ErrorMessage name={'date'} />
+            </FormField>
+
+            <FormField id={'upload'} label={'Upload'}>
+              <Field
+                type="file"
+                label={'Upload'}
+                id={'upload'}
+                name={'upload'}
+                onChange={(e: MouseEventHandler) => console.log(e)}
+              ></Field>
+              <ErrorMessage name={'upload'} />
+            </FormField>
+
+            <FormField
+              id={'checkboxes'}
+              label={'Checkboxes'}
+              isCheckRadio={true}
+            >
+              <CheckRadioField id={`checkbox-1`} label={'Option 1'}>
+                <Field
+                  type={'checkbox'}
+                  id={`checkbox-1`}
+                  name={'checkboxes'}
+                  value={'1'}
+                />
+              </CheckRadioField>
+              <CheckRadioField id={`checkbox-2`} label={'Option 2'}>
+                <Field
+                  type={'checkbox'}
+                  id={`checkbox-2`}
+                  name={'checkboxes'}
+                  value={'2'}
+                />
+              </CheckRadioField>
+              <CheckRadioField id={`checkbox-3`} label={'Option 3'}>
+                <Field
+                  type={'checkbox'}
+                  id={`checkbox-2`}
+                  name={'checkboxes'}
+                  value={'2'}
+                />
+              </CheckRadioField>
+              <ErrorMessage name={'checkboxes'} />
+            </FormField>
+
+            <FormField id={'radios'} label={'Radios'} isCheckRadio={true}>
+              <CheckRadioField id={`radio-1`} label={'Option 1'}>
+                <Field
+                  type={'radio'}
+                  id={`radio-1`}
+                  name={'radios'}
+                  value={'1'}
+                />
+              </CheckRadioField>
+              <CheckRadioField id={`radio-2`} label={'Option 2'}>
+                <Field
+                  type={'radio'}
+                  id={`radio-2`}
+                  name={'radios'}
+                  value={'2'}
+                />
+              </CheckRadioField>
+              <CheckRadioField id={`radio-3`} label={'Option 3'}>
+                <Field
+                  type={'radio'}
+                  id={`radio-3`}
+                  name={'radios'}
+                  value={'3'}
+                />
+              </CheckRadioField>
+              <ErrorMessage name={'radios'} />
+            </FormField>
+
+            <FormField id={'description'} label={'Description'}>
+              <Field
+                as="textarea"
+                id={'description'}
+                name={'description'}
+                placeholder="Your message"
+                onChange={(e: MouseEventHandler) => console.log(e)}
+              ></Field>
+              <ErrorMessage name={'description'} />
+            </FormField>
+          </Flex>
+        </Form>
+      </Formik>
+    </div>
+  ),
+  args: {}
+}
+
+export const All: StoryObj<IFormField> = {
+  render: args => (
+    <Formik
+      initialValues={{}}
+      onSubmit={function (
+        values: FormikValues,
+        formikHelpers: FormikHelpers<FormikValues>
+      ): void | Promise<any> {
+        throw new Error('Function not implemented.')
+      }}
+    >
+      <Form>
+        <Flex align="center" style={{ gap: '8px' }}>
+          <FormField
+            id={'input-1'}
+            label={'My custom input'}
+            leftIcon={<Icon icon={'icon-search'} />}
+          >
+            <Field
+              label={'My custom input'}
+              id={'input-1'}
+              name={'input-1'}
+              placeholder="Procurar"
+              onChange={(e: MouseEventHandler) => console.log(e)}
+            ></Field>
+            <ErrorMessage name={'input-1'} />
+          </FormField>
+
+          <FormField
+            id={'event_type'}
+            label={'My custom input'}
+            leftIcon={<Icon icon={'icon-search'} />}
+          >
+            <Field
+              as="select"
+              label={'My custom input'}
+              id={'event_type'}
+              name={'event_type'}
+              placeholder="Procurar"
+              onChange={(e: MouseEventHandler) => console.log(e)}
+            >
+              <option value="text">Evento tipo 1</option>
+              <option value="text2">Evento tipo 2</option>
+              <option value="text3">Evento tipo 2</option>
+            </Field>
+            <ErrorMessage name={'event_type'} />
+          </FormField>
+
+          <FormField
+            id={'date'}
+            label={'Date'}
+            leftIcon={<Icon icon={'icon-search'} />}
+          >
+            <Field
+              type="date"
+              label={'Date'}
+              id={'date'}
+              name={'date'}
+              placeholder="DD/MM/YYYY"
+              onChange={(e: MouseEventHandler) => console.log(e)}
+            ></Field>
+            <ErrorMessage name={'date'} />
+          </FormField>
+
+          <FormField id={'upload'} label={'Upload'}>
+            <Field
+              type="file"
+              label={'Upload'}
+              id={'upload'}
+              name={'upload'}
+              onChange={(e: MouseEventHandler) => console.log(e)}
+            ></Field>
+            <ErrorMessage name={'upload'} />
+          </FormField>
+
+          <FormField id={'checkboxes'} label={'Checkboxes'} isCheckRadio={true}>
+            <CheckRadioField id={`checkbox-1`} label={'Option 1'}>
+              <Field
+                type={'checkbox'}
+                id={`checkbox-1`}
+                name={'checkboxes'}
+                value={'1'}
+              />
+            </CheckRadioField>
+            <CheckRadioField id={`checkbox-2`} label={'Option 2'}>
+              <Field
+                type={'checkbox'}
+                id={`checkbox-2`}
+                name={'checkboxes'}
+                value={'2'}
+              />
+            </CheckRadioField>
+            <CheckRadioField id={`checkbox-3`} label={'Option 3'}>
+              <Field
+                type={'checkbox'}
+                id={`checkbox-3`}
+                name={'checkboxes'}
+                value={'3'}
+              />
+            </CheckRadioField>
+            <ErrorMessage name={'checkboxes'} />
+          </FormField>
+
+          <FormField id={'radios'} label={'Radios'} isCheckRadio={true}>
+            <CheckRadioField id={`radio-1`} label={'Option 1'}>
+              <Field
+                type={'radio'}
+                id={`radio-1`}
+                name={'radios'}
+                value={'1'}
+              />
+            </CheckRadioField>
+            <CheckRadioField id={`radio-2`} label={'Option 2'}>
+              <Field
+                type={'radio'}
+                id={`radio-2`}
+                name={'radios'}
+                value={'2'}
+              />
+            </CheckRadioField>
+            <CheckRadioField id={`radio-3`} label={'Option 3'}>
+              <Field
+                type={'radio'}
+                id={`radio-3`}
+                name={'radios'}
+                value={'3'}
+              />
+            </CheckRadioField>
+            <ErrorMessage name={'radios'} />
+          </FormField>
+
+          <FormField id={'description'} label={'Description'}>
+            <Field
+              as="textarea"
+              id={'description'}
+              name={'description'}
+              placeholder="Your message"
+              onChange={(e: MouseEventHandler) => console.log(e)}
+            ></Field>
+            <ErrorMessage name={'description'} />
+          </FormField>
+        </Flex>
+      </Form>
+    </Formik>
+  ),
+  args: {}
+}