feat(RangeDatePickerV2): new variant of component

packages/react-components/src/components/DatePicker/DatePicker.module.scss

@@ -29,6 +29,10 @@ $base-class: 'date-picker';
       background-color: var(--surface-primary-hover);
       cursor: pointer;
     }
+
+    button {
+      font-size: 13px;
+    }
   }
 
   &__day-button {

packages/react-components/src/components/DatePicker/RangeDatePicker.tsx

@@ -26,23 +26,42 @@ export const RangeDatePicker = ({
   initialSelectedItemKey,
   initialFromDate,
   initialToDate,
+  customTempFromDate,
+  customTempToDate,
   toMonth,
+  today,
   onChange,
+  onRangeSelect,
   onSelect,
+  onCustomTempDateRangeChange,
   children,
 }: IRangeDatePickerProps): ReactElement => {
   const prevSelectedItem = useRef<string | null>(
     initialSelectedItemKey || null
   );
   const [state, dispatch] = useRangeDatePickerState({
-    options,
-    initialSelectedItemKey,
     initialFromDate,
     initialToDate,
     toMonth,
-    onChange,
+    options,
+    initialSelectedItemKey,
+    customTempFromDate,
+    customTempToDate,
     children,
-  });
+    onChange,
+    onRangeSelect,
+  } as IRangeDatePickerProps);
+
+  // handle custom temp date range change (range date picker v2)
+  useEffect(() => {
+    dispatch({
+      type: RangeDatePickerAction.SET_CUSTOM_TEMP_RANGE,
+      payload: {
+        customTempFrom: customTempFromDate,
+        customTempTo: customTempToDate,
+      },
+    });
+  }, [customTempFromDate, customTempToDate]);
 
   // handle initialFromDate change
   useEffect(() => {
@@ -94,16 +113,29 @@ export const RangeDatePicker = ({
     });
   }, [state.from, state.to, state.selectedItem, options, onChange]);
 
