@quillsql/react 1.1.8 → 1.2.0

package/src/DateRangePicker/Calendar.tsx

@@ -1,5 +1,5 @@
 import React, { Dispatch, SetStateAction, useContext, useState } from 'react';
-import { twMerge } from 'tailwind-merge';
+// import { twMerge } from 'tailwind-merge';
 import {
   add,
   eachDayOfInterval,
@@ -21,19 +21,7 @@ import {
   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 = [
   '',
@@ -87,53 +75,49 @@ const CalendarHeader = ({
 
   return (
     <div
-      className={twMerge(
-        makeDateRangePickerClassName('calendarHeader'),
-        'qq-flex qq-justify-between qq-items-center',
-        spacing.twoXs.paddingX,
-        spacing.sm.paddingY
-      )}
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: '0.125rem',
+        paddingTop: '0.25rem',
+        paddingBottom: '0.25rem',
+      }}
     >
       <div
-        className={twMerge(
-          makeDateRangePickerClassName('calendarHeaderPrevSelection'),
-          'qq-flex qq-items-center qq-space-x-1'
-        )}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '0.25rem',
+        }}
       >
         <button
+          type="button"
           style={{
             borderStyle: 'solid',
-            borderBottomWidth: 1,
-            borderBottomColor: theme?.borderColor || '#E5E7EB',
+            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',
           }}
-          type="button"
-          className={twMerge(
-            makeDateRangePickerClassName('calendarHeaderPrevYearButton'),
-            'qq-inline-flex focus:qq-outline-none focus:qq-ring-2',
-            !enableYearPagination && 'qq-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
-            )}
+            style={{
+              height: '1.25rem',
+              width: '1.25rem',
+              color: theme?.primaryTextColor || '#364153',
+            }}
             aria-hidden="true"
           />
         </button>
@@ -143,53 +127,51 @@ const CalendarHeader = ({
             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"
-          className={twMerge(
-            makeDateRangePickerClassName('calendarHeaderPrevMonthButton'),
-            'qq-inline-flex focus:qq-outline-none focus:qq-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
-            )}
+            style={{
+              height: '1.25rem',
+              width: '1.25rem',
+              color: theme?.primaryTextColor || '#364153',
+            }}
             aria-hidden="true"
           />
         </button>
       </div>
       <h2
-        className={twMerge(
-          makeDateRangePickerClassName('calendarHeaderText'),
-          'qq-text-elem',
-          getColorClassNames(DEFAULT_COLOR, colorPalette.darkestText).textColor,
-          fontSize.sm,
-          fontWeight.lg
-        )}
+        style={{
+          color: theme?.textColor || '#364153',
+          fontSize: '0.875rem',
+          fontFamily: theme?.fontFamily,
+          fontWeight: '700',
+        }}
       >
         {displayedTitle}
       </h2>
       <div
-        className={twMerge(
-          makeDateRangePickerClassName('calendarHeaderNextSelection'),
-          'qq-flex qq-items-center qq-space-x-1'
-        )}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          marginRight: '0.25rem',
+          marginLeft: '0.25rem',
+        }}
       >
         <button
           style={{
@@ -197,33 +179,30 @@ const CalendarHeader = ({
             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"
-          className={twMerge(
-            makeDateRangePickerClassName('calendarHeaderNextMonthButton'),
-            'qq-inline-flex focus:qq-outline-none focus:qq-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
-            )}
+            style={{
+              height: '1.25rem',
+              width: '1.25rem',
+              color: theme?.primaryTextColor || '#364153',
+            }}
             aria-hidden="true"
           />
         </button>
@@ -233,35 +212,27 @@ const CalendarHeader = ({
             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"
-          className={twMerge(
-            makeDateRangePickerClassName('calendarHeaderNextYearButton'),
-            'qq-inline-flex focus:qq-outline-none focus:qq-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'),
-              'qq-shrink-0 qq-flex-0',
-              getColorClassNames(DEFAULT_COLOR, colorPalette.darkText)
-                .textColor,
-              sizing.lg.height,
-              sizing.lg.width
-            )}
+            style={{
+              height: '1.25rem',
+              width: '1.25rem',
+              color: theme?.primaryTextColor || '#364153',
+            }}
             aria-hidden="true"
           />
         </button>
@@ -329,21 +300,29 @@ const CalendarBody = ({
   return (
     <>
       <div
-        className={twMerge(
-          makeDateRangePickerClassName('calendarBodyWeekdays'),
-          'qq-grid qq-grid-cols-7 qq-text-center',
-          getColorClassNames(DEFAULT_COLOR, colorPalette.ring).textColor,
-          fontSize.xs,
-          fontWeight.md
-        )}
+        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} className="qq-w-full qq-flex qq-justify-center">
+          <div
+            key={dayName}
+            style={{ width: '100%', display: 'flex', justifyContent: 'center' }}
+          >
             <div
-              className={twMerge(
-                'qq-flex qq-items-center qq-justify-center qq-w-full',
-                sizing.threeXl.height
-              )}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: '100%',
+                height: '2.25rem',
+                fontFamily: theme?.fontFamily,
+              }}
             >
               {dayName}
             </div>
@@ -351,10 +330,11 @@ const CalendarBody = ({
         ))}
       </div>
       <div
-        className={twMerge(
-          makeDateRangePickerClassName('calendarBodyDatesGrid'),
-          'qq-grid qq-grid-cols-7'
-        )}
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(7, minmax(0, 1fr))',
+          paddingBottom: 8,
+        }}
       >
         {displayedDates.map(date => {
           const isCurrentDateDisabled = isDateDisabled(
@@ -366,33 +346,30 @@ const CalendarBody = ({
           );
 
           return (
-            <div
-              key={date.toString()}
-              className={twMerge(
-                makeDateRangePickerClassName('calendarBodyDate'),
-                colStartClasses[getDay(date)],
-                'qq-w-full'
-              )}
-            >
+            <div key={date.toString()} style={{ width: '100%' }}>
               <button
-                style={{ border: 'none' }}
-                type="button"
-                onClick={() => onDateClick(date)}
-                onPointerEnter={() => setHoveredDate?.(date)}
-                onPointerLeave={() => setHoveredDate?.(undefined)}
-                className={twMerge(
-                  'qq-w-full qq-flex qq-items-center qq-justify-center',
-                  sizing.threeXl.height,
-                  fontSize.sm,
-                  getDateStyles(
+                style={{
+                  border: 'none',
+                  height: '1.5rem',
+                  display: 'flex',
+                  width: '100%',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontFamily: theme?.fontFamily,
+                  ...getDateStyles(
+                    theme,
                     date,
                     selectedStartDate,
                     selectedEndDate,
                     hoveredDate,
-                    isCurrentDateDisabled,
-                    color
-                  )
-                )}
+                    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 })}>
@@ -433,7 +410,14 @@ const Calendar = ({
   theme,
 }: CalendarProps) => {
   return (
-    <div className={twMerge(spacing.lg.paddingX, spacing.twoXs.paddingY)}>
+    <div
+      style={{
+        paddingLeft: '0.75rem',
+        paddingRight: '0.75rem',
+        paddingTop: '0.25rem',
+        paddingBottom: '0.25rem',
+      }}
+    >
       <CalendarHeader
         enableYearPagination={enableYearPagination}
         anchorDate={anchorDate}

package/src/DateRangePicker/DateRangePicker.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable react/display-name */
 // @ts-nocheck
 import React, { useRef, useState } from 'react';
-import { twMerge } from 'tailwind-merge';
 
 import { startOfMonth, startOfToday, sub } from 'date-fns';
 import { enUS } from 'date-fns/locale';
@@ -18,7 +17,6 @@ import {
   defaultOptions,
   getEndDateByDropdownValue,
   getStartDateByDropdownValue,
-  makeDateRangePickerClassName,
   parseEndDate,
   parseStartDate,
 } from './dateRangePickerUtils';
@@ -175,11 +173,12 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
       <BaseColorContext.Provider value={color}>
         <div
           ref={ref}
-          className={twMerge(
-            makeDateRangePickerClassName('root'),
-            'qq-relative qq-w-full',
-            className
-          )}
+          style={{ position: 'relative', width: '100%' }}
+          // className={twMerge(
+          //   makeDateRangePickerClassName('root'),
+          //   'qq-relative qq-w-full',
+          //   className
+          // )}
           {...other}
         >
           <DateRangePickerButton
@@ -202,12 +201,12 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
           />
           {/* Calendar Modal */}
           <Modal
-            className={makeDateRangePickerClassName('calendarModal')}
+            theme={theme}
             showModal={showCalendar}
             setShowModal={setShowCalendar}
             parentRef={calendarRef}
             width={288}
-            maxHeight="qq-max-h-fit"
+            maxHeight="fit-content"
           >
             <Calendar
               enableYearPagination={enableYearPagination}
@@ -225,10 +224,10 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
           </Modal>
           {/* Dropdpown Modal */}
           <Modal
-            className={makeDateRangePickerClassName('dropdownModal')}
             showModal={showDropdown}
             setShowModal={setShowDropdown}
             parentRef={dropdownRef}
+            theme={theme}
           >
             <SelectedValueContext.Provider
               value={{
@@ -240,12 +239,13 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
                 value={{ hoveredValue: hoveredDropdownValue }}
               >
                 {dropdownOptions.map(
-                  ({ value, text }: DateRangePickerOption) => (
+                  ({ value, text }: DateRangePickerOption, index: number) => (
                     <DropdownItem
                       key={value}
                       value={value}
                       text={text}
                       theme={theme}
+                      lastItem={dropdownOptions.length - 1 === index}
                     />
                   )
                 )}