@servicetitan/marketing-ui 0.5.0 → 0.8.0

package/src/components/ui/date-range-picker/date-range-picker.tsx

@@ -0,0 +1,118 @@
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { observer } from 'mobx-react';
+import { BodyText, Form, Stack } from '@servicetitan/design-system';
+import { DateRange, DateRangePickerOptionsStateType } from '../../../utils/date';
+import * as Styles from './date-range-picker.module.less';
+
+export interface DateRangePickerProps<OptionKeys extends string> {
+    state: DateRangePickerOptionsStateType<OptionKeys>;
+    onChange?: DateRangePickerOptionsStateType<OptionKeys>['onChange'];
+    compare?: boolean;
+    disabled?: boolean;
+}
+
+const convertDateRange = (val?: DateRange, backward?: boolean): DateRange | undefined =>
+    val
+        ? {
+              start: val.start,
+              end: new Date(
+                  val.end.getFullYear(),
+                  val.end.getMonth(),
+                  val.end.getDate() + (backward ? 1 : -1)
+              ),
+          }
+        : undefined;
+
+const formatDate = (dt: Date) =>
+    dt.toLocaleString('en-US', {
+        day: 'numeric',
+        year: 'numeric',
+        month: 'short',
+    });
+
+const formatDateRange = (range: DateRange) =>
+    `${formatDate(range.start)} - ${formatDate(range.end)}`;
+
+export const DateRangePicker = observer(
+    <OptionKeys extends string>({
+        compare,
+        disabled,
+        state,
+        onChange,
+    }: DateRangePickerProps<OptionKeys>) => {
+        const selectedOption = state.selectedOption;
+
+        /*
+         * DateRangePickerOptions uses exclusive date ranges for end date (start >= dt > end)
+         * but anvil's DateRangePicker uses inclusive dates (with end set to endOfDay),
+         * so we performing some transformations here
+         * convertDateRange (predefined options, value and onChange)
+         */
+        const onPickerChange: DateRangePickerOptionsStateType<OptionKeys>['onChange'] = val => {
+            const newVal = convertDateRange(val, true);
+
+            if (onChange) {
+                onChange(newVal);
+            } else {
+                state.onChange(newVal);
+            }
+        };
+        const options = useMemo(
+            () =>
+                state.options.options.map(o => ({
+                    text: o.text,
+                    value: convertDateRange(o.value),
+                    selected: o.key === selectedOption?.key,
+                })),
+            [selectedOption, state.options.options]
+        );
+        const value = useMemo(() => convertDateRange(state.value), [state.value]);
+        const compareValue = useMemo(
+            () =>
+                state.value && compare
+                    ? convertDateRange(state.options.getComparisonDateRange(state.value))
+                    : undefined,
+            [compare, state.value, state.options]
+        );
+        const textValue = selectedOption
+            ? selectedOption.text
+            : compare || !value
+            ? 'Custom Date Range'
+            : formatDateRange(value);
+
+        return (
+            <Stack>
+                <Stack.Item className={Styles.pickerContainer}>
+                    <Form.DateRangePicker
+                        onChange={onPickerChange}
+                        options={options}
+                        value={value}
+                        required
+                        disabled={disabled}
+                        label={
+                            <div
+                                className={classNames(
+                                    Styles.pickerValue,
+                                    'd-f flex-column justify-content-center t-truncate cursor-pointer'
+                                )}
+                            >
+                                {textValue}
+                            </div>
+                        }
+                    />
+                </Stack.Item>
+                {!!compare && (
+                    <Stack direction="column" justifyContent="center" className="m-l-2">
+                        <BodyText>{value ? formatDateRange(value) : ''}</BodyText>
+                        {!!compareValue && (
+                            <BodyText size="xsmall" subdued>
+                                vs. {formatDateRange(compareValue)}
+                            </BodyText>
+                        )}
+                    </Stack>
+                )}
+            </Stack>
+        );
+    }
+);

package/src/index.ts

@@ -2,12 +2,13 @@ export * from './components/stat/stat-card';
 export * from './components/ads/ads-stat';
 export * from './components/ui/centered-spinner';
 export * from './components/ui/line-text';
+export * from './components/image-cropper/image-cropper';
 
 export * from './utils/ads-texts';
 export * from './utils/formatters';
 export * from './utils/string-case';
 export * from './utils/use-client-rect';
