@quillsql/react 1.0.0

package/src/DateRangePicker/Calendar.tsx

@@ -0,0 +1,425 @@
+import React, { Dispatch, SetStateAction, useContext, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import {
+  add,
+  eachDayOfInterval,
+  endOfMonth,
+  format,
+  getDay,
+  isSaturday,
+  isSunday,
+  nextSaturday,
+  previousSunday,
+  startOfMonth,
+} from 'date-fns';
+import { BaseColorContext } from '../contexts';
+
+import {
+  ArrowLeftHeadIcon,
+  ArrowRightHeadIcon,
+  DoubleArrowLeftHeadIcon,
+  DoubleArrowRightHeadIcon,
+} from '../assets';
+
+import {
+  border,
+  borderRadius,
+  boxShadow,
+  fontSize,
+  fontWeight,
+  getColorClassNames,
+  sizing,
+  spacing,
+} from '../lib';
+import { capitalize, getDateStyles, getWeekdays } from './dateRangePickerUtils';
+import { DEFAULT_COLOR, colorPalette } from '../lib/theme';
+import { makeDateRangePickerClassName } from './dateRangePickerUtils';
+
+export const colStartClasses = [
+  '',
+  'col-start-2',
+  'col-start-3',
+  'col-start-4',
+  'col-start-5',
+  'col-start-6',
+  'col-start-7',
+];
+
+interface CalendarHeaderProps {
+  enableYearPagination: boolean;
+  anchorDate: Date;
+  setStartOfCurrMonth: Dispatch<SetStateAction<Date | null>>;
+  locale: Locale;
+}
+
+const CalendarHeader = ({
+  enableYearPagination,
+  anchorDate,
+  setStartOfCurrMonth,
+  locale,
+}: CalendarHeaderProps) => {
+  const firstDayOfMonth = startOfMonth(anchorDate);
+  const handlePaginationClick = (
+    type: 'nextMonth' | 'prevMonth' | 'nextYear' | 'prevYear'
+  ) => {
+    switch (type) {
+      case 'nextMonth':
+        setStartOfCurrMonth(add(firstDayOfMonth, { months: 1 }));
+        break;
+      case 'prevMonth':
+        setStartOfCurrMonth(add(firstDayOfMonth, { months: -1 }));
+        break;
+      case 'nextYear':
+        setStartOfCurrMonth(add(firstDayOfMonth, { years: 1 }));
+        break;
+      case 'prevYear':
+        setStartOfCurrMonth(add(firstDayOfMonth, { years: -1 }));
+        break;
+    }
+  };
+
+  const displayedTitle = capitalize(
+    format(firstDayOfMonth, 'MMMM yyyy', { locale }),
+    locale
+  );
+
+  return (
+    <div
+      className={twMerge(
+        makeDateRangePickerClassName('calendarHeader'),
+        'flex justify-between items-center',
+        spacing.twoXs.paddingX,
+        spacing.sm.paddingY
+      )}
+    >
+      <div
+        className={twMerge(
+          makeDateRangePickerClassName('calendarHeaderPrevSelection'),
+          'flex items-center space-x-1'
+        )}
+      >
+        <button
+          type="button"
+          className={twMerge(
+            makeDateRangePickerClassName('calendarHeaderPrevYearButton'),
+            'inline-flex focus:outline-none focus:ring-2',
+            !enableYearPagination && 'hidden',
+            getColorClassNames(DEFAULT_COLOR, colorPalette.canvasBackground)
+              .hoverBgColor,
+            getColorClassNames(DEFAULT_COLOR, colorPalette.ring).borderColor,
+            getColorClassNames('blue', colorPalette.lightRing).focusRingColor,
+            spacing.twoXs.paddingAll,
+            spacing.px.marginRight,
+            fontSize.sm,
+            fontWeight.md,
+            borderRadius.sm.all,
+            border.sm.all,
+            boxShadow.sm
+          )}
+          onClick={() => handlePaginationClick('prevYear')}
+        >
+          <DoubleArrowLeftHeadIcon
+            className={twMerge(
+              makeDateRangePickerClassName('calendarHeaderPrevYearIcon'),
+              getColorClassNames(DEFAULT_COLOR, colorPalette.darkText)
+                .textColor,
+              sizing.lg.height,
+              sizing.lg.width
+            )}
+            aria-hidden="true"
+          />
+        </button>
+        <button
+          type="button"
+          name="prevMonth"
+          className={twMerge(
+            makeDateRangePickerClassName('calendarHeaderPrevMonthButton'),
+            'inline-flex focus:outline-none focus:ring-2',
+            getColorClassNames(DEFAULT_COLOR, colorPalette.canvasBackground)
+              .hoverBgColor,
+            getColorClassNames(DEFAULT_COLOR, colorPalette.ring).borderColor,
+            getColorClassNames('blue', colorPalette.lightRing).focusRingColor,
+            spacing.twoXs.paddingAll,
+            fontSize.sm,
+            fontWeight.md,
+            borderRadius.sm.all,
+            border.sm.all,
+            boxShadow.sm
+          )}
+          onClick={() => handlePaginationClick('prevMonth')}
+        >
+          <ArrowLeftHeadIcon
+            className={twMerge(
+              makeDateRangePickerClassName('calendarHeaderPrevMonthIcon'),
+              getColorClassNames(DEFAULT_COLOR, colorPalette.darkText)
+                .textColor,
+              sizing.lg.height,
+              sizing.lg.width
+            )}
+            aria-hidden="true"
+          />
+        </button>
+      </div>
+      <h2
+        className={twMerge(
+          makeDateRangePickerClassName('calendarHeaderText'),
+          'text-elem',
+          getColorClassNames(DEFAULT_COLOR, colorPalette.darkestText).textColor,
+          fontSize.sm,
+          fontWeight.lg
+        )}
+      >
+        {displayedTitle}
+      </h2>
+      <div
+        className={twMerge(
+          makeDateRangePickerClassName('calendarHeaderNextSelection'),
+          'flex items-center space-x-1'
+        )}
+      >
+        <button
+          type="button"
+          name="nextMonth"
+          className={twMerge(
+            makeDateRangePickerClassName('calendarHeaderNextMonthButton'),
+            'inline-flex focus:outline-none focus:ring-2',
+            getColorClassNames(DEFAULT_COLOR, colorPalette.canvasBackground)
+              .hoverBgColor,
+            getColorClassNames(DEFAULT_COLOR, colorPalette.ring).borderColor,
+            getColorClassNames('blue', colorPalette.lightRing).focusRingColor,
+            spacing.twoXs.paddingAll,
+            fontSize.sm,
+            fontWeight.md,
+            borderRadius.sm.all,
+            border.sm.all,
+            boxShadow.sm
+          )}
+          onClick={() => handlePaginationClick('nextMonth')}
+        >
+          <ArrowRightHeadIcon
+            className={twMerge(
+              makeDateRangePickerClassName('calendarHeaderNextMonthIcon'),
+              getColorClassNames(DEFAULT_COLOR, colorPalette.darkText)
+                .textColor,
+              sizing.lg.height,
+              sizing.lg.width
+            )}
+            aria-hidden="true"
+          />
+        </button>
+        <button
+          type="button"
+          className={twMerge(
+            makeDateRangePickerClassName('calendarHeaderNextYearButton'),
+            'inline-flex focus:outline-none focus:ring-2',
+            !enableYearPagination && 'hidden',
+            getColorClassNames(DEFAULT_COLOR, colorPalette.canvasBackground)
+              .hoverBgColor,
+            getColorClassNames(DEFAULT_COLOR, colorPalette.ring).borderColor,
+            getColorClassNames('blue', colorPalette.lightRing).focusRingColor,
+            spacing.twoXs.paddingAll,
+            spacing.px.marginLeft,
+            fontSize.sm,
+            fontWeight.md,
+            borderRadius.sm.all,
+            border.sm.all,
+            boxShadow.sm
+          )}
+          onClick={() => handlePaginationClick('nextYear')}
+        >
+          <DoubleArrowRightHeadIcon
+            className={twMerge(
+              makeDateRangePickerClassName('calendarHeaderNextYearIcon'),
+              'shrink-0 flex-0',
+              getColorClassNames(DEFAULT_COLOR, colorPalette.darkText)
+                .textColor,
+              sizing.lg.height,
+              sizing.lg.width
+            )}
+            aria-hidden="true"
+          />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+interface CalendarBodyProps {
+  anchorDate: Date;
+  selectedStartDate: Date | null;
+  selectedEndDate: Date | null;
+  onDateClick: (date: Date) => void;
+  minDate: Date | null;
+  maxDate: Date | null;
+  locale: Locale;
+}
+
+const CalendarBody = ({
+  anchorDate,
+  selectedStartDate,
+  selectedEndDate,
+  onDateClick,
+  minDate,
+  maxDate,
+  locale,
+}: CalendarBodyProps) => {
+  const [hoveredDate, setHoveredDate] = useState<Date | undefined>();
+  const color = useContext(BaseColorContext);
+
+  const firstDayOfDisplayedMonth = startOfMonth(anchorDate);
+  const lastDayOfDisplayedMonth = endOfMonth(anchorDate);
+
+  const weekdays = getWeekdays(locale).map(dayName =>
+    capitalize(dayName, locale)
+  );
+
+  const displayedDates = eachDayOfInterval({
+    start: isSunday(firstDayOfDisplayedMonth)
+      ? firstDayOfDisplayedMonth
+      : previousSunday(firstDayOfDisplayedMonth),
+    end: isSaturday(lastDayOfDisplayedMonth)
+      ? lastDayOfDisplayedMonth
+      : nextSaturday(lastDayOfDisplayedMonth),
+  });
+
+  const isDateDisabled = (
+    date: Date,
+    minDate: Date | null,
+    maxDate: Date | null,
+    firstDayDisplayedMonth: Date,
+    lastDayDisplayedMonth: Date
+  ) => {
+    const isDateInDisplayedMonth =
+      date >= firstDayDisplayedMonth && date <= lastDayDisplayedMonth;
+    return (
+      (minDate !== null && date < minDate) ||
+      (maxDate !== null && date > maxDate) ||
+      !isDateInDisplayedMonth
+    );
+  };
+
+  return (
+    <>
+      <div
+        className={twMerge(
+          makeDateRangePickerClassName('calendarBodyWeekdays'),
+          'grid grid-cols-7 text-center',
+          getColorClassNames(DEFAULT_COLOR, colorPalette.ring).textColor,
+          fontSize.xs,
+          fontWeight.md
+        )}
+      >
+        {weekdays.map(dayName => (
+          <div key={dayName} className="w-full flex justify-center">
+            <div
+              className={twMerge(
+                'flex items-center justify-center w-full',
+                sizing.threeXl.height
+              )}
+            >
+              {dayName}
+            </div>
+          </div>
+        ))}
+      </div>
+      <div
+        className={twMerge(
+          makeDateRangePickerClassName('calendarBodyDatesGrid'),
+          'grid grid-cols-7'
+        )}
+      >
+        {displayedDates.map(date => {
+          const isCurrentDateDisabled = isDateDisabled(
+            date,
+            minDate,
+            maxDate,
+            firstDayOfDisplayedMonth,
+            lastDayOfDisplayedMonth
+          );
+
+          return (
+            <div
+              key={date.toString()}
+              className={twMerge(
+                makeDateRangePickerClassName('calendarBodyDate'),
+                colStartClasses[getDay(date)],
+                'w-full'
+              )}
+            >
+              <button
+                type="button"
+                onClick={() => onDateClick(date)}
+                onPointerEnter={() => setHoveredDate?.(date)}
+                onPointerLeave={() => setHoveredDate?.(undefined)}
+                className={twMerge(
+                  'w-full flex items-center justify-center',
+                  sizing.threeXl.height,
+                  fontSize.sm,
+                  getDateStyles(
+                    date,
+                    selectedStartDate,
+                    selectedEndDate,
+                    hoveredDate,
+                    isCurrentDateDisabled,
+                    color
+                  )
+                )}
+                disabled={isCurrentDateDisabled}
+              >
+                <time dateTime={format(date, 'yyyy-MM-dd', { locale })}>
+                  {format(date, 'd', { locale })}
+                </time>
+              </button>
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+};
+
+export interface CalendarProps {
+  enableYearPagination: boolean;
+  anchorDate: Date;
+  setStartOfCurrMonth: Dispatch<SetStateAction<Date | null>>;
+  startDate: Date | null;
+  endDate: Date | null;
+  minDate: Date | null;
+  maxDate: Date | null;
+  onDateClick: (date: Date) => void;
+  locale: Locale;
+}
+
+const Calendar = ({
+  enableYearPagination,
+  anchorDate,
+  setStartOfCurrMonth,
+  startDate,
+  endDate,
+  minDate,
+  maxDate,
+  onDateClick,
+  locale,
+}: CalendarProps) => {
+  return (
+    <div className={twMerge(spacing.lg.paddingX, spacing.twoXs.paddingY)}>
+      <CalendarHeader
+        enableYearPagination={enableYearPagination}
+        anchorDate={anchorDate}
+        setStartOfCurrMonth={setStartOfCurrMonth}
+        locale={locale}
+      />
+      <CalendarBody
+        anchorDate={anchorDate}
+        selectedStartDate={startDate}
+        selectedEndDate={endDate}
+        onDateClick={onDateClick}
+        minDate={minDate}
+        maxDate={maxDate}
+        locale={locale}
+      />
+    </div>
+  );
+};
+
+export default Calendar;

package/src/DateRangePicker/DateRangePicker.tsx

@@ -0,0 +1,251 @@
+/* eslint-disable react/display-name */
+import React, { useRef, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+import { startOfMonth, startOfToday, sub } from 'date-fns';
+import { enUS } from 'date-fns/locale';
+
+import {
+  BaseColorContext,
+  HoveredValueContext,
+  SelectedValueContext,
+} from '../contexts';
+
+import { useInternalState, useSelectOnKeyDown } from '../hooks';
+
+import {
+  defaultOptions,
+  getEndDateByDropdownValue,
+  getStartDateByDropdownValue,
+  makeDateRangePickerClassName,
+  parseEndDate,
+  parseStartDate,
+} from './dateRangePickerUtils';
+
+import Calendar from './Calendar';
+import DateRangePickerButton from './DateRangePickerButton';
+import { DropdownItem } from '../components/Dropdown';
+import Modal from '../components/Modal';
+
+export type Locale = typeof enUS;
+
+export type DateRangePickerValue = [
+  (Date | null)?,
+  (Date | null)?,
+  (string | null)?
+];
+export type DateRangePickerOption = {
+  value: string;
+  text: string;
+  startDate: Date;
+  endDate?: Date;
+};
+
+export interface DateRangePickerProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue'> {
+  value?: DateRangePickerValue;
+  defaultValue?: DateRangePickerValue;
+  onValueChange?: (value: DateRangePickerValue) => void;
+  enableDropdown?: boolean;
+  options?: DateRangePickerOption[];
+  minDate?: Date | null;
+  maxDate?: Date | null;
+  placeholder?: string;
+  dropdownPlaceholder?: string;
+  enableYearPagination?: boolean;
+  disabled?: boolean;
+  color?: string;
+  locale?: Locale;
+}
+
+const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
+  (props, ref) => {
+    const {
+      value,
+      defaultValue,
+      onValueChange,
+      enableDropdown = true,
+      options,
+      minDate = null,
+      maxDate = null,
+      placeholder = 'Select',
+      dropdownPlaceholder = 'Select',
+      disabled = false,
+      color = 'blue',
+      enableYearPagination = false,
+      locale = enUS,
+      className,
+      ...other
+    } = props;
+
+    const TODAY = startOfToday();
+    const calendarRef = useRef(null);
+    const dropdownRef = useRef(null);
+
+    const [selectedValue, setSelectedValue] = useInternalState(
+      defaultValue,
+      value
+    );
+
+    const [startOfCurrMonth, setStartOfCurrMonth] = useState<Date | null>(null);
+    const [showCalendar, setShowCalendar] = useState(false);
+    const [showDropdown, setShowDropdown] = useState(false);
+
+    const dropdownOptions = options ?? defaultOptions;
+    const selectedDropdownValue = selectedValue
+      ? selectedValue[2] ?? null
+      : null;
+    const selectedStartDate = selectedValue
+      ? parseStartDate(
+          selectedValue[0],
+          minDate,
+          selectedDropdownValue,
+          dropdownOptions
+        )
+      : null;
+    const selectedEndDate = selectedValue
+      ? parseEndDate(
+          selectedValue[1],
+          maxDate,
+          selectedDropdownValue,
+          dropdownOptions
+        )
+      : null;
+
+    const anchorDate =
+      startOfCurrMonth ?? selectedEndDate ?? selectedStartDate ?? TODAY;
+
+    const handleDateClick = (date: Date) => {
+      if (!selectedStartDate) {
+        onValueChange?.([date, selectedEndDate, null]);
+        setSelectedValue([date, selectedEndDate, null]);
+      } else if (selectedStartDate && !selectedEndDate) {
+        if (date < selectedStartDate) {
+          onValueChange?.([date, selectedEndDate, null]);
+          setSelectedValue([date, selectedEndDate, null]);
+          // Selection complete
+        } else {
+          onValueChange?.([selectedStartDate, date, null]);
+          setSelectedValue([selectedStartDate, date, null]);
+          setShowCalendar(false);
+        }
+      } else if (selectedStartDate && selectedEndDate) {
+        onValueChange?.([date, null, null]);
+        setSelectedValue([date, null, null]);
+      }
+    };
+
+    const handleCalendarKeyDown = (
+      e: React.KeyboardEvent<HTMLButtonElement>
+    ) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        setShowCalendar(false);
+      }
+    };
+
+    const handleDropdownOptionClick = (dropdownValue: string) => {
+      const selectedStartDate = getStartDateByDropdownValue(
+        dropdownValue,
+        dropdownOptions
+      );
+      const selectedEndDate = getEndDateByDropdownValue(
+        dropdownValue,
+        dropdownOptions
+      );
+
+      setSelectedValue([selectedStartDate, selectedEndDate, dropdownValue]);
+      onValueChange?.([selectedStartDate, selectedEndDate, dropdownValue]);
+      setStartOfCurrMonth(startOfMonth(selectedEndDate));
+      setShowDropdown(false);
+    };
+
+    const [hoveredDropdownValue, handleDropdownKeyDown] = useSelectOnKeyDown(
+      handleDropdownOptionClick,
+      dropdownOptions.map((option: DateRangePickerOption) => option.value),
+      showDropdown,
+      setShowDropdown,
+      selectedDropdownValue as string
+    );
+
+    return (
+      <BaseColorContext.Provider value={color}>
+        <div
+          ref={ref}
+          className={twMerge(
+            makeDateRangePickerClassName('root'),
+            'relative w-full',
+            className
+          )}
+          {...other}
+        >
+          <DateRangePickerButton
+            value={[selectedStartDate, selectedEndDate, selectedDropdownValue]}
+            options={dropdownOptions}
+            placeholder={placeholder}
+            disabled={disabled}
+            calendarRef={calendarRef}
+            showCalendar={showCalendar}
+            setShowCalendar={setShowCalendar}
+            onCalendarKeyDown={handleCalendarKeyDown}
+            enableDropdown={enableDropdown}
+            dropdownRef={dropdownRef}
+            showDropdown={showDropdown}
+            setShowDropdown={setShowDropdown}
+            onDropdownKeyDown={handleDropdownKeyDown}
+            locale={locale}
+            dropdownPlaceholder={dropdownPlaceholder}
+          />
+          {/* Calendar Modal */}
+          <Modal
+            className={makeDateRangePickerClassName('calendarModal')}
+            showModal={showCalendar}
+            setShowModal={setShowCalendar}
+            parentRef={calendarRef}
+            width={288}
+            maxHeight="max-h-fit"
+          >
+            <Calendar
+              enableYearPagination={enableYearPagination}
+              anchorDate={anchorDate}
+              // setAnchorDate={setAnchorDate}
+              startDate={selectedStartDate}
+              endDate={selectedEndDate}
+              minDate={minDate}
+              maxDate={maxDate}
+              onDateClick={handleDateClick}
+              locale={locale}
+              setStartOfCurrMonth={setStartOfCurrMonth}
+            />
+          </Modal>
+          {/* Dropdpown Modal */}
+          <Modal
+            className={makeDateRangePickerClassName('dropdownModal')}
+            showModal={showDropdown}
+            setShowModal={setShowDropdown}
+            parentRef={dropdownRef}
+          >
+            <SelectedValueContext.Provider
+              value={{
+                selectedValue: selectedDropdownValue,
+                handleValueChange: handleDropdownOptionClick,
+              }}
+            >
+              <HoveredValueContext.Provider
+                value={{ hoveredValue: hoveredDropdownValue }}
+              >
+                {dropdownOptions.map(
+                  ({ value, text }: DateRangePickerOption) => (
+                    <DropdownItem key={value} value={value} text={text} />
+                  )
+                )}
+              </HoveredValueContext.Provider>
+            </SelectedValueContext.Provider>
+          </Modal>
+        </div>
+      </BaseColorContext.Provider>
+    );
+  }
+);
+
+export default DateRangePicker;