feat(form): add form field components and configuration updates

refactor(knowledge): restructure configuration components to use common items

src/components/FormField/DatePickerFormField.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { useFormContext, Controller } from 'react-hook-form';
+import dayjs, { Dayjs } from 'dayjs';
+
+export interface DatePickerFormFieldProps {
+  name: string;
+  label: string;
+  defaultValue?: string | Date | Dayjs | null;
+  required?: boolean;
+  disabled?: boolean;
+  helperText?: string;
+  minDate?: string | Date | Dayjs;
+  maxDate?: string | Date | Dayjs;
+  format?: string;
+}
+
+export function DatePickerFormField({
+  name,
+  label,
+  defaultValue = null,
+  required = false,
+  disabled = false,
+  helperText,
+  minDate,
+  maxDate,
+  format = 'YYYY-MM-DD',
+}: DatePickerFormFieldProps) {
+  const { control, formState: { errors } } = useFormContext();
+  const error = errors[name];
+
+  const datePicker = (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Controller
+        name={name}
+        control={control}
+        defaultValue={defaultValue ? dayjs(defaultValue) : null}
+        render={({ field }) => (
+          <DatePicker
+            {...field}
+            disabled={disabled}
+            minDate={minDate ? dayjs(minDate) : undefined}
+            maxDate={maxDate ? dayjs(maxDate) : undefined}
+            format={format}
+            slotProps={{
+              textField: {
+                required,
+                error: !!error,
+                helperText: error?.message as string || helperText,
+                fullWidth: true,
+                variant: 'outlined',
+              },
+            }}
+          />
+        )}
+      />
+    </LocalizationProvider>
+  );
+
+  return datePicker;
+}