[WEB-371]: Implemented react-day-picker for date selections (#3679)

* dev: initialize new date picker

* style: selected date focus state

* chore: replace custom date filter modal components

* chore: replaced inbox snooze popover datepicker

* chore: replaced the custom date picker

* style: date range picker designed

* chore: date range picker implemented throughout the platform

* chore: updated tab indices

* chore: range-picker in the issue layouts

* chore: passed due date color

* chore: removed range picker from issue dates

web/components/ui/datepicker.tsx

@@ -1,69 +0,0 @@
-// react-datepicker
-import DatePicker from "react-datepicker";
-import "react-datepicker/dist/react-datepicker.css";
-// helpers
-import { renderFormattedPayloadDate } from "helpers/date-time.helper";
-
-type Props = {
-  renderAs?: "input" | "button";
-  value: Date | string | null | undefined;
-  onChange: (val: string | null) => void;
-  handleOnOpen?: () => void;
-  handleOnClose?: () => void;
-  customInput?: React.ReactNode;
-  placeholder?: string;
-  displayShortForm?: boolean;
-  error?: boolean;
-  noBorder?: boolean;
-  wrapperClassName?: string;
-  className?: string;
-  isClearable?: boolean;
-  disabled?: boolean;
-  maxDate?: Date;
-  minDate?: Date;
-};
-
-export const CustomDatePicker: React.FC<Props> = ({
-  renderAs = "button",
-  value,
-  onChange,
-  handleOnOpen,
-  handleOnClose,
-  placeholder = "Select date",
-  error = false,
-  noBorder = false,
-  wrapperClassName = "",
-  className = "",
-  isClearable = true,
-  disabled = false,
-  customInput,
-  maxDate,
-  minDate,
-}) => (
-  <DatePicker
-    placeholderText={placeholder}
-    selected={value ? new Date(value) : null}
-    onChange={(val) => {
-      if (!val) onChange(null);
-      else onChange(renderFormattedPayloadDate(val));
-    }}
-    onCalendarOpen={handleOnOpen}
-    onCalendarClose={handleOnClose}
-    wrapperClassName={wrapperClassName}
-    customInput={customInput}
-    className={`${
-      renderAs === "input"
-        ? "block px-2 py-2 text-sm focus:outline-none"
-        : renderAs === "button"
-          ? `px-2 py-1 text-xs shadow-sm ${disabled ? "" : "hover:bg-custom-background-80"} duration-300`
-          : ""
-    } ${error ? "border-red-500 bg-red-100" : ""} ${disabled ? "cursor-not-allowed" : "cursor-pointer"} ${
-      noBorder ? "" : "border border-custom-border-200"
-    } w-full rounded-md caret-transparent outline-none ${className}`}
-    dateFormat="MMM dd, yyyy"
-    isClearable={Boolean(isClearable && !disabled)}
-    disabled={disabled}
-    maxDate={maxDate}
-    minDate={minDate}
-  />
-);

web/components/ui/index.ts

@@ -1,10 +1,8 @@
 export * from "./graphs";
-export * from "./datepicker";
 export * from "./empty-space";
 export * from "./labels-list";
 export * from "./multi-level-dropdown";
 export * from "./markdown-to-component";
 export * from "./integration-and-import-export-banner";
-export * from "./range-datepicker";
 export * from "./profile-empty-state";
 export * from "./loader";

web/components/ui/range-datepicker.tsx

@@ -1,65 +0,0 @@
-// react-datepicker
-import DatePicker from "react-datepicker";
-import "react-datepicker/dist/react-datepicker.css";
-// helpers
-import { renderFormattedPayloadDate } from "helpers/date-time.helper";
-
-type Props = {
-  renderAs?: "input" | "button";
-  value: Date | string | null | undefined;
-  onChange: (val: string | null) => void;
-  error?: boolean;
-  className?: string;
-  isClearable?: boolean;
-  disabled?: boolean;
-  startDate: string | null;
-  endDate: string | null;
-  selectsStart?: boolean;
-  selectsEnd?: boolean;
-  minDate?: Date | null | undefined;
-  maxDate?: Date | null | undefined;
-};
-
-export const CustomRangeDatePicker: React.FC<Props> = ({
-  renderAs = "button",
-  value,
-  onChange,
-  error = false,
-  className = "",
-  disabled = false,
-  startDate,
-  endDate,
-  selectsStart = false,
-  selectsEnd = false,
-  minDate = null,
-  maxDate = null,
-}) => (
-  <DatePicker
-    selected={value ? new Date(value) : null}
-    onChange={(val) => {
-      if (!val) onChange(null);
-      else onChange(renderFormattedPayloadDate(val));
-    }}
-    className={`${
-      renderAs === "input"
-        ? "block px-3 py-2 text-sm focus:outline-none"
-        : renderAs === "button"
-          ? `px-3 py-1 text-xs shadow-sm ${
-              disabled ? "" : "hover:bg-custom-background-80"
-            } duration-300 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary`
-          : ""
-    } ${error ? "border-red-500 bg-red-100" : ""} ${
-      disabled ? "cursor-not-allowed" : "cursor-pointer"
-    } w-full rounded-md border border-custom-border-200 bg-transparent caret-transparent ${className}`}
-    dateFormat="dd-MM-yyyy"
-    disabled={disabled}
-    selectsStart={selectsStart}
-    selectsEnd={selectsEnd}
-    startDate={startDate ? new Date(startDate) : new Date()}
-    endDate={endDate ? new Date(endDate) : new Date()}
-    minDate={minDate}
-    maxDate={maxDate}
-    shouldCloseOnSelect
-    inline
-  />
-);