feat(formiks): add FormikDateRangePicker (#15)

* build(typescript): forbid types used as values

* feat(formiks): add FormikDateRangePicker

src/formiks/FormikDateRangePicker.tsx

@@ -0,0 +1,21 @@
+import { useField } from 'formik'
+import { useEffect } from 'react'
+
+import { DateRangePicker } from '../fields/DateRangePicker'
+
+import type { DateRangePickerProps } from '../fields/DateRangePicker'
+
+export type FormikDateRangePickerProps = Omit<DateRangePickerProps, 'onChange'> & {
+  name: string
+}
+export function FormikDateRangePicker({ name, ...originalProps }: FormikDateRangePickerProps) {
+  const [, , helpers] = useField(name)
+  const { setValue } = helpers
+
+  // We don't include `setValues` in  `useEffect()` dependencies
+  // both because it is useless and it will trigger infinite hook calls
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => () => setValue(undefined), [])
+
+  return <DateRangePicker onChange={setValue} {...originalProps} />
+}

src/index.ts

@@ -5,6 +5,7 @@ export { DateRangePicker } from './fields/DateRangePicker'
 export { DatePicker } from './fields/DatePicker'
 export { Select } from './fields/Select'
 
+export { FormikDateRangePicker } from './formiks/FormikDateRangePicker'
 export { FormikEffect } from './formiks/FormikEffect'
 export { FormikSelect } from './formiks/FormikSelect'
 
@@ -16,5 +17,6 @@ export type { DateRangePickerProps } from './fields/DateRangePicker'
 export type { DatePickerProps } from './fields/DatePicker'
 export type { SelectProps } from './fields/Select'
 
+export type { FormikDateRangePickerProps } from './formiks/FormikDateRangePicker'
 export type { FormikEffectProps } from './formiks/FormikEffect'
 export type { FormikSelectProps } from './formiks/FormikSelect'

stories/formiks/FormikDateRangePicker.stories.tsx

@@ -0,0 +1,46 @@
+import { Formik } from 'formik'
+import { useState } from 'react'
+
+import { FormikEffect, FormikDateRangePicker } from '../../src'
+import { Output } from '../_components/Output'
+import { noop } from '../_utils/noop'
+
+import type { FormikDateRangePickerProps } from '../../src'
+import type { DateRange } from '../../src/types'
+
+export default {
+  title: 'Formiks/FormikDateRangePicker',
+  component: FormikDateRangePicker,
+
+  argTypes: {},
+
+  args: {
+    isHistorical: false,
+    isLabelHidden: false,
+    label: 'FormikDateRangePicker Label',
+    name: 'myDateRange'
+  }
+}
+
+export const _FormikDateRangePicker = (props: FormikDateRangePickerProps) => {
+  const [outputValue, setOutputValue] = useState<
+    | {
+        myDateRange?: DateRange
+      }
+    | '∅'
+  >('∅')
+
+  return (
+    <>
+      <Formik initialValues={{}} onSubmit={noop}>
+        <>
+          <FormikEffect onChange={setOutputValue} />
+
+          <FormikDateRangePicker {...props} />
+        </>
+      </Formik>
+
+      {outputValue !== '∅' && <Output value={outputValue} />}
+    </>
+  )
+}

tsconfig.json

@@ -5,6 +5,7 @@
     "declaration": true,
     "declarationDir": "./dist",
     "forceConsistentCasingInFileNames": true,
+    "importsNotUsedAsValues": "error",
     "isolatedModules": true,
     "jsx": "react-jsx",
     "lib": ["DOM", "DOM.Iterable", "ES2021"],