feat(formiks): add FormikCheckbox (#22)

src/formiks/FormikCheckbox.tsx

@@ -0,0 +1,26 @@
+import { useField } from 'formik'
+import { useCallback, useMemo } from 'react'
+
+import { Checkbox } from '../fields/Checkbox'
+
+import type { CheckboxProps } from '../fields/Checkbox'
+
+export type FormikCheckboxProps = Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'onChange'> & {
+  name: string
+}
+export function FormikCheckbox({ name, ...originalProps }: FormikCheckboxProps) {
+  const [field, , helpers] = useField(name)
+
+  const value = useMemo(() => field.value, [field.value])
+  const setValue = useMemo(() => helpers.setValue, [helpers.setValue])
+
+  // We don't include `setValues` in  `useCallback()` dependencok calls
+  // both because it is useless and it will trigger infinite ho
+  const handleChange = useCallback((isChecked: boolean) => {
+    setValue(isChecked)
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return <Checkbox defaultChecked={value} name={name} onChange={handleChange} {...originalProps} />
+}

src/index.ts

@@ -6,7 +6,7 @@ export { DateRangePicker } from './fields/DateRangePicker'
 export { DatePicker } from './fields/DatePicker'
 export { Select } from './fields/Select'
 
-// export { FormikCheckbox } from './formiks/FormikCheckbox'
+export { FormikCheckbox } from './formiks/FormikCheckbox'
 export { FormikDatePicker } from './formiks/FormikDatePicker'
 export { FormikDateRangePicker } from './formiks/FormikDateRangePicker'
 export { FormikEffect } from './formiks/FormikEffect'
@@ -21,7 +21,7 @@ export type { DateRangePickerProps } from './fields/DateRangePicker'
 export type { DatePickerProps } from './fields/DatePicker'
 export type { SelectProps } from './fields/Select'
 
-// export type { FormikCheckboxProps } from './formiks/FormikCheckbox'
+export type { FormikCheckboxProps } from './formiks/FormikCheckbox'
 export type { FormikDatePickerProps } from './formiks/FormikDatePicker'
 export type { FormikDateRangePickerProps } from './formiks/FormikDateRangePicker'
 export type { FormikEffectProps } from './formiks/FormikEffect'

stories/formiks/FormikCheckbox.stories.tsx

@@ -0,0 +1,45 @@
+import { Formik } from 'formik'
+import { useState } from 'react'
+
+import { FormikEffect, FormikCheckbox } from '../../src'
+import { Output } from '../_components/Output'
+import { noop } from '../_utils/noop'
+
+import type { FormikCheckboxProps } from '../../src'
+
+const args: FormikCheckboxProps = {
+  label: 'Check me',
+  name: 'myCheckbox'
+}
+
+export default {
+  title: 'Formiks/FormikCheckbox',
+  component: FormikCheckbox,
+
+  argTypes: {},
+
+  args
+}
+
+export const _FormikCheckbox = (props: FormikCheckboxProps) => {
+  const [outputValue, setOutputValue] = useState<
+    | {
+        myCheckbox?: boolean
+      }
+    | '∅'
+  >('∅')
+
+  return (
+    <>
+      <Formik initialValues={{}} onSubmit={noop}>
+        <>
+          <FormikEffect onChange={setOutputValue} />
+
+          <FormikCheckbox {...props} />
+        </>
+      </Formik>
+
+      {outputValue !== '∅' && <Output value={outputValue} />}
+    </>
+  )
+}