+  // call onRangeSelect when valid dates selected in new date range picker v2
+  useEffect(() => {
+    const { from, to } = state;
+    if (!(from && to) || !onRangeSelect) {
+      return;
+    }
+
+    onRangeSelect?.({
+      from: from,
+      to: to,
+    });
+  }, [state.from, state.to, onRangeSelect]);
+
   // handle selected option change
   useEffect(() => {
     const { selectedItem } = state;
 
-    if (selectedItem === prevSelectedItem.current) {
+    if (selectedItem === prevSelectedItem.current || !options) {
       return;
     }
 
     if (!selectedItem) {
-      onChange(null);
+      onChange?.(null);
 
       return;
     }
@@ -122,9 +154,16 @@ export const RangeDatePicker = ({
       {}
     );
 
-    onChange(optionsHash[selectedItem]);
+    onChange?.(optionsHash[selectedItem]);
   }, [onChange, state.selectedItem, options]);
 
+  useEffect(() => {
+    onCustomTempDateRangeChange?.({
+      from: state.temporaryFrom,
+      to: state.temporaryTo,
+    });
+  }, [state.temporaryFrom, state.temporaryTo]);
+
   const handleOnSelect = useCallback(() => {
     const { from, to } = state;
 
@@ -240,8 +279,16 @@ export const RangeDatePicker = ({
   }, []);
 
   const getRangeDatePickerApi = (): IRangeDatePickerChildrenPayload => {
-    const { currentMonth, from, selectedItem, temporaryFrom, temporaryTo, to } =
-      state;
+    const {
+      currentMonth,
+      from,
+      selectedItem,
+      temporaryFrom,
+      temporaryTo,
+      to,
+      customTempFrom,
+      customTempTo,
+    } = state;
     const selectedOption = useMemo(() => {
       return getSelectedOption(selectedItem, options);
     }, [options, selectedItem]);
@@ -250,6 +297,14 @@ export const RangeDatePicker = ({
       return { from: temporaryFrom || from, to: temporaryTo };
     }, [from, temporaryFrom, temporaryTo]);
 
+    const customSelectedDays = useMemo(() => {
+      if (!customTempFrom || !customTempTo) {
+        return undefined;
+      }
+
+      return { from: customTempFrom, to: customTempTo };
+    }, [customTempFrom, customTempTo]);
+
     const disabledDays = useMemo(() => {
       return toMonth ? { after: toMonth } : void 0;
     }, [toMonth]);
@@ -268,9 +323,10 @@ export const RangeDatePicker = ({
         month: currentMonth,
         numberOfMonths: 2,
         onDayClick: handleDayClick,
-        selected: selectedDays,
+        selected: customSelectedDays || selectedDays,
         endMonth: toMonth,
         disabled: disabledDays,
+        today,
         onDayMouseEnter: handleDayMouseEnter,
         onMonthChange: handleMonthChange,
         onSelect: handleOnSelect,

packages/react-components/src/components/DatePicker/helpers.ts

@@ -43,9 +43,9 @@ export const calculateDatePickerMonth = (
 
 export const getSelectedOption = (
   itemId: string | null,
-  options: IRangeDatePickerOption[]
+  options?: IRangeDatePickerOption[]
 ): IRangeDatePickerOption | undefined => {
-  const selectedOption = options.find((item) => {
+  const selectedOption = options?.find((item) => {
     return item.id === itemId;
   });
 

packages/react-components/src/components/DatePicker/hooks.ts

@@ -27,6 +27,8 @@ export const useRangeDatePickerState = (
     to: undefined,
     temporaryTo: undefined,
     currentMonth: initialCurrentMonth,
+    customTempFrom: undefined,
+    customTempTo: undefined,
   };
 
   const initialState = {
@@ -62,7 +64,10 @@ export const useRangeDatePickerState = (
           ...state,
           from: action.payload.date,
           to: void 0,
+          temporaryFrom: void 0,
           temporaryTo: void 0,
+          customTempFrom: void 0,
+          customTempTo: void 0,
         };
       case RangeDatePickerAction.SELECT_SECOND_DAY_AS_FROM:
         return {
@@ -92,6 +97,12 @@ export const useRangeDatePickerState = (
           ...state,
           to: action.payload.date,
         };
+      case RangeDatePickerAction.SET_CUSTOM_TEMP_RANGE:
+        return {
+          ...state,
+          customTempFrom: action.payload.customTempFrom,
+          customTempTo: action.payload.customTempTo,
+        };
       default:
         return state;
     }

packages/react-components/src/components/DatePicker/types.ts

@@ -23,6 +23,7 @@ export enum RangeDatePickerAction {
   SELECT_SECOND_DAY_AS_FROM = 'SELECT_SECOND_DAY_AS_FROM',
   SELECT_SECOND_DAY_AS_TO = 'SELECT_SECOND_DAY_AS_TO',
   CURRENT_MONTH_CHANGE = 'CURRENT_MONTH_CHANGE',
+  SET_CUSTOM_TEMP_RANGE = 'SET_CUSTOM_TEMP_RANGE',
 }
 
 export type IRangeDatePickerReducerAction =
@@ -49,6 +50,13 @@ export type IRangeDatePickerReducerAction =
       payload: {
         date?: Date;
       };
+    }
+  | {
+      type: RangeDatePickerAction.SET_CUSTOM_TEMP_RANGE;
+      payload: {
+        customTempFrom?: Date;
+        customTempTo?: Date;
+      };
     };
 
 export interface IRangeDatePickerState {
@@ -58,6 +66,8 @@ export interface IRangeDatePickerState {
   temporaryFrom?: Date;
   temporaryTo?: Date;
   currentMonth: Date;
+  customTempFrom?: Date;
+  customTempTo?: Date;
 }
 
 export type RangeDatePickerReducer = Reducer<
@@ -88,13 +98,34 @@ export interface IRangeDatePickerChildrenPayload {
   selectedOption?: IRangeDatePickerOption;
 }
 
-export interface IRangeDatePickerProps {
+export interface IRangeDatePickerV1CoreProps {
+  onChange: (selected: IRangeDatePickerOption | null) => void;
   options: IRangeDatePickerOption[];
   initialSelectedItemKey?: string;
+  onRangeSelect?: never;
+  onCustomTempDateRangeChange?: never;
+  customTempFromDate?: never;
+  customTempToDate?: never;
+}
+
+export interface IRangeDatePickerV2CoreProps {
+  onRangeSelect: (selected: DateRange | null) => void;
+  onCustomTempDateRangeChange: (date: DateRange | undefined) => void;
+  customTempFromDate?: Date;
+  customTempToDate?: Date;
+  options?: never;
+  onChange?: never;
+  initialSelectedItemKey?: never;
+}
+
+export interface IRangeDatePickerCoreProps {
+  today?: Date;
   initialFromDate?: Date;
   initialToDate?: Date;
   toMonth?: Date;
-  onChange: (selected: IRangeDatePickerOption | null) => void;
   onSelect?: (selected: DateRange | null) => void;
   children(payload: IRangeDatePickerChildrenPayload): ReactElement;
 }
+
+export type IRangeDatePickerProps = IRangeDatePickerCoreProps &
+  (IRangeDatePickerV1CoreProps | IRangeDatePickerV2CoreProps);

packages/react-components/src/components/RangeDatePickerV2/RangeDatePickerV2.mdx

@@ -0,0 +1,31 @@
+import { Canvas, ArgTypes, Meta, Title } from '@storybook/blocks';
+
+import * as RangeDatePickerV2 from './RangeDatePickerV2.stories';
+
+<Meta of={RangeDatePickerV2} />
+
+<Title>RangeDatePickerV2</Title>
+
+[Intro](#Intro) | [Component API](#ComponentAPI)
+
+## Intro <a id="Intro" />
+
+RangeDatePickerV2 is a component that allows you to select a date range using a calendar by selecting the start and end date, or using predefined options. The whole thing is displayed after interacting with a trigger that displays the selected dates, which makes it much easier to use the component in places where every free space counts.
+
+<Canvas of={RangeDatePickerV2.Default} sourceState="none" />
+
+#### Example implementation
+
+```jsx
+import { RangeDatePickerV2 } from '@livechat/design-system-react-components';
+
+<RangeDatePickerV2
+  initialFromDate={new Date()}
+  initialToDate={new Date()}
+  onRangeSelect={({ from, to }) => {}}
+/>
+```
+
+## Component API <a id="ComponentAPI" />
+
+<ArgTypes of={RangeDatePickerV2.Default} sort="requiredFirst" />