oddsgate-ds 1.0.2

package/src/components/atoms/FormField/CheckRadioField/CheckRadioField.theme.ts

@@ -0,0 +1,126 @@
+import styled, { css } from 'styled-components';
+
+import { ICheckRadioField } from './CheckRadioField.interface';
+import { colors } from '@/styles/variables';
+import { pxToRem } from './../../../../styles/variables';
+
+export const StyledCheckRadioField = styled.div<ICheckRadioField>`
+  position: relative;
+
+  input[type="checkbox"],
+  input[type="radio"] {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+
+    cursor: pointer;
+    z-index: 5;
+
+    &+label {
+      display: inline-block;
+      vertical-align: middle;
+
+      position: relative;
+      text-align: left;
+      margin-bottom: 0;
+      padding: 5px 0;
+      padding-left: ${pxToRem(34)};
+
+      &:before,
+      &:after {
+        content: "";
+        position: absolute;
+        top: 50%;
+
+        cursor: pointer;
+
+        transition: all 0.3s linear;
+      }
+
+      &:before {
+        left: 0px;
+        margin-top: ${pxToRem(-12)};
+        width: ${pxToRem(24)};
+        height: ${pxToRem(24)};
+
+        background: transparent;
+        border: 1px solid currentColor;
+        border-radius: 4px;
+      }
+
+      &:after {
+        opacity: 0;
+        visibility: hidden;
+      }
+    }
+  }
+
+  & input[type="checkbox"]+label {
+    &:after {
+      left: ${pxToRem(5)};
+      margin-top: ${pxToRem(-4)};
+      width: ${pxToRem(14)};
+      height: ${pxToRem(6)};
+
+      border: 2px solid ${colors.white};
+      border-top: none;
+      border-right: none;
+
+      transform: rotate(-45deg);
+    }
+  }
+
+  & input[type="radio"]+label {
+    &:before,
+    &:after {
+      border-radius: 50%;
+    }
+
+    &::after {
+      background: ${colors.white};
+
+      width: ${pxToRem(13)};
+      height: ${pxToRem(13)};
+
+      margin-top: ${pxToRem(-6)};
+      left: ${pxToRem(5.5)};
+    }
+  }
+
+  & input[type="checkbox"]:checked+label::before,
+  & input[type="radio"]:checked+label::before {
+    border-color: ${colors.primary70};
+    background: ${colors.primary70};
+  }
+
+  & input[type="checkbox"]:checked+label::after,
+  & input[type="radio"]:checked+label::after {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .style-dark & {
+    & input[type="checkbox"]+label {
+      &:after {
+        border-color: ${colors.primary70};
+      }
+    }
+
+    & input[type="radio"]+label {
+      &::after {
+        background: ${colors.primary70};
+      }
+    }
+    & input[type="checkbox"]:checked+label::before,
+    & input[type="radio"]:checked+label::before {
+      border-color: ${colors.white};
+      background: ${colors.white};
+    }
+  }
+
+`;

package/src/components/atoms/FormField/CheckRadioField/index.ts

@@ -0,0 +1 @@
+export { default } from "./CheckRadioField.component";

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

@@ -0,0 +1,37 @@
+import React, { Children, useMemo } from 'react'
+
+import { IFormField } from './FormField.interface'
+import { StyledFieldContainer } from './FormField.theme'
+import { getId } from '@/helpers/uuid'
+
+export const FormField = ({
+  id,
+  label,
+  leftIcon,
+  rightIcon,
+  isCheckRadio,
+  className,
+  children,
+  ...props
+}: IFormField) => {
+  const itemID = id ? id : useMemo(() => getId(), [])
+  return (
+    <StyledFieldContainer isCheckRadio={isCheckRadio} className={className}>
+      {label && (
+        <label
+          htmlFor={itemID}
+          className="d-blocks captions text-uppercase mb-2"
+        >
+          {label}
+        </label>
+      )}
+      <div>
+        {leftIcon && leftIcon}
+        {children}
+        {rightIcon && rightIcon}
+      </div>
+    </StyledFieldContainer>
+  )
+}
+
+export default FormField

package/src/components/atoms/FormField/FormField.interface.ts

@@ -0,0 +1,9 @@
+export interface IFormField {
+  id?: string
+  label?: string
+  leftIcon?: React.ReactNode | React.ReactNode[]
+  rightIcon?: React.ReactNode | React.ReactNode[]
+  isCheckRadio?: boolean
+  children?: React.ReactNode
+  className?: string
+}

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

@@ -0,0 +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-primary70">
+      <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: {}
+}