(PC-11678) create datepicker component for Formik

src/ui-kit/form/DatePicker/DatePicker.stories.tsx

@@ -0,0 +1,31 @@
+import { action } from '@storybook/addon-actions'
+import { Story } from '@storybook/react'
+import { Formik } from 'formik'
+import React from 'react'
+
+import DatePicker from './DatePicker'
+
+export default {
+  title: 'ui-kit/DatePicker',
+  component: DatePicker,
+}
+
+const Template: Story<{label?: string}> = ({ label }) => (
+  <Formik
+    initialValues={{ date: new Date().toISOString().split('T')[0] }}
+    onSubmit={action('onSubmit')}
+  >
+    {({ getFieldProps }) => {
+      return (
+        <DatePicker
+          {...getFieldProps('date')}
+          label={label}
+          name='date'
+        />
+      )}}
+  </Formik>
+)
+
+export const WithoutLabel = Template.bind({})
+export const WithLabel = Template.bind({})
+WithLabel.args = { label: 'Date' }

src/ui-kit/form/DatePicker/DatePicker.tsx

@@ -0,0 +1,42 @@
+import { useField } from 'formik'
+import React from 'react'
+
+interface DatePickerProps {
+    name: string;
+    className?: string;
+    disabled?: boolean;
+    label?: string;
+}
+
+const DatePicker = ({
+  name,
+  className,
+  disabled,
+  label,
+}: DatePickerProps): JSX.Element => {
+  const [field, meta] = useField({ name })
+
+  return (
+    <>
+      <label>
+        {label}
+        <input
+          {...field}
+          className={className}
+          disabled={disabled}
+          type="date"
+        />
+      </label>
+      {
+        meta.touched && meta.error ? (
+          <div className="error">
+            {meta.error}
+          </div>
+        )
+          : null
+      }
+    </>
+  )
+}
+
+export default DatePicker

src/ui-kit/form/DatePicker/index.ts

@@ -0,0 +1 @@
+export { default } from './DatePicker'

src/ui-kit/form/index.ts

@@ -3,3 +3,4 @@ export { default as TextArea } from './TextArea'
 export { default as Select } from './Select'
 export { default as RadioButton } from './RadioButton'
 export { default as Checkbox } from './Checkbox'
+export { default as DatePicker } from './DatePicker'