frontend: DateTime component upgrade (#3034)

Adding error state and min and max dates

<img width="486" alt="Screenshot 2024-06-04 at 12 23 32 p m"
src="https://github.com/lyft/clutch/assets/25833665/15775a71-356f-4490-bd4b-35923497bea5">

<img width="488" alt="Screenshot 2024-06-04 at 12 23 47 p m"
src="https://github.com/lyft/clutch/assets/25833665/0f06075e-5517-4743-8452-1765c145134c">

frontend/packages/core/src/Input/date-time.tsx

@@ -19,14 +19,29 @@ const PaddedTextField = styled(TextField)({
 });
 
 export interface DateTimePickerProps
-  extends Pick<MuiDateTimePickerProps<Date, Date>, "disabled" | "value" | "onChange" | "label"> {
+  extends Pick<
+    MuiDateTimePickerProps<Date, Date>,
+    "disabled" | "value" | "onChange" | "label" | "minDate" | "maxDate"
+  > {
   allowEmpty?: boolean;
+  error?: boolean;
+  helperText?: string;
 }
 
-const DateTimePicker = ({ onChange, allowEmpty = false, ...props }: DateTimePickerProps) => (
+const DateTimePicker = ({
+  onChange,
+  allowEmpty = false,
+  error = false,
+  helperText = "",
+  minDate = null,
+  maxDate = null,
+  ...props
+}: DateTimePickerProps) => (
   <LocalizationProvider dateAdapter={AdapterDayjs}>
     <MuiDateTimePicker
-      renderInput={inputProps => <PaddedTextField {...inputProps} />}
+      renderInput={inputProps => (
+        <PaddedTextField {...inputProps} error={error} helperText={helperText} />
+      )}
       onChange={(value: Dayjs | null) => {
         const isDateValid = value && value.isValid();
         if (allowEmpty || (!allowEmpty && isDateValid)) {

frontend/packages/core/src/Input/stories/date-time.stories.tsx

@@ -40,3 +40,25 @@ Disabled.args = {
   ...PrimaryDemo.args,
   disabled: true,
 } as DateTimePickerProps;
+
+export const WithError = Template.bind({});
+WithError.args = {
+  ...PrimaryDemo.args,
+  error: true,
+  helperText: "error in the field",
+  onChange: (newValue: unknown) => null,
+} as DateTimePickerProps;
+
+export const WithMinDate = Template.bind({});
+WithMinDate.args = {
+  ...PrimaryDemo.args,
+  minDate: new Date(),
+  onChange: (newValue: unknown) => null,
+} as DateTimePickerProps;
+
+export const WithMaxDate = Template.bind({});
+WithMaxDate.args = {
+  ...PrimaryDemo.args,
+  maxDate: new Date(),
+  onChange: (newValue: unknown) => null,
+} as DateTimePickerProps;