-export * from './utils/use-init-effect';
+export * from './utils/invariable-hooks';
 export * from './utils/history';
 export * from './utils/helpers';
 export * from './utils/param-parsers';

package/src/utils/__tests__/param-parsers.test.ts

@@ -6,14 +6,23 @@ describe('paramParsers', () => {
         expect(paramParsers.string.stringify('qq')).toEqual('qq');
     });
 
-    it('should parse strings enum', () => {
-        const parser = paramParsers.stringEnum(['Search', 'Display']);
+    it('should parse strings set', () => {
+        const parser = paramParsers.stringSet(['Search', 'Display']);
 
         expect(parser.parse('qq')).toEqual(undefined);
         expect(parser.parse('Search')).toEqual('Search');
         expect(parser.stringify('Search')).toEqual('Search');
     });
 
+    it('should parse strings enums', () => {
+        const parser = paramParsers.stringEnum({ Search: 1, Display: 0 });
+
+        expect(parser.parse('qq')).toEqual(undefined);
+        expect(parser.parse('Search')).toEqual(1);
+        expect(parser.parse('Display')).toEqual(0);
+        expect(parser.stringify(0)).toEqual('Display');
+    });
+
     it('should parse uri', () => {
         expect(paramParsers.uri.parse('qq%26qq')).toEqual('qq&qq');
         expect(paramParsers.uri.stringify('qq&qq')).toEqual('qq&qq');

package/src/utils/date/__mocks__/date-mock.ts

@@ -0,0 +1,23 @@
+export const dateMockSpy = () => {
+    let dateSpy: jest.SpyInstance;
+
+    return {
+        mock: (dateStr: string, localOffset = -240) => {
+            const OriginalDate = Date;
+            const dt = new OriginalDate(dateStr);
+
+            dt.getTimezoneOffset = () => localOffset;
+
+            dateSpy = jest
+                .spyOn(global, 'Date')
+                .mockImplementation((...args) =>
+                    args.length ? new OriginalDate(...args) : (dt as any)
+                );
+        },
+        clear: () => {
+            if (dateSpy) {
+                dateSpy.mockRestore();
+            }
+        },
+    };
+};

package/src/utils/date/__tests__/date-range-picker.test.ts

@@ -0,0 +1,139 @@
+import {
+    DateRangePickerOptionsTenantAds,
+    DateRangePickerOptionsTenantAdsTypes,
+} from '../date-range-picker-options';
+import { dateMockSpy } from '../__mocks__/date-mock';
+
+const newYorkOffset = -240;
+
+type OptType = [
+    [number, number, number],
+    [number, number, number],
+    string,
+    DateRangePickerOptionsTenantAdsTypes
+];
+const opt = ([sy, sm, sd]: [number, number, number], [ey, em, ed]: [number, number, number]) => ({
+    start: new Date(sy, sm - 1, sd),
+    end: new Date(ey, em - 1, ed),
+});
+
+const opts = (options: OptType[]) =>
+    options.map(([[sy, sm, sd], [ey, em, ed], text, key]) => ({
+        key,
+        value: opt([sy, sm, sd], [ey, em, ed]),
+        text,
+    }));
+
+describe('DateRangePickerOptionsTenantAds', () => {
+    const dateSpy = dateMockSpy();
+
+    const options1: OptType[] = [
+        [[2021, 8, 20], [2021, 8, 21], 'Today', 'today'],
+        [[2021, 8, 19], [2021, 8, 20], 'Yesterday', 'yesterday'],
+        [[2021, 8, 14], [2021, 8, 21], 'Last 7 Days', 'last7'],
+        [[2021, 7, 22], [2021, 8, 21], 'Last 30 Days', 'last30'],
+        [[2021, 8, 1], [2021, 8, 21], 'Current Month', 'currentMonth'],
+        [[2021, 7, 1], [2021, 8, 1], 'Last Month', 'lastMonth'],
+        [[2021, 5, 23], [2021, 8, 21], 'Last 90 Days', 'last90'],
+        [[2021, 1, 1], [2021, 8, 21], 'Current Year', 'currentYear'],
+    ];
+
+    afterEach(() => {
+        dateSpy.clear();
+    });
+
+    it('works correct when local tz and tenant tz has same dates', () => {
+        dateSpy.mock('2021-08-20T12:24:00');
+
+        const store = DateRangePickerOptionsTenantAds.create({ UtcOffset: newYorkOffset });
+
+        expect(store.options).toEqual(opts(options1));
+    });
+
+    it('works correct when local tz and tenant tz has different dates', () => {
+        dateSpy.mock('2021-08-03T04:24:00');
+
+        const store = DateRangePickerOptionsTenantAds.create({ UtcOffset: newYorkOffset });
+
+        expect(store.options).toEqual(
+            opts([
+                [[2021, 8, 2], [2021, 8, 3], 'Today', 'today'],
+                [[2021, 8, 1], [2021, 8, 2], 'Yesterday', 'yesterday'],
+                [[2021, 7, 27], [2021, 8, 3], 'Last 7 Days', 'last7'],
+                [[2021, 7, 4], [2021, 8, 3], 'Last 30 Days', 'last30'],
+                [[2021, 8, 1], [2021, 8, 3], 'Current Month', 'currentMonth'],
+                [[2021, 7, 1], [2021, 8, 1], 'Last Month', 'lastMonth'],
+                [[2021, 5, 5], [2021, 8, 3], 'Last 90 Days', 'last90'],
+                [[2021, 1, 1], [2021, 8, 3], 'Current Year', 'currentYear'],
+            ])
+        );
+    });
+
+    it('set correct `today` for last day of month', () => {
+        dateSpy.mock('2021-08-31T12:24:00');
+
+        const store = DateRangePickerOptionsTenantAds.create({ UtcOffset: newYorkOffset });
+
+        expect(store.findOption('today')?.value).toEqual(opt([2021, 8, 31], [2021, 9, 1]));
+    });
+
+    it('set correct `yesterday` for first day of month', () => {
+        dateSpy.mock('2021-08-01T12:24:00');
+
+        const store = DateRangePickerOptionsTenantAds.create({ UtcOffset: newYorkOffset });
+
+        expect(store.findOption('yesterday')?.value).toEqual(opt([2021, 7, 31], [2021, 8, 1]));
+    });
+
+    it('set correct `lastMonth` for first month of year', () => {
+        dateSpy.mock('2021-01-02T12:24:00');
+
+        const store = DateRangePickerOptionsTenantAds.create({ UtcOffset: newYorkOffset });
+
+        expect(store.findOption('lastMonth')?.value).toEqual(opt([2020, 12, 1], [2021, 1, 1]));
+    });
+
+    describe('findOption', () => {
+        options1.forEach(op => {
+            it(`'${op[2]}' option should be found`, () => {
+                dateSpy.mock('2021-08-20T12:24:00');
+
+                const store = DateRangePickerOptionsTenantAds.create({ UtcOffset: newYorkOffset });
+
+                expect(store.findOption(opt(op[0], op[1]))?.key).toEqual(op[3]);
+            });
+        });
+    });
+
+    describe('getComparisonDateRange', () => {
+        it(`should generate comparison for current month option`, () => {
+            dateSpy.mock('2021-08-20T12:24:00');
+
+            const store = DateRangePickerOptionsTenantAds.create({ UtcOffset: newYorkOffset });
+
+            expect(store.getComparisonDateRange(store.findOption('currentMonth').value)).toEqual(
+                opt([2021, 7, 1], [2021, 8, 1])
+            );
+        });
+
+        it(`should generate comparison for prev month option`, () => {
+            dateSpy.mock('2021-01-20T12:24:00');
+
+            const store = DateRangePickerOptionsTenantAds.create({ UtcOffset: newYorkOffset });
+
+            expect(store.getComparisonDateRange(store.findOption('currentMonth').value)).toEqual(
+                opt([2020, 12, 1], [2021, 1, 1])
+            );
+        });
+
+        it(`should generate comparison for custom interval`, () => {
+            dateSpy.mock('2021-01-20T12:24:00');
+
+            const store = DateRangePickerOptionsTenantAds.create({ UtcOffset: newYorkOffset });
+
+            expect(store.getComparisonDateRange(opt([2021, 3, 5], [2021, 3, 15]))).toEqual(
+                opt([2021, 2, 23], [2021, 3, 5])
+            );
+        });
+    });
+});

package/src/utils/date/__tests__/date-tenant.test.ts

@@ -0,0 +1,38 @@
+import { TenantDate } from '../date-tenant';
+import { dateMockSpy } from '../__mocks__/date-mock';
+
+describe('TenantDate', () => {
+    const dateSpy = dateMockSpy();
+
+    afterEach(() => {
+        dateSpy.clear();
+    });
+
+    describe('tenantTimeFromLocal', () => {
+        it('works correct when local tz and tenant tz has same dates', () => {
+            dateSpy.mock('2021-08-20T12:24:00');
+
+            expect(TenantDate.tenantTimeFromLocal(-240)).toEqual(new Date(2021, 7, 20, 4, 24, 0));
+        });
+
+        it('works correct when local tz and tenant tz has different dates', () => {
+            dateSpy.mock('2021-08-03T04:24:00');
+
+            expect(TenantDate.tenantTimeFromLocal(-240)).toEqual(new Date(2021, 7, 2, 20, 24, 0));
+        });
+    });
+
+    describe('tenantDateFromLocal', () => {
+        it('works correct when local tz and tenant tz has same dates', () => {
+            dateSpy.mock('2021-08-20T12:24:00');
+
+            expect(TenantDate.tenantDateFromLocal(-240)).toEqual(new Date(2021, 7, 20));
+        });
+
+        it('works correct when local tz and tenant tz has different dates', () => {
+            dateSpy.mock('2021-08-03T04:24:00');
+
+            expect(TenantDate.tenantDateFromLocal(-240)).toEqual(new Date(2021, 7, 2));
+        });
+    });
+});

package/src/utils/date/date-range-picker-options.ts

@@ -0,0 +1,167 @@
+import { TenantDate } from './date-tenant';
+import { DateRange, dateRangesEqual, getComparisonDateRange } from './date';
+
+export interface DateRangePickerOption<OptionKeys extends string> {
+    key: OptionKeys;
+    value: DateRange;
+    text: string;
+}
+
+/**
+ * base class for predefined date range options
+ *
+ * @note start date is inclusive and end date is exclusive for each option
+ */
+export abstract class DateRangePickerOptions<OptionKeys extends string> {
+    options: DateRangePickerOption<OptionKeys>[] = [];
+    defaultOption?: OptionKeys;
+
+    get keys(): OptionKeys[] {
+        return this.options.map(o => o.key);
+    }
+
+    findOption(key: undefined): undefined;
+    findOption(key: OptionKeys): DateRangePickerOption<OptionKeys>;
+    findOption(range: DateRange): DateRangePickerOption<OptionKeys> | undefined;
+    findOption(arg?: DateRange | OptionKeys): DateRangePickerOption<OptionKeys> | undefined {
+        if (!arg) {
+            return undefined;
+        }
+
+        if (typeof arg === 'string') {
+            return this.options.find(o => o.key === arg);
+        }
+
+        for (const opt of this.options) {
+            if (dateRangesEqual(arg, opt.value)) {
+                return opt;
+            }
+        }
+
+        return undefined;
+    }
+
+    getComparisonDateRange(_range: DateRange): DateRange | undefined {
+        return undefined;
+    }
+}
+
+export interface TenantTimezone {
+    UtcOffset: number;
+}
+
+const subtractDays = (dt: Date, days: number) => new Date(dt.getTime() - days * 86400000);
+
+export type DateRangePickerOptionsTenantAdsTypes =
+    | 'today'
+    | 'yesterday'
+    | 'last7'
+    | 'last30'
+    | 'last90'
+    | 'currentMonth'
+    | 'lastMonth'
+    | 'currentYear';
+
+/**
+ * options wrapper in tenant timezone that is used in ads. it contain following options:
+ * Today
+ * Yesterday
+ * Last 7 Days
+ * Last 30 Days
+ * Current Month
+ * Last Month
+ * Last 90 Days
+ * Current Year
+ */
+export class DateRangePickerOptionsTenantAds extends DateRangePickerOptions<DateRangePickerOptionsTenantAdsTypes> {
+    readonly options: DateRangePickerOption<DateRangePickerOptionsTenantAdsTypes>[];
+
+    private constructor(
+        tz: TenantTimezone,
+        defaultOption: DateRangePickerOptionsTenantAdsTypes = 'last30'
+    ) {
+        super();
+
+        const todayTenant = TenantDate.tenantDateFromLocal(tz.UtcOffset);
+
+        const tomTenant = new Date(
+            todayTenant.getFullYear(),
+            todayTenant.getMonth(),
+            todayTenant.getDate() + 1
+        );
+
+        const yestTenant = new Date(
+            todayTenant.getFullYear(),
+            todayTenant.getMonth(),
+            todayTenant.getDate() - 1
+        );
+
+        const monTenant = new Date(todayTenant.getFullYear(), todayTenant.getMonth(), 1);
+        const lastMonTenant = new Date(todayTenant.getFullYear(), todayTenant.getMonth() - 1, 1);
+        const yearTenant = new Date(todayTenant.getFullYear(), 0, 1);
+
+        this.options = [
+            { key: 'today', value: { start: todayTenant, end: tomTenant }, text: 'Today' },
+            { key: 'yesterday', value: { start: yestTenant, end: todayTenant }, text: 'Yesterday' },
+            {
+                key: 'last7',
+                value: { start: subtractDays(todayTenant, 6), end: tomTenant },
+                text: 'Last 7 Days',
+            },
+            {
+                key: 'last30',
+                value: { start: subtractDays(todayTenant, 29), end: tomTenant },
+                text: 'Last 30 Days',
+            },
+            {
+                key: 'currentMonth',
+                value: { start: monTenant, end: tomTenant },
+                text: 'Current Month',
+            },
+            {
+                key: 'lastMonth',
+                value: { start: lastMonTenant, end: monTenant },
+                text: 'Last Month',
+            },
+            {
+                key: 'last90',
+                value: { start: subtractDays(todayTenant, 89), end: tomTenant },
+                text: 'Last 90 Days',
+            },
+            {
+                key: 'currentYear',
+                value: { start: yearTenant, end: tomTenant },
+                text: 'Current Year',
+            },
+        ];
+
+        this.defaultOption = defaultOption;
+    }
+
+    static create(
+        tz: TenantTimezone,
+        defaultOption?: DateRangePickerOptionsTenantAdsTypes
+    ): DateRangePickerOptionsTenantAds {
+        return new DateRangePickerOptionsTenantAds(tz, defaultOption);
+    }
+
+    getComparisonDateRange = (range: DateRange) => {
+        const option = this.findOption(range);
+
+        switch (option?.key) {
+            case 'currentMonth':
+            case 'lastMonth':
+                return {
+                    start: new Date(range.start.getFullYear(), range.start.getMonth() - 1, 1),
+                    end: range.start,
+                };
+            case 'currentYear':
+                return {
+                    start: new Date(range.start.getFullYear() - 1, 0, 1),
+                    end: range.start,
+                };
+        }
+
+        return getComparisonDateRange(range);
+    };
+}

package/src/utils/date/date-range-picker-state.ts

@@ -0,0 +1,62 @@
+import { DateRangePickerOption, DateRangePickerOptions } from './date-range-picker-options';
+import { DateRange } from './date';
+import { action, computed, makeObservable, observable } from 'mobx';
+
+interface DateRangePickerStateConfig {
+    defaultValue?: DateRange;
+}
+
+export interface DateRangePickerStateType {
+    value?: DateRange;
+    onChange(val?: DateRange): void;
+}
+
+export interface DateRangePickerOptionsStateType<OptionKeys extends string>
+    extends DateRangePickerStateType {
+    readonly options: DateRangePickerOptions<OptionKeys>;
+    readonly selectedOption?: DateRangePickerOption<OptionKeys>;
+}
+
+export class DateRangePickerState<OptionKeys extends string = never> {
+    @observable value?: DateRange;
+
+    readonly options?: DateRangePickerOptions<OptionKeys>;
+
+    @computed get selectedOption(): DateRangePickerOption<OptionKeys> | undefined {
+        if (!this.value || !this.options) {
+            return undefined;
+        }
+
+        return this.options.findOption(this.value);
+    }
+
+    constructor(config?: DateRangePickerStateConfig, options?: DateRangePickerOptions<OptionKeys>) {
+        makeObservable(this);
+
+        this.options = options;
+
+        if (config?.defaultValue) {
+            this.value = config.defaultValue;
+        } else if (this.options?.defaultOption) {
+            this.value = this.options.findOption(this.options.defaultOption)?.value;
+        }
+    }
+
+    static create(config?: DateRangePickerStateConfig): DateRangePickerStateType {
+        return new DateRangePickerState(config);
+    }
+
+    static createWithOptions<OptionKeys extends string>(
+        options: DateRangePickerOptions<OptionKeys>,
+        config?: DateRangePickerStateConfig
+    ): DateRangePickerOptionsStateType<OptionKeys> {
+        return new DateRangePickerState(
+            config,
+            options
+        ) as DateRangePickerOptionsStateType<OptionKeys>;
+    }
+
+    @action onChange = (val?: DateRange) => {
+        this.value = val;
+    };
+}

package/src/utils/date/date-tenant.ts

@@ -0,0 +1,49 @@
+/*
+ * This class exists because we:
+ *
+ * (1) want to always use tenant TZ (as specified in the settings) over the browser TZ to display/parse dates
+ * (2) have parts which we can't/don't want to change right now which use Date (instead of Moment)
+ *
+ * The issue with Date is that it doesn't support timezones. So we have to introduce the idea of UI Date --
+ *     a Date value with ticks set to such value that the local time in the current browser TZ is equal to local time in tenant TZ represented by passed real Date
+ *
+ * Example:
+ *
+ * Tenant TZ is PDT UTC-07
+ * Browser TZ is EDT UTC-04
+ *
+ * In DB we have a LaunchDate which is 2020-05-11 04:00:00 (we use UTC in DB)
+ * This time gives local time of 2020-05-11 00:00:00 in tenant TZ
+ * To display the same time in browser's TZ, we need to create a Date with UTC value of 2020-05-11 07:00:00 (see createUIDate)
+ * Note that the UTC value of this Date is useless, we only care about local time it gives in that particular TZ, that's why it's an UI date
+ * The same reasoning applies when we get a Date from a DatePicker, for example --
+ *     it's an UI date, we only care about its local time, thus we need to construct a moment which represents the same local time but in tenant TZ (see momentFromUI)
+ *
+ * If at any point we're able to get rid of all the components relying on Date, this class won't be needed anymore.
+ */
+export class TenantDate {
+    /**
+     * represent local time in tenant's Timezone
+     * @note returned date still have local timezone, so it shouldn't be converted to UTC anywhere
+     * @param tenantUtcOffset tenant's timezone offset to UTC (in minutes)
+     * @param localDateTime datetime or undefined (for 'now')
+     */
+    static tenantTimeFromLocal(tenantUtcOffset: number, localDateTime?: Date): Date {
+        const dtLocal = localDateTime ?? new Date();
+        const dtUtc = new Date(dtLocal.getTime() + dtLocal.getTimezoneOffset() * 60000);
+
+        return new Date(dtUtc.getTime() + tenantUtcOffset * 60000);
+    }
+
+    /**
+     * represent local date in tenant's Timezone (time values will be 0)
+     * @note returned date still have local timezone, so it shouldn't be converted to UTC anywhere
+     * @param tenantUtcOffset tenant's timezone offset to UTC (in minutes)
+     * @param localDateTime datetime or undefined (for 'now')
+     */
+    static tenantDateFromLocal(tenantUtcOffset: number, localDateTime?: Date): Date {
+        const dt = TenantDate.tenantTimeFromLocal(tenantUtcOffset, localDateTime);
+
+        return new Date(dt.getFullYear(), dt.getMonth(), dt.getDate());
+    }
+}

package/src/utils/date/date.ts

@@ -0,0 +1,29 @@
+export interface DateRange {
+    start: Date;
+    end: Date;
+}
+
+export const datesEqual = (date1: Date, date2: Date) =>
+    date1.getFullYear() === date2.getFullYear() &&
+    date1.getMonth() === date2.getMonth() &&
+    date1.getDate() === date2.getDate() &&
+    date1.getHours() === date2.getHours() &&
+    date1.getMinutes() === date2.getMinutes() &&
+    date1.getSeconds() === date2.getSeconds();
+
+export const dateRangesEqual = (dateRange1: DateRange, dateRange2: DateRange) =>
+    datesEqual(dateRange1.start, dateRange2.start) && datesEqual(dateRange1.end, dateRange2.end);
+
+export const getComparisonDateRange = (range: DateRange) => {
+    const diff = range.end.getTime() - range.start.getTime();
+    const compareStart = new Date(range.start.getTime() - diff);
+
+    return {
+        start: new Date(
+            compareStart.getFullYear(),
+            compareStart.getMonth(),
+            compareStart.getDate()
+        ),
+        end: range.start,
+    };
+};

package/src/utils/date/index.ts

@@ -0,0 +1,4 @@
+export * from './date';
+export * from './date-tenant';
+export * from './date-range-picker-options';
+export * from './date-range-picker-state';