Add checkbox common component

Author: Antonio Contreras LEMONCODE

src/common/components/form/checkbox/checkbox.component.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { useField } from 'formik';
+import Checkbox, { CheckboxProps } from '@material-ui/core/Checkbox';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormControl from '@material-ui/core/FormControl';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import * as classes from './checkbox.styles';
+
+interface Props extends CheckboxProps {
+  label?: string;
+  labelPlacement?: 'end' | 'start' | 'top' | 'bottom';
+  error?: boolean;
+  helperText?: string;
+}
+
+export const CheckboxComponent: React.FunctionComponent<Props> = props => {
+  const {
+    label,
+    labelPlacement,
+    error,
+    name,
+    checked,
+    onChange,
+    onBlur,
+    ...checkboxProps
+  } = props;
+  const [field, meta] = Boolean(name) ? useField(name) : [];
+  const hasError = error || Boolean(meta && meta.touched && meta.error);
+  const helperText = Boolean(field) ? meta?.error : props.helperText;
+
+  return (
+    <FormControl
+      className={classes.root}
+      error={hasError}
+      fullWidth={true}
+      margin="normal"
+    >
+      <FormControlLabel
+        control={
+          <Checkbox
+            {...checkboxProps}
+            name={name}
+            checked={checked || field?.value}
+            onChange={onChange || field?.onChange}
+            onBlur={onBlur || field?.onBlur}
+          />
+        }
+        label={label}
+        labelPlacement={labelPlacement}
+      />
+
+      {hasError && <FormHelperText>{helperText}</FormHelperText>}
+    </FormControl>
+  );
+};

src/common/components/form/checkbox/checkbox.styles.ts

@@ -0,0 +1,6 @@
+import { css } from 'emotion';
+import { theme } from 'core/theme';
+
+export const root = css`
+  justify-content: flex-end;
+`;

src/common/components/form/checkbox/index.ts

@@ -0,0 +1 @@
+export * from './checkbox.component';

src/common/components/form/index.ts

@@ -1,2 +1,3 @@
 export * from './form.component';
 export * from './text-field.component';
+export * from './checkbox';