feat: add DatePickerField.tsx

src/Fields/DatePickerField.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import {
+  useController,
+  FieldPath,
+  FieldValues,
+  UseControllerProps,
+} from 'react-hook-form';
+
+import { DatePicker, DatePickerProps } from '../DatePicker';
+
+import { useFieldContext } from './FieldProvider';
+import { FieldWrapper, FieldWrapperProps } from './FieldWrapper';
+
+type DatePickerFieldProps<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues>,
+> = UseControllerProps<TFieldValues, TName> &
+  Pick<FieldWrapperProps<TFieldValues, TName>, 'formItem'> & {
+    component?: DatePickerProps;
+  };
+
+export function DatePickerField<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  formItem,
+  component,
+  ...controller
+}: DatePickerFieldProps<TFieldValues, TName>) {
+  const { field } = useController<TFieldValues, TName>(controller);
+
+  const { disabled } = useFieldContext();
+
+  return (
+    <FieldWrapper controller={controller} formItem={formItem}>
+      <DatePicker disabled={disabled} {...field} {...component} />
+    </FieldWrapper>
+  );
+}

src/Fields/index.stories.tsx

@@ -11,6 +11,7 @@ import { Space } from '../Space';
 import { AutocompleteField } from './AutocompleteField';
 import { CheckboxField } from './CheckboxField';
 import { CheckboxGroupField } from './CheckboxGroupField';
+import { DatePickerField } from './DatePickerField';
 import { DateRangePickerField } from './DateRangePickerField';
 import { FieldProvider, FieldProviderProps } from './FieldProvider';
 import { InputField } from './InputField';
@@ -36,6 +37,7 @@ type FormType = {
   switch: boolean;
   text_area: string;
   date_range: string;
+  date_picker: string;
 };
 
 export const Default: Story<{
@@ -219,6 +221,12 @@ function AllFields() {
           label: 'Switch',
         }}
       />
+      <DatePickerField
+        name="date_picker"
+        control={formMethods.control}
+        formItem={{ label: 'DatePicker' }}
+        component={{ placeholder: 'Datum wählen' }}
+      />
       <DateRangePickerField
         name="date_range"
         control={formMethods.control}

src/Fields/index.ts

@@ -1,5 +1,6 @@
 export * from './AutocompleteField';
 export * from './CheckboxField';
+export * from './DatePickerField';
 export * from './DateRangePickerField';
 export * from './CheckboxGroupField';
 export * from './FieldProvider';