@quillsql/react 1.1.8 → 1.2.0

package/src/DateRangePicker/DateRangePickerButton.tsx

@@ -1,27 +1,10 @@
 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';
+import { formatSelectedDates } from './dateRangePickerUtils';
+import { hasValue } from '../components/selectUtils';
 
 interface DateRangePickerButtonProps {
   value: DateRangePickerValue;
@@ -75,52 +58,83 @@ const DateRangePickerButton = ({
 
   return (
     <div
-      className={twMerge(
-        makeDateRangePickerClassName('button'),
-        'qq-flex qq-items-center qq-justify-between',
-        getColorClassNames('white').bgColor,
-        borderRadius.md.all,
-        boxShadow.sm
-      )}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        borderRadius: '0.375rem',
+        background: theme?.backgroundColor,
+        fontFamily: theme?.fontFamily,
+        boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+      }}
+      // className={twMerge(
+      //   'qq-flex qq-items-center qq-justify-between',
+      //   getColorClassNames('white').bgColor,
+      //   borderRadius.md.all,
+      //   boxShadow.sm
+      // )}
     >
       <button
         type="button"
         style={{
+          fontFamily: theme?.fontFamily,
           borderColor: theme?.borderColor || '#E5E7EB',
           borderStyle: 'solid',
-          fontFamily: theme?.fontFamily,
+          borderWidth: 1,
+          borderRadius: '0.375rem',
+          minHeight: 38,
+          borderRight: 'none',
+          borderTopRightRadius: 0,
+          borderBottomRightRadius: 0,
           color: theme?.primaryTextColor,
           cursor: 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          width: '100%',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          background: theme?.backgroundColor,
+          fontWeight: theme?.fontWeightMedium || '500',
+          // borderRight: enableDropdown
+          //   ? border.none.right
+          //   : twMerge(borderRadius.md.right, border.sm.right),
         }}
         ref={calendarRef}
         onClick={() => setShowCalendar(!showCalendar)}
         onKeyDown={onCalendarKeyDown}
-        className={twMerge(
-          makeDateRangePickerClassName('calendarButton'),
-          'qq-flex qq-items-center qq-w-full qq-truncate focus:qq-outline-none focus:qq-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
-        )}
+        // className={twMerge(
+        //   'qq-flex qq-items-center qq-w-full qq-truncate focus:qq-outline-none focus:qq-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'),
-            'qq-flex-none',
-            getColorClassNames(DEFAULT_COLOR, colorPalette.lightText).textColor,
-            sizing.lg.height,
-            sizing.lg.width,
-            spacing.threeXs.negativeMarginLeft,
-            spacing.lg.marginRight
-          )}
+          style={{
+            flex: 'none',
+            color: theme?.secondaryTextColor,
+            height: '1.25rem',
+            width: '1.25rem',
+            marginLeft: '0.125rem',
+            marginRight: '0.75rem',
+          }}
+          // className={twMerge(
+          // 'qq-flex-none',
+          // getColorClassNames(DEFAULT_COLOR, colorPalette.lightText).textColor,
+          // sizing.lg.height,
+          // sizing.lg.width,
+          //   spacing.threeXs.negativeMarginLeft,
+          //   spacing.lg.marginRight
+          // )}
           aria-hidden="true"
         />
         <p
@@ -128,13 +142,16 @@ const DateRangePickerButton = ({
             margin: 0,
             fontFamily: theme?.fontFamily,
             color: theme?.primaryTextColor,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            fontWeight: theme?.fontWeightMedium || '500',
           }}
-          className={twMerge(
-            makeDateRangePickerClassName('calendarButtonText'),
-            'qq-whitespace-nowrap qq-truncate',
-            fontSize.sm,
-            fontWeight.md
-          )}
+          // className={twMerge(
+          //   'qq-whitespace-nowrap qq-truncate',
+          //   fontSize.sm,
+          //   fontWeight.md
+          // )}
         >
           {calendarText}
         </p>
