@quillsql/react 1.0.0

package/src/DateRangePicker/DateRangePickerButton.tsx

@@ -0,0 +1,176 @@
+import React, { Dispatch, Ref, SetStateAction } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+import { ArrowDownHeadIcon, CalendarIcon } from '../assets';
+
+import {
+  BaseColors,
+  border,
+  borderRadius,
+  boxShadow,
+  fontSize,
+  fontWeight,
+  getColorClassNames,
+  sizing,
+  spacing,
+} from '../lib';
+
+import { DateRangePickerOption, DateRangePickerValue } from './DateRangePicker';
+import { DEFAULT_COLOR, colorPalette } from '../lib/theme';
+import {
+  formatSelectedDates,
+  makeDateRangePickerClassName,
+} from './dateRangePickerUtils';
+import { getSelectButtonColors, hasValue } from '../components/selectUtils';
+
+interface DateRangePickerButtonProps {
+  value: DateRangePickerValue;
+  options: DateRangePickerOption[];
+  placeholder: string;
+  disabled: boolean;
+  calendarRef: Ref<HTMLButtonElement>;
+  showCalendar: boolean;
+  setShowCalendar: Dispatch<SetStateAction<boolean>>;
+  onCalendarKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
+  enableDropdown: boolean;
+  dropdownRef: Ref<HTMLButtonElement>;
+  showDropdown: boolean;
+  setShowDropdown: Dispatch<SetStateAction<boolean>>;
+  onDropdownKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
+  locale?: Locale;
+  dropdownPlaceholder?: string;
+}
+
+const DateRangePickerButton = ({
+  value,
+  options,
+  placeholder,
+  disabled,
+  calendarRef,
+  showCalendar,
+  setShowCalendar,
+  onCalendarKeyDown,
+  enableDropdown,
+  dropdownRef,
+  showDropdown,
+  setShowDropdown,
+  onDropdownKeyDown,
+  locale,
+  dropdownPlaceholder = 'Select',
+}: DateRangePickerButtonProps) => {
+  const [startDate, endDate, dropdownValue] = value;
+
+  const hasDateSelection =
+    (startDate || endDate) !== null && (startDate || endDate) !== undefined;
+  const hasDropdownSelection = hasValue(dropdownValue);
+
+  const calendarText = hasDateSelection
+    ? formatSelectedDates(startDate as Date, endDate as Date, locale)
+    : placeholder;
+  const dropdownText = dropdownValue
+    ? String(options.find(option => option.value === dropdownValue)?.text)
+    : dropdownPlaceholder;
+
+  return (
+    <div
+      className={twMerge(
+        makeDateRangePickerClassName('button'),
+        'flex items-center justify-between',
+        getColorClassNames('white').bgColor,
+        borderRadius.md.all,
+        boxShadow.sm
+      )}
+    >
+      <button
+        type="button"
+        ref={calendarRef}
+        onClick={() => setShowCalendar(!showCalendar)}
+        onKeyDown={onCalendarKeyDown}
+        className={twMerge(
+          makeDateRangePickerClassName('calendarButton'),
+          'flex items-center w-full truncate focus:outline-none focus:ring-2',
+          getSelectButtonColors(hasDateSelection, disabled),
+          enableDropdown
+            ? border.none.right
+            : twMerge(borderRadius.md.right, border.sm.right),
+          getColorClassNames(BaseColors.Blue, colorPalette.lightRing)
+            .focusRingColor,
+          spacing.twoXl.paddingX,
+          spacing.sm.paddingY,
+          borderRadius.md.left,
+          border.sm.all
+        )}
+        disabled={disabled}
+      >
+        <CalendarIcon
+          className={twMerge(
+            makeDateRangePickerClassName('calendarButtonIcon'),
+            'flex-none',
+            getColorClassNames(DEFAULT_COLOR, colorPalette.lightText).textColor,
+            sizing.lg.height,
+            sizing.lg.width,
+            spacing.threeXs.negativeMarginLeft,
+            spacing.lg.marginRight
+          )}
+          aria-hidden="true"
+        />
+        <p
+          className={twMerge(
+            makeDateRangePickerClassName('calendarButtonText'),
+            'whitespace-nowrap truncate',
+            fontSize.sm,
+            fontWeight.md
+          )}
+        >
+          {calendarText}
+        </p>
+      </button>
+      {enableDropdown ? (
+        <button
+          type="button"
+          ref={dropdownRef}
+          onClick={() => setShowDropdown(!showDropdown)}
+          className={twMerge(
+            makeDateRangePickerClassName('dropdownButton'),
+            'inline-flex justify-between w-48 truncate focus:outline-none focus:ring-2',
+            getSelectButtonColors(hasDropdownSelection, disabled),
+            getColorClassNames(BaseColors.Blue, colorPalette.lightRing)
+              .focusRingColor,
+            spacing.twoXl.paddingX,
+            spacing.sm.paddingY,
+            spacing.px.negativeMarginLeft,
+            borderRadius.md.right,
+            border.sm.all
+          )}
+          onKeyDown={onDropdownKeyDown}
+          disabled={disabled}
+        >
+          <p
+            className={twMerge(
+              makeDateRangePickerClassName('dropdownButtonText'),
+              'whitespace-nowrap truncate',
+              fontSize.sm,
+              fontWeight.md
+            )}
+          >
+            {dropdownText}
+          </p>
+          <ArrowDownHeadIcon
+            className={twMerge(
+              makeDateRangePickerClassName('dropdownButtonIcon'),
+              'flex-none',
+              sizing.lg.height,
+              sizing.lg.width,
+              spacing.twoXs.negativeMarginRight,
+              getColorClassNames(DEFAULT_COLOR, colorPalette.lightText)
+                .textColor
+            )}
+            aria-hidden="true"
+          />
+        </button>
+      ) : null}
+    </div>
+  );
+};
+
+export default DateRangePickerButton;

package/src/DateRangePicker/dateRangePickerUtils.tsx

@@ -0,0 +1,460 @@
+import { twMerge } from 'tailwind-merge';
+import {
+  addDays,
+  format,
+  isEqual,
+  isToday,
+  max,
+  min,
+  startOfDay,
+  startOfMonth,
+  startOfToday,
+  startOfWeek,
+  startOfYear,
+  sub,
+} from 'date-fns';
+import { Color } from '../lib/inputTypes';
+import { DateRangePickerOption } from './DateRangePicker';
+import {
+  borderRadius,
+  fontWeight,
+  getColorClassNames,
+  makeClassName,
+} from '../lib';
+import { DEFAULT_COLOR, colorPalette } from '../lib/theme';
+
+export const makeDateRangePickerClassName = makeClassName('DateRangePicker');
+
+export const getWeekdays = (locale: Locale) => {
+  const firstDayOfWeek = startOfWeek(new Date());
+  return Array.from(Array(7)).map((e, i) =>
+    format(addDays(firstDayOfWeek, i), 'EEEEEE', { locale })
+  );
+};
+
+export const capitalize = (s: string, locale: Locale) => {
+  return s.charAt(0).toLocaleUpperCase(locale.code) + s.substring(1);
+};
+
+export const getStartDateByDropdownValue = (
+  dropdownValue: string | null | undefined,
+  dropdownOptions: DateRangePickerOption[]
+) => {
+  const startDate =
+    dropdownOptions.find(
+      (option: DateRangePickerOption) => option.value === dropdownValue
+    )?.startDate ?? null;
+  return startDate ? startOfDay(startDate) : null;
+};
+
+export const getEndDateByDropdownValue = (
+  dropdownValue: string | null | undefined,
+  dropdownOptions: DateRangePickerOption[]
+) =>
+  startOfDay(
+    dropdownOptions.find(
+      (option: DateRangePickerOption) => option.value === dropdownValue
+    )?.endDate ?? startOfToday()
+  );
+
+export const parseStartDate = (
+  startDate: Date | null | undefined,
+  minDate: Date | null | undefined,
+  selectedDropdownValue: string | null | undefined,
+  dropdownOptions: DateRangePickerOption[]
+) => {
+  if (selectedDropdownValue) {
+    startDate = getStartDateByDropdownValue(
+      selectedDropdownValue,
+      dropdownOptions
+    );
+  }
+  if (!startDate) return null;
+  if (startDate && !minDate) return startOfDay(startDate);
+  return startOfDay(max([startDate as Date, minDate as Date]));
+};
+
+export const parseEndDate = (
+  endDate: Date | null | undefined,
+  maxDate: Date | null | undefined,
+  selectedDropdownValue: string | null | undefined,
+  dropdownOptions: DateRangePickerOption[]
+) => {
+  if (selectedDropdownValue) {
+    endDate = getEndDateByDropdownValue(selectedDropdownValue, dropdownOptions);
+  }
+  if (!endDate) return null;
+  if (endDate && !maxDate) return startOfDay(endDate);
+
+  return startOfDay(min([endDate as Date, maxDate as Date]));
+};
+
+export const defaultOptions: DateRangePickerOption[] = [
+  // {
+  //   value: 'tdy',
+  //   text: 'Today',
+  //   startDate: startOfToday(),
+  // },
+  {
+    value: 'w',
+    text: 'Last 7 days',
+    startDate: sub(startOfToday(), { days: 7 }),
+  },
+  {
+    value: 't',
+    text: 'Last 30 days',
+    startDate: sub(startOfToday(), { days: 30 }),
+  },
+  {
+    value: '90d',
+    text: 'Last 90 days',
+    startDate: sub(startOfToday(), { days: 90 }),
+  },
+  {
+    value: '6m',
+    text: 'Last 6 months',
+    startDate: sub(startOfToday(), { months: 6 }),
+  },
+  {
+    value: 'm',
+    text: 'This month',
+    startDate: startOfMonth(startOfToday()),
+  },
+  {
+    value: 'y',
+    text: 'This year',
+    startDate: startOfYear(startOfToday()),
+  },
+  // {
+  //   value: 'tw',
+  //   text: 'This week',
+  //   startDate: startOfWeek(startOfToday()),
+  // },
+  // {
+  //   value: '2w',
+  //   text: 'Last 2 weeks',
+  //   startDate: sub(startOfToday(), { weeks: 2 }),
+  // },
+  {
+    value: 'at',
+    text: 'All time',
+    startDate: sub(startOfToday(), { years: 100 }),
+  },
+];
+
+export const getDateStyles = (
+  date: Date,
+  finalStartDate: Date | null,
+  finalEndDate: Date | null,
+  hoveredDate: Date | undefined,
+  isDateDisabled: boolean,
+  color: Color
+) =>
+  twMerge(
+    getDayBgColorClassName(
+      date,
+      finalStartDate,
+      finalEndDate,
+      hoveredDate as Date | null,
+      color,
+      isDateDisabled
+    ),
+    getDayTextClassNames(
+      date,
+      finalStartDate,
+      finalEndDate,
+      hoveredDate as Date | null,
+      color,
+      isDateDisabled
+    ),
+    getDayHoverBgColorClassName(
+      date,
+      finalStartDate,
+      finalEndDate,
+      isDateDisabled
+    ),
+    getDayRoundedClassName(
+      date,
+      finalStartDate,
+      finalEndDate,
+      hoveredDate as Date | null
+    )
+  );
+
+const getDayRoundedClassName = (
+  day: Date,
+  selectedStartDay: Date | null,
+  selectedEndDay: Date | null,
+  hoveredDay: Date | null
+): string => {
+  if (!selectedStartDay && !selectedEndDay) {
+    return borderRadius.md.all;
+  }
+  if (
+    selectedStartDay &&
+    selectedEndDay &&
+    isEqual(day, selectedStartDay) &&
+    isEqual(day, selectedEndDay)
+  ) {
+    return borderRadius.md.all;
+  }
+  if (selectedStartDay && selectedEndDay && isEqual(day, selectedStartDay)) {
+    return borderRadius.md.left;
+  }
+  if (
+    selectedStartDay &&
+    !selectedEndDay &&
+    !hoveredDay &&
+    isEqual(day, selectedStartDay)
+  ) {
+    return borderRadius.md.all;
+  }
+  if (
+    selectedStartDay &&
+    !selectedEndDay &&
+    hoveredDay &&
+    day < selectedStartDay
+  ) {
+    return borderRadius.md.all;
+  }
+  if (
+    selectedStartDay &&
+    !selectedEndDay &&
+    hoveredDay &&
+    isEqual(day, selectedStartDay) &&
+    hoveredDay > selectedStartDay
+  ) {
+    return borderRadius.md.left;
+  }
+  if (
+    selectedStartDay &&
+    !selectedEndDay &&
+    hoveredDay &&
+    day > selectedStartDay &&
+    day < hoveredDay
+  ) {
+    return borderRadius.none.all;
+  }
+  if (
+    selectedStartDay &&
+    selectedEndDay &&
+    day > selectedStartDay &&
+    day < selectedEndDay
+  ) {
+    return borderRadius.none.all;
+  }
+  if (
+    selectedStartDay &&
+    !selectedEndDay &&
+    hoveredDay &&
+    isEqual(day, hoveredDay) &&
+    !isEqual(day, selectedStartDay)
+  ) {
+    return borderRadius.md.right;
+  }
+  if (selectedStartDay && selectedEndDay && isEqual(day, selectedEndDay)) {
+    return borderRadius.md.right;
+  }
+  if (
+    selectedStartDay &&
+    selectedEndDay &&
+    (day < selectedStartDay || day > selectedEndDay)
+  ) {
+    return borderRadius.md.all;
+  }
+  return borderRadius.md.all;
+};
+
+export const displaySelected = (
+  selectedStartDay: Date | null,
+  selectedEndDay: Date | null
+) => {
+  if (!selectedStartDay && !selectedEndDay) {
+    return '';
+  } else if (selectedStartDay && !selectedEndDay) {
+    const options: Intl.DateTimeFormatOptions = {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    };
+    return selectedStartDay.toLocaleDateString('en-US', options);
+  } else if (selectedStartDay && selectedEndDay) {
+    if (isEqual(selectedStartDay, selectedEndDay)) {
+      const options: Intl.DateTimeFormatOptions = {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      };
+      return selectedStartDay.toLocaleDateString('en-US', options);
+    } else if (
+      selectedStartDay.getMonth() === selectedEndDay.getMonth() &&
+      selectedStartDay.getFullYear() === selectedEndDay.getFullYear()
+    ) {
+      const optionsStartDate: Intl.DateTimeFormatOptions = {
+        month: 'short',
+        day: 'numeric',
+      };
+      return `${selectedStartDay.toLocaleDateString(
+        'en-US',
+        optionsStartDate
+      )} - 
+                    ${selectedEndDay.getDate()}, ${selectedEndDay.getFullYear()}`;
+    } else {
+      const options: Intl.DateTimeFormatOptions = {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      };
+      return `${selectedStartDay.toLocaleDateString('en-US', options)} - 
+                    ${selectedEndDay.toLocaleDateString('en-US', options)}`;
+    }
+  }
+};
+
+const getDayBgColorClassName = (
+  day: Date,
+  selectedStartDay: Date | null,
+  selectedEndDay: Date | null,
+  hoveredDay: Date | null,
+  color: Color,
+  isDayDisabled = false
+): string => {
+  if (isDayDisabled) return getColorClassNames('transparent').bgColor;
+  if (selectedStartDay && isEqual(day, selectedStartDay)) {
+    return getColorClassNames(color, colorPalette.background).bgColor;
+  }
+  if (
+    selectedStartDay &&
+    !selectedEndDay &&
+    hoveredDay &&
+    day > selectedStartDay &&
+    day < hoveredDay
+  ) {
+    return getColorClassNames(DEFAULT_COLOR, colorPalette.lightBackground)
+      .bgColor;
+  }
+  if (selectedEndDay && isEqual(day, selectedEndDay)) {
+    return getColorClassNames(color, colorPalette.background).bgColor;
+  }
+  if (
+    selectedStartDay &&
+    selectedEndDay &&
+    day > selectedStartDay &&
+    day < selectedEndDay
+  ) {
+    return getColorClassNames(DEFAULT_COLOR, colorPalette.lightBackground)
+      .bgColor;
+  }
+  return getColorClassNames('transparent').bgColor;
+};
+
+const getDayTextClassNames = (
+  day: Date,
+  selectedStartDay: Date | null,
+  selectedEndDay: Date | null,
+  hoveredDay: Date | null,
+  color: Color,
+  isDayDisabled = false
+): string => {
+  if (isDayDisabled)
+    return getColorClassNames(DEFAULT_COLOR, colorPalette.lightText).textColor;
+  if (isToday(day)) {
+    if (
+      (selectedStartDay && isEqual(day, selectedStartDay)) ||
+      (selectedEndDay && isEqual(day, selectedEndDay))
+    ) {
+      return getColorClassNames('white').textColor;
+    }
+    return twMerge(
+      getColorClassNames(color, colorPalette.text).textColor,
+      fontWeight.lg
+    );
+  }
+  if (selectedStartDay && isEqual(day, selectedStartDay)) {
+    return getColorClassNames('white').textColor;
+  }
+  if (
+    selectedStartDay &&
+    !selectedEndDay &&
+    hoveredDay &&
+    day > selectedStartDay &&
+    day < hoveredDay
+  ) {
+    return getColorClassNames(DEFAULT_COLOR, colorPalette.darkestText)
+      .textColor;
+  }
+  if (selectedEndDay && isEqual(day, selectedEndDay)) {
+    return getColorClassNames('white').textColor;
+  }
+  if (
+    selectedStartDay &&
+    selectedEndDay &&
+    day > selectedStartDay &&
+    day < selectedEndDay
+  ) {
+    return getColorClassNames(color, colorPalette.text).textColor;
+  }
+  return getColorClassNames(DEFAULT_COLOR, colorPalette.darkestText).textColor;
+};
+
+const getDayHoverBgColorClassName = (
+  day: Date,
+  selectedStartDay: Date | null,
+  selectedEndDay: Date | null,
+  isDayDisabled = false
+): string => {
+  if (isDayDisabled) return '';
+  if (selectedStartDay && isEqual(day, selectedStartDay)) {
+    return '';
+  }
+  if (selectedEndDay && isEqual(day, selectedEndDay)) {
+    return '';
+  }
+  return 'hover:bg-gray-200';
+};
+
+export const formatSelectedDates = (
+  startDate: Date | null,
+  endDate: Date | null,
+  locale?: Locale
+) => {
+  const localeCode = locale?.code || 'en-US';
+  if (!startDate && !endDate) {
+    return '';
+  } else if (startDate && !endDate) {
+    const options: Intl.DateTimeFormatOptions = {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    };
+    return startDate.toLocaleDateString(localeCode, options);
+  } else if (startDate && endDate) {
+    if (isEqual(startDate, endDate)) {
+      const options: Intl.DateTimeFormatOptions = {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      };
+      return startDate.toLocaleDateString(localeCode, options);
+    } else if (
+      startDate.getMonth() === endDate.getMonth() &&
+      startDate.getFullYear() === endDate.getFullYear()
+    ) {
+      const optionsStartDate: Intl.DateTimeFormatOptions = {
+        month: 'short',
+        day: 'numeric',
+      };
+      return `${startDate.toLocaleDateString(localeCode, optionsStartDate)} - 
+                    ${endDate.getDate()}, ${endDate.getFullYear()}`;
+    } else {
+      const options: Intl.DateTimeFormatOptions = {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      };
+      return `${startDate.toLocaleDateString(localeCode, options)} - 
+                    ${endDate.toLocaleDateString(localeCode, options)}`;
+    }
+  }
+  return '';
+};

package/src/DateRangePicker/index.ts

@@ -0,0 +1,3 @@
+export { default as DateRangePicker } from "./DateRangePicker";
+
+export { DateRangePickerValue } from "./DateRangePicker";