@quillsql/react 1.7.5 → 1.7.7

package/src/DateRangePicker/Calendar.tsx

@@ -1,442 +0,0 @@
-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 { capitalize, getDateStyles, getWeekdays } 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;
-  theme: any;
-}
-
-const CalendarHeader = ({
-  enableYearPagination,
-  anchorDate,
-  setStartOfCurrMonth,
-  locale,
-  theme,
-}: 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
-      style={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        padding: '0.125rem',
-        paddingTop: '0.25rem',
-        paddingBottom: '0.25rem',
-      }}
-    >
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: '0.25rem',
-        }}
-      >
-        <button
-          type="button"
-          style={{
-            borderStyle: 'solid',
-            borderWidth: 1,
-            fontFamily: theme?.fontFamily,
-            borderColor: theme?.borderColor || '#E5E7EB',
-            background: theme?.backgroundColor || 'white',
-            display: 'inline-flex',
-            padding: '0.25rem',
-            marginRight: '0.0625rem',
-            fontSize: '0.875rem',
-            fontWeight: 500,
-            borderRadius: '0.25rem',
-            boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-            outline: enableYearPagination ? 'none' : '2px solid transparent',
-            outlineOffset: '2px',
-            cursor: 'pointer',
-          }}
-          onClick={() => handlePaginationClick('prevYear')}
-        >
-          <DoubleArrowLeftHeadIcon
-            style={{
-              height: '1.25rem',
-              width: '1.25rem',
-              color: theme?.primaryTextColor || '#364153',
-            }}
-            aria-hidden="true"
-          />
-        </button>
-        <button
-          style={{
-            borderStyle: 'solid',
-            borderBottomWidth: 1,
-            borderBottomColor: theme?.borderColor || '#E5E7EB',
-            background: theme?.backgroundColor || 'white',
-            borderWidth: 1,
-            fontFamily: theme?.fontFamily,
-            borderColor: theme?.borderColor || '#E5E7EB',
-            display: 'inline-flex',
-            padding: '0.25rem',
-            marginRight: '0.0625rem',
-            fontSize: '0.875rem',
-            fontWeight: 500,
-            borderRadius: '0.25rem',
-            boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-            outline: enableYearPagination ? 'none' : '2px solid transparent',
-            outlineOffset: '2px',
-            cursor: 'pointer',
-          }}
-          type="button"
-          name="prevMonth"
-          onClick={() => handlePaginationClick('prevMonth')}
-        >
-          <ArrowLeftHeadIcon
-            style={{
-              height: '1.25rem',
-              width: '1.25rem',
-              color: theme?.primaryTextColor || '#364153',
-            }}
-            aria-hidden="true"
-          />
-        </button>
-      </div>
-      <h2
-        style={{
-          color: theme?.textColor || '#364153',
-          fontSize: '0.875rem',
-          fontFamily: theme?.fontFamily,
-          fontWeight: '700',
-        }}
-      >
-        {displayedTitle}
-      </h2>
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          marginRight: '0.25rem',
-          marginLeft: '0.25rem',
-        }}
-      >
-        <button
-          style={{
-            borderStyle: 'solid',
-            borderBottomWidth: 1,
-            borderBottomColor: theme?.borderColor || '#E5E7EB',
-            background: theme?.backgroundColor || 'white',
-            borderWidth: 1,
-            borderColor: theme?.borderColor || '#E5E7EB',
-            fontFamily: theme?.fontFamily,
-            display: 'inline-flex',
-            padding: '0.25rem',
-            marginRight: '0.0625rem',
-            fontSize: '0.875rem',
-            fontWeight: 500,
-            borderRadius: '0.25rem',
-            boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-            outline: enableYearPagination ? 'none' : '2px solid transparent',
-            outlineOffset: '2px',
-            cursor: 'pointer',
-          }}
-          type="button"
-          name="nextMonth"
-          onClick={() => handlePaginationClick('nextMonth')}
-        >
-          <ArrowRightHeadIcon
-            style={{
-              height: '1.25rem',
-              width: '1.25rem',
-              color: theme?.primaryTextColor || '#364153',
-            }}
-            aria-hidden="true"
-          />
-        </button>
-        <button
-          style={{
-            background: theme?.backgroundColor || 'white',
-            borderStyle: 'solid',
-            borderWidth: 1,
-            borderColor: theme?.borderColor || '#E5E7EB',
-            display: 'inline-flex',
-            padding: '0.25rem',
-            marginRight: '0.0625rem',
-            fontFamily: theme?.fontFamily,
-            fontSize: '0.875rem',
-            fontWeight: 500,
-            borderRadius: '0.25rem',
-            boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-            outline: enableYearPagination ? 'none' : '2px solid transparent',
-            outlineOffset: '2px',
-            cursor: 'pointer',
-          }}
-          type="button"
-          onClick={() => handlePaginationClick('nextYear')}
-        >
-          <DoubleArrowRightHeadIcon
-            style={{
-              height: '1.25rem',
-              width: '1.25rem',
-              color: theme?.primaryTextColor || '#364153',
-            }}
-            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;
-  theme: any;
-}
-
-const CalendarBody = ({
-  anchorDate,
-  selectedStartDate,
-  selectedEndDate,
-  onDateClick,
-  minDate,
-  maxDate,
-  locale,
-  theme,
-}: 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
-        style={{
-          color: theme?.primaryTextColor || '#364153',
-          textAlign: 'center',
-          fontSize: '0.75rem',
-          fontWeight: '500',
-          display: 'grid',
-          gridTemplateColumns: 'repeat(7, minmax(0, 1fr))',
-        }}
-      >
-        {weekdays.map(dayName => (
-          <div
-            key={dayName}
-            style={{ width: '100%', display: 'flex', justifyContent: 'center' }}
-          >
-            <div
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                width: '100%',
-                height: '2.25rem',
-                fontFamily: theme?.fontFamily,
-              }}
-            >
-              {dayName}
-            </div>
-          </div>
-        ))}
-      </div>
-      <div
-        style={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(7, minmax(0, 1fr))',
-          paddingBottom: 8,
-        }}
-      >
-        {displayedDates.map(date => {
-          const isCurrentDateDisabled = isDateDisabled(
-            date,
-            minDate,
-            maxDate,
-            firstDayOfDisplayedMonth,
-            lastDayOfDisplayedMonth
-          );
-
-          return (
-            <div key={date.toString()} style={{ width: '100%' }}>
-              <button
-                style={{
-                  border: 'none',
-                  height: '1.5rem',
-                  display: 'flex',
-                  width: '100%',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  fontFamily: theme?.fontFamily,
-                  ...getDateStyles(
-                    theme,
-                    date,
-                    selectedStartDate,
-                    selectedEndDate,
-                    hoveredDate,
-                    isCurrentDateDisabled
-                  ),
-                }}
-                type="button"
-                onClick={() => onDateClick(date)}
-                onPointerEnter={() => setHoveredDate?.(date)}
-                onPointerLeave={() => setHoveredDate?.(undefined)}
-                // className={twMerge(fontSize.sm)}
-                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;
-  theme: any;
-}
-
-const Calendar = ({
-  enableYearPagination,
-  anchorDate,
-  setStartOfCurrMonth,
-  startDate,
-  endDate,
-  minDate,
-  maxDate,
-  onDateClick,
-  locale,
-  theme,
-}: CalendarProps) => {
-  return (
-    <div
-      style={{
-        paddingLeft: '0.75rem',
-        paddingRight: '0.75rem',
-        paddingTop: '0.25rem',
-        paddingBottom: '0.25rem',
-      }}
-    >
-      <CalendarHeader
-        enableYearPagination={enableYearPagination}
-        anchorDate={anchorDate}
-        setStartOfCurrMonth={setStartOfCurrMonth}
-        locale={locale}
-        theme={theme}
-      />
-      <CalendarBody
-        anchorDate={anchorDate}
-        selectedStartDate={startDate}
-        selectedEndDate={endDate}
-        onDateClick={onDateClick}
-        minDate={minDate}
-        maxDate={maxDate}
-        locale={locale}
-        theme={theme}
-      />
-    </div>
-  );
-};
-
-export default Calendar;

package/src/DateRangePicker/DateRangePicker.tsx

@@ -1,261 +0,0 @@
-/* eslint-disable react/display-name */
-// @ts-nocheck
-import React, { useRef, useState } from 'react';
-
-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,
-  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;
-  theme: any;
-}
-
-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,
-      theme,
-      ...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}
-          style={{ position: 'relative', width: '100%' }}
-          // className={twMerge(
-          //   makeDateRangePickerClassName('root'),
-          //   'qq-relative qq-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}
-            theme={theme}
-          />
-          {/* Calendar Modal */}
-          <Modal
-            theme={theme}
-            showModal={showCalendar}
-            setShowModal={setShowCalendar}
-            parentRef={calendarRef}
-            width={288}
-            maxHeight="fit-content"
-          >
-            <Calendar
-              enableYearPagination={enableYearPagination}
-              anchorDate={anchorDate}
-              // setAnchorDate={setAnchorDate}
-              startDate={selectedStartDate}
-              endDate={selectedEndDate}
-              minDate={minDate}
-              maxDate={maxDate}
-              onDateClick={handleDateClick}
-              locale={locale}
-              setStartOfCurrMonth={setStartOfCurrMonth}
-              theme={theme}
-            />
-          </Modal>
-          {/* Dropdpown Modal */}
-          <Modal
-            showModal={showDropdown}
-            setShowModal={setShowDropdown}
-            parentRef={dropdownRef}
-            theme={theme}
-          >
-            <SelectedValueContext.Provider
-              value={{
-                selectedValue: selectedDropdownValue,
-                handleValueChange: handleDropdownOptionClick,
-              }}
-            >
-              <HoveredValueContext.Provider
-                value={{ hoveredValue: hoveredDropdownValue }}
-              >
-                {dropdownOptions.map(
-                  ({ value, text }: DateRangePickerOption, index: number) => (
-                    <DropdownItem
-                      key={value}
-                      value={value}
-                      text={text}
-                      theme={theme}
-                      lastItem={dropdownOptions.length - 1 === index}
-                    />
-                  )
-                )}
-              </HoveredValueContext.Provider>
-            </SelectedValueContext.Provider>
-          </Modal>
-        </div>
-      </BaseColorContext.Provider>
-    );
-  }
-);
-
-export default DateRangePicker;