@@ -143,24 +160,41 @@ const DateRangePickerButton = ({
         <button
           type="button"
           style={{
+            // fontFamily: theme?.fontFamily,
             borderColor: theme?.borderColor || '#E5E7EB',
             borderStyle: 'solid',
+            borderWidth: 1,
             cursor: 'pointer',
+            marginLeft: -1,
+            borderRadius: '0.375rem',
+            width: '12rem',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            paddingLeft: '1rem',
+            paddingRight: '1rem',
+            display: 'inline-flex',
+            minHeight: 38,
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0,
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            background: theme?.backgroundColor,
+            // fontWeight: theme?.fontWeightMedium || '800',
           }}
           ref={dropdownRef}
           onClick={() => setShowDropdown(!showDropdown)}
-          className={twMerge(
-            makeDateRangePickerClassName('dropdownButton'),
-            'qq-inline-flex qq-justify-between qq-w-48 qq-truncate focus:qq-outline-none focus:qq-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
-          )}
+          // className={twMerge(
+          //   'qq-inline-flex qq-justify-between qq-w-48 qq-truncate focus:qq-outline-none focus:qq-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}
         >
@@ -168,27 +202,38 @@ const DateRangePickerButton = ({
             style={{
               margin: 0,
               fontFamily: theme?.fontFamily,
-              color: theme?.primaryTextColor,
+              // fontFamily: 'Avenir',
+              color: theme?.primaryTextColor || '#364153',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              fontWeight: theme?.fontWeightMedium || '500',
+              // background: 'red',
             }}
-            className={twMerge(
-              makeDateRangePickerClassName('dropdownButtonText'),
-              'qq-whitespace-nowrap qq-truncate',
-              fontSize.sm,
-              fontWeight.md
-            )}
+            // className={twMerge(
+            //   'qq-whitespace-nowrap qq-truncate',
+            //   fontSize.sm,
+            //   fontWeight.md
+            // )}
           >
             {dropdownText}
           </p>
           <ArrowDownHeadIcon
-            className={twMerge(
-              makeDateRangePickerClassName('dropdownButtonIcon'),
-              'qq-flex-none',
-              sizing.lg.height,
-              sizing.lg.width,
-              spacing.twoXs.negativeMarginRight,
-              getColorClassNames(DEFAULT_COLOR, colorPalette.lightText)
-                .textColor
-            )}
+            style={{
+              height: '1.25rem',
+              width: '1.25rem',
+              flex: 'none',
+              color: theme?.secondaryTextColor,
+              marginRight: '-0.25rem',
+            }}
+            // className={twMerge(
+            //   'qq-flex-none',
+            //   sizing.lg.height,
+            //   sizing.lg.width,
+            //   spacing.twoXs.negativeMarginRight,
+            //   getColorClassNames(DEFAULT_COLOR, colorPalette.lightText)
+            //     .textColor
+            // )}
             aria-hidden="true"
           />
         </button>

package/src/DateRangePicker/dateRangePickerUtils.tsx

@@ -1,4 +1,3 @@
-import { twMerge } from 'tailwind-merge';
 import {
   addDays,
   format,
@@ -13,17 +12,8 @@ import {
   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');
+import { hexToRgbaWith10PercentAlpha } from '../BarList';
 
 export const getWeekdays = (locale: Locale) => {
   const firstDayOfWeek = startOfWeek(new Date());
@@ -143,52 +133,53 @@ export const defaultOptions: DateRangePickerOption[] = [
 ];
 
 export const getDateStyles = (
+  theme: any,
   date: Date,
   finalStartDate: Date | null,
   finalEndDate: Date | null,
   hoveredDate: Date | undefined,
-  isDateDisabled: boolean,
-  color: Color
-) =>
-  twMerge(
-    getDayBgColorClassName(
+  isDateDisabled: boolean
+) => {
+  return {
+    ...getDayTextClassNames(
+      theme,
       date,
       finalStartDate,
       finalEndDate,
       hoveredDate as Date | null,
-      color,
       isDateDisabled
     ),
-    getDayTextClassNames(
+    // ...getDayHoverBgColorClassName(
+    //   date,
+    //   finalStartDate,
+    //   finalEndDate,
+    //   isDateDisabled
+    // ),
+    ...getDayRoundedClassName(
       date,
       finalStartDate,
       finalEndDate,
-      hoveredDate as Date | null,
-      color,
-      isDateDisabled
+      hoveredDate as Date | null
     ),
-    getDayHoverBgColorClassName(
+    ...getDayBgColorClassName(
+      theme,
       date,
       finalStartDate,
       finalEndDate,
+      hoveredDate as Date | null,
       isDateDisabled
     ),
-    getDayRoundedClassName(
-      date,
-      finalStartDate,
-      finalEndDate,
-      hoveredDate as Date | null
-    )
-  );
+  };
+};
 
 const getDayRoundedClassName = (
   day: Date,
   selectedStartDay: Date | null,
   selectedEndDay: Date | null,
   hoveredDay: Date | null
-): string => {
+): any => {
   if (!selectedStartDay && !selectedEndDay) {
-    return borderRadius.md.all;
+    return { borderRadius: '0.375rem' };
   }
   if (
     selectedStartDay &&
@@ -196,10 +187,13 @@ const getDayRoundedClassName = (
     isEqual(day, selectedStartDay) &&
     isEqual(day, selectedEndDay)
   ) {
-    return borderRadius.md.all;
+    return { borderRadius: '0.375rem' };
   }
   if (selectedStartDay && selectedEndDay && isEqual(day, selectedStartDay)) {
-    return borderRadius.md.left;
+    return {
+      borderBottomLeftRadius: '0.375rem',
+      borderTopLeftRadius: '0.375rem',
+    };
   }
   if (
     selectedStartDay &&
@@ -207,7 +201,7 @@ const getDayRoundedClassName = (
     !hoveredDay &&
     isEqual(day, selectedStartDay)
   ) {
-    return borderRadius.md.all;
+    return { borderRadius: '0.375rem' };
   }
   if (
     selectedStartDay &&
@@ -215,7 +209,7 @@ const getDayRoundedClassName = (
     hoveredDay &&
     day < selectedStartDay
   ) {
-    return borderRadius.md.all;
+    return { borderRadius: '0.375rem' };
   }
   if (
     selectedStartDay &&
@@ -224,7 +218,10 @@ const getDayRoundedClassName = (
     isEqual(day, selectedStartDay) &&
     hoveredDay > selectedStartDay
   ) {
-    return borderRadius.md.left;
+    return {
+      borderBottomLeftRadius: '0.375rem',
+      borderTopLeftRadius: '0.375rem',
+    };
   }
   if (
     selectedStartDay &&
@@ -233,7 +230,7 @@ const getDayRoundedClassName = (
     day > selectedStartDay &&
     day < hoveredDay
   ) {
-    return borderRadius.none.all;
+    return { borderRadius: 0 };
   }
   if (
     selectedStartDay &&
@@ -241,7 +238,7 @@ const getDayRoundedClassName = (
     day > selectedStartDay &&
     day < selectedEndDay
   ) {
-    return borderRadius.none.all;
+    return { borderRadius: 0 };
   }
   if (
     selectedStartDay &&
@@ -250,19 +247,25 @@ const getDayRoundedClassName = (
     isEqual(day, hoveredDay) &&
     !isEqual(day, selectedStartDay)
   ) {
-    return borderRadius.md.right;
+    return {
+      borderBottomRightRadius: '0.375rem',
+      borderTopRightRadius: '0.375rem',
+    };
   }
   if (selectedStartDay && selectedEndDay && isEqual(day, selectedEndDay)) {
-    return borderRadius.md.right;
+    return {
+      borderBottomRightRadius: '0.375rem',
+      borderTopRightRadius: '0.375rem',
+    };
   }
   if (
     selectedStartDay &&
     selectedEndDay &&
     (day < selectedStartDay || day > selectedEndDay)
   ) {
-    return borderRadius.md.all;
+    return { borderRadius: '0.375rem' };
   }
-  return borderRadius.md.all;
+  return { borderRadius: '0.375rem' };
 };
 
 export const displaySelected = (
@@ -312,89 +315,100 @@ export const displaySelected = (
 };
 
 const getDayBgColorClassName = (
+  theme: any,
   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;
+) => {
+  const styles = {
+    background: 'transparent',
+  };
+
+  if (!isDayDisabled) {
+    if (selectedStartDay && isEqual(day, selectedStartDay)) {
+      styles.background = theme?.chartColors[0] || '#6269E9';
+    }
+    if (
+      selectedStartDay &&
+      !selectedEndDay &&
+      hoveredDay &&
+      day > selectedStartDay &&
+      day < hoveredDay
+    ) {
+      styles.background =
+        hexToRgbaWith10PercentAlpha(theme?.chartColors[0]) ||
+        hexToRgbaWith10PercentAlpha('#6269E9');
+    }
+    if (selectedEndDay && isEqual(day, selectedEndDay)) {
+      styles.background = theme?.chartColors[0] || '#6269E9';
+    }
+    if (
+      selectedStartDay &&
+      selectedEndDay &&
+      day > selectedStartDay &&
+      day < selectedEndDay
+    ) {
+      styles.background =
+        hexToRgbaWith10PercentAlpha(theme?.chartColors[0]) ||
+        hexToRgbaWith10PercentAlpha('#6269E9');
+    }
   }
-  return getColorClassNames('transparent').bgColor;
+
+  return styles;
 };
 
 const getDayTextClassNames = (
+  theme: any,
   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;
+) => {
+  const styles = {
+    color: theme?.primaryTextColor || '#364153',
+  };
+
+  if (!isDayDisabled) {
+    if (isToday(day)) {
+      if (
+        (selectedStartDay && isEqual(day, selectedStartDay)) ||
+        (selectedEndDay && isEqual(day, selectedEndDay))
+      ) {
+        styles.color = 'white';
+      } else {
+        styles.color = theme?.primaryTextColor || '#364153';
+      }
+    } else {
+      if (selectedStartDay && isEqual(day, selectedStartDay)) {
+        styles.color = 'white';
+      }
+      if (
+        selectedStartDay &&
+        !selectedEndDay &&
+        hoveredDay &&
+        day > selectedStartDay &&
+        day < hoveredDay
+      ) {
+        styles.color = theme?.primaryTextColor || '#364153';
+      }
+      if (selectedEndDay && isEqual(day, selectedEndDay)) {
+        styles.color = 'white';
+      }
+      if (
+        selectedStartDay &&
+        selectedEndDay &&
+        day > selectedStartDay &&
+        day < selectedEndDay
+      ) {
+        styles.color = theme?.primaryTextColor || '#364153';
+      }
     }
-    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;
+
+  return styles;
 };
 
 const getDayHoverBgColorClassName = (
@@ -402,15 +416,21 @@ const getDayHoverBgColorClassName = (
   selectedStartDay: Date | null,
   selectedEndDay: Date | null,
   isDayDisabled = false
-): string => {
-  if (isDayDisabled) return '';
-  if (selectedStartDay && isEqual(day, selectedStartDay)) {
-    return '';
-  }
-  if (selectedEndDay && isEqual(day, selectedEndDay)) {
-    return '';
+) => {
+  const styles = {
+    background: 'transparent',
+  };
+
+  if (!isDayDisabled) {
+    if (selectedStartDay && isEqual(day, selectedStartDay)) {
+      styles.background = '';
+    }
+    if (selectedEndDay && isEqual(day, selectedEndDay)) {
+      styles.background = '';
+    }
   }
-  return 'hover:bg-gray-200';
+
+  return styles;
 };
 
 export const formatSelectedDates = (