@quillsql/react 1.1.8 → 1.2.0

package/src/PieChart.tsx

@@ -2,7 +2,6 @@
 /* eslint-disable react/display-name */
 // @ts-nocheck
 import React, { useRef, useState, useEffect, CSSProperties } from 'react';
-import { twMerge } from 'tailwind-merge';
 import { Pie, PieChart, ResponsiveContainer, Tooltip, Legend } from 'recharts';
 
 // const data = [
@@ -230,83 +229,6 @@ export type FlexDirection = 'row' | 'col' | 'row-reverse' | 'col-reverse';
 export const defaultValueFormatter: ValueFormatter = (value: number) =>
   (value * 1).toFixed(1) + '%';
 
-export const BaseColors: { [key: string]: Color } = {
-  Slate: 'slate',
-  Gray: 'gray',
-  Zinc: 'zinc',
-  Neutral: 'neutral',
-  Stone: 'stone',
-  Red: 'red',
-  Orange: 'orange',
-  Amber: 'amber',
-  Yellow: 'yellow',
-  Lime: 'lime',
-  Green: 'green',
-  Emerald: 'emerald',
-  Teal: 'teal',
-  Cyan: 'cyan',
-  Sky: 'sky',
-  Blue: 'blue',
-  Indigo: 'indigo',
-  Violet: 'violet',
-  Purple: 'purple',
-  Fuchsia: 'fuchsia',
-  Pink: 'pink',
-  Rose: 'rose',
-};
-
-export const hexColors: { [color: string]: string } = {
-  [BaseColors.Slate]: '#64748b',
-  [BaseColors.Gray]: '#6b7280',
-  [BaseColors.Zinc]: '#71717a',
-  [BaseColors.Neutral]: '#737373',
-  [BaseColors.Stone]: '#78716c',
-  [BaseColors.Red]: '#ef4444',
-  [BaseColors.Orange]: '#f97316',
-  [BaseColors.Amber]: '#f59e0b',
-  [BaseColors.Yellow]: '#eab308',
-  [BaseColors.Lime]: '#84cc16',
-  [BaseColors.Green]: '#22c55e',
-  [BaseColors.Emerald]: '#10b981',
-  [BaseColors.Teal]: '#14b8a6',
-  [BaseColors.Cyan]: '#06b6d4',
-  [BaseColors.Sky]: '#0ea5e9',
-  [BaseColors.Blue]: '#3b82f6',
-  [BaseColors.Indigo]: '#6366f1',
-  [BaseColors.Violet]: '#8b5cf6',
-  [BaseColors.Purple]: '#a855f7',
-  [BaseColors.Fuchsia]: '#d946ef',
-  [BaseColors.Pink]: '#ec4899',
-  [BaseColors.Rose]: '#f43f5e',
-  [BaseColors.Black]: '#000000',
-  [BaseColors.White]: '#ffffff',
-};
-
-export const themeColorRange: Color[] = [
-  BaseColors.Cyan,
-  BaseColors.Sky,
-  BaseColors.Blue,
-  BaseColors.Indigo,
-  BaseColors.Violet,
-  BaseColors.Purple,
-  BaseColors.Fuchsia,
-  BaseColors.Slate,
-  BaseColors.Gray,
-  BaseColors.Zinc,
-  BaseColors.Neutral,
-  BaseColors.Stone,
-  BaseColors.Red,
-  BaseColors.Orange,
-  BaseColors.Amber,
-  BaseColors.Yellow,
-  BaseColors.Lime,
-  BaseColors.Green,
-  BaseColors.Emerald,
-  BaseColors.Teal,
-  BaseColors.Pink,
-  BaseColors.Rose,
-];
-
 export const sumNumericArray = (arr: number[]) =>
   arr.reduce((prefixSum, num) => prefixSum + num, 0);
 
@@ -391,9 +313,14 @@ export const ChartTooltipFrame = ({
       borderStyle: 'solid',
       borderColor: theme?.borderColor || '#E5E7EB',
       borderWidth: 1,
+      background: theme?.backgroundColor || '#ffffff',
+      fontSize: '0.875rem',
+      borderRadius: '0.375rem',
+      boxShadow:
+        '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
     }}
     // style={{ transform: 'translateX(-120px)' }}
-    className="qq-bg-white qq-text-sm qq-rounded-md qq-shadow-lg"
+    // className="qq-bg-white qq-text-sm qq-rounded-md qq-shadow-lg"
     // className={twMerge(
     //   'bg-white',
     //   'font-normal',
@@ -420,29 +347,52 @@ export const ChartTooltipRow = ({
   color,
   theme,
 }: ChartTooltipRowProps) => (
-  <div className="qq-flex qq-items-center qq-justify-between qq-space-x-8">
-    <div className="qq-flex qq-items-center qq-space-x-2">
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      minWidth: 120,
+      // minHeight: 27,
+      // margin: '0 2rem',
+    }}
+  >
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        // margin: '0 0.5rem',
+        // minWidth: 120,
+      }}
+    >
       <span
         style={{
           background: color,
           borderWidth: 2,
           borderStyle: 'solid',
           borderColor: 'white',
+          height: '0.5rem',
+          width: '0.5rem',
+          boxShadow:
+            '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+          borderRadius: '9999px',
+          marginRight: 5,
         }}
-        className={twMerge(
-          // 'shrink-0',
-          // 'bg-black',
-          // 'bg-white',
-          // 'border-black',
-          // sizing.sm.height,
-          // sizing.sm.width,
-          'qq-h-3',
-          'qq-w-3',
-          'qq-shadow',
-          'qq-rounded-full'
-          // border.md.all,
-          // boxShadow.md
-        )}
+        // className={twMerge(
+        // 'shrink-0',
+        // 'bg-black',
+        // 'bg-white',
+        // 'border-black',
+        // sizing.sm.height,
+        // sizing.sm.width,
+        // 'qq-h-3',
+        // 'qq-w-3',
+        // 'qq-shadow',
+        // 'qq-rounded-full'
+        // border.md.all,
+        // boxShadow.md
+        // )}
       />
       <p
         // className={twMerge(
@@ -454,8 +404,12 @@ export const ChartTooltipRow = ({
           marginBottom: 0,
           fontFamily: theme?.fontFamily,
           color: theme?.primaryTextColor,
+          paddingTop: 2,
+          paddingBottom: 2,
+          fontSize: theme?.fontSizeSmall || '0.875rem',
+          fontWeight: theme?.fontWeightMedium || '500',
         }}
-        className="qq-font-medium qq-tabular-nums qq-text-right qq-whitespace-nowrap"
+        // className="qq-font-medium qq-tabular-nums qq-text-right qq-whitespace-nowrap"
       >
         {value}
       </p>
@@ -466,13 +420,19 @@ export const ChartTooltipRow = ({
         marginBottom: 0,
         fontFamily: theme?.fontFamily,
         color: theme?.secondaryTextColor,
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        textAlign: 'right',
+        fontSize: theme?.fontSizeSmall || '0.875rem',
+        fontWeight: theme?.fontWeightNormal || '400',
       }}
-      className={twMerge(
-        'qq-text-right qq-whitespace-nowrap'
-        // getColorClassNames(DEFAULT_COLOR, colorPalette.text).textColor,
-        // 'qq-text-gray-500'
-        // fontWeight.sm
-      )}
+      // className={twMerge(
+      //   'qq-text-right qq-whitespace-nowrap'
+      // getColorClassNames(DEFAULT_COLOR, colorPalette.text).textColor,
+      // 'qq-text-gray-500'
+      // fontWeight.sm
+      // )}
     >
       {name}
     </p>
@@ -498,7 +458,13 @@ export const DonutChartTooltip = ({
       <ChartTooltipFrame theme={theme}>
         <div
           //   style={{ transform: 'translateX(-120px)' }}
-          className={twMerge('qq-px-4', 'qq-py-2')}
+          // className={twMerge('qq-px-4', 'qq-py-2')}
+          style={{
+            paddingLeft: '1rem',
+            paddingRight: '1rem',
+            paddingTop: '0.5rem',
+            paddingBottom: '0.5rem',
+          }}
         >
           <ChartTooltipRow
             value={valueFormatter(payloadRow.value)}
@@ -756,11 +722,19 @@ const PieChartWrapper = React.forwardRef<HTMLDivElement, DonutChartProps>(
     return (
       <div
         ref={ref}
-        style={containerStyle}
-        className={twMerge(
-          'w-full h-full flex flex-row items-center',
-          className
-        )}
+        style={{
+          ...containerStyle,
+          width: '100%',
+          // height: '100%',
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          boxSizing: 'content-box',
+        }}
+        // className={twMerge(
+        //   'w-full h-full flex flex-row items-center',
+        //   className
+        // )}
         {...other}
       >
         <ResponsiveContainer width="100%" height="100%">
@@ -826,7 +800,9 @@ const PieChartWrapper = React.forwardRef<HTMLDivElement, DonutChartProps>(
 
 function Legend2({ payload, colors }: { payload: any; colors: string[] }) {
   return (
-    <div className="flex flex-col min-w-[130px] max-w-[130px] w-full">
+    <div
+    // className="flex flex-col min-w-[130px] max-w-[130px] w-full"
+    >
       {/* @ts-ignore */}
       {payload.map((item, idx) => {
         if (idx > 9) {
@@ -835,7 +811,7 @@ function Legend2({ payload, colors }: { payload: any; colors: string[] }) {
         return (
           <div
             key={item.value}
-            className="flex flex-row items-center min-w-[130px] max-w-[130px]"
+            // className="flex flex-row items-center min-w-[130px] max-w-[130px]"
           >
             <div
               style={{
@@ -855,7 +831,7 @@ function Legend2({ payload, colors }: { payload: any; colors: string[] }) {
                 display: 'block',
                 maxWidth: 120,
               }}
-              className="qq-text-sm qq-text-gray-600 qq-whitespace-nowrap qq-overflow-hidden qq-overflow-ellipsis qq-text-sm qq-font-normal"
+              // className="qq-text-sm qq-text-gray-600 qq-whitespace-nowrap qq-overflow-hidden qq-overflow-ellipsis qq-text-sm qq-font-normal"
             >
               {item.value}
             </div>

package/src/components/Dropdown/Dropdown.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable react/display-name */
 import React, { useRef, useState } from 'react';
-import { twMerge } from 'tailwind-merge';
 
 import { HoveredValueContext, SelectedValueContext } from '../../contexts';
 
@@ -8,29 +7,10 @@ import { useInternalState, useSelectOnKeyDown } from '../../hooks';
 
 import { ArrowDownHeadIcon } from '../../assets';
 
-import {
-  BaseColors,
-  border,
-  borderRadius,
-  boxShadow,
-  fontSize,
-  fontWeight,
-  getColorClassNames,
-  makeClassName,
-  mergeRefs,
-  sizing,
-  spacing,
-} from '../../lib';
-import {
-  constructValueToNameMapping,
-  getSelectButtonColors,
-  hasValue,
-} from '../selectUtils';
+import { mergeRefs } from '../../lib';
+import { constructValueToNameMapping, hasValue } from '../selectUtils';
 import { DropdownItemProps } from './DropdownItem';
 import Modal from '../Modal';
-import { DEFAULT_COLOR, colorPalette } from '../../lib/theme';
-
-const makeDropdownClassName = makeClassName('Dropdown');
 
 export interface DropdownProps extends React.HTMLAttributes<HTMLDivElement> {
   value?: string;
@@ -92,60 +72,62 @@ const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
       <div
         ref={mergeRefs([dropdownRef, ref])}
         onKeyDown={handleKeyDown}
-        className={twMerge(
-          makeDropdownClassName('root'),
-          'qq-relative qq-w-full qq-min-w-[10rem]',
-          className
-        )}
+        style={{
+          position: 'relative',
+          width: '100%',
+          minWidth: '10rem',
+        }}
         {...other}
       >
         <button
           style={{
-            // borderColor: theme.borderColor || '#E5E7EB',
-            // borderStyle: 'solid',
-            border: 'none',
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            width: '100%',
+            outline: 'none',
+            padding: '1.5rem 2rem',
+            borderRadius: '0.375rem',
+            border: '2px solid',
+            boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+            cursor: 'pointer',
             background: 'white',
           }}
           type="button"
-          className={twMerge(
-            makeDropdownClassName('button'),
-            'qq-flex qq-justify-between qq-items-center qq-w-full focus:qq-outline-none focus:qq-ring-2',
-            getSelectButtonColors(hasSelection, disabled),
-            getColorClassNames(BaseColors.Blue, colorPalette.lightRing)
-              .focusRingColor,
-            Icon ? spacing.xl.paddingLeft : spacing.twoXl.paddingLeft,
-            spacing.twoXl.paddingRight,
-            spacing.sm.paddingY,
-            borderRadius.md.all,
-            border.sm.all,
-            boxShadow.sm
-          )}
           onClick={() => setIsFocused(!isFocused)}
           disabled={disabled}
         >
-          <div className="qq-flex qq-justify-start qq-items-center qq-truncate">
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'start',
+              alignItems: 'center',
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+            }}
+          >
             {Icon ? (
               <Icon
-                className={twMerge(
-                  makeDropdownClassName('icon'),
-                  'qq-shrink-0',
-                  sizing.lg.height,
-                  sizing.lg.width,
-                  getColorClassNames(DEFAULT_COLOR, colorPalette.lightText)
-                    .textColor,
-                  spacing.lg.marginRight
-                )}
+                style={{
+                  flexShrink: 0,
+                  height: '1.5rem',
+                  width: '1.5rem',
+                  color: theme?.secondaryTextColor || '#6C727F',
+                  marginRight: '1.5rem',
+                }}
                 aria-hidden="true"
               />
             ) : null}
             <p
-              style={{ margin: 0 }}
-              className={twMerge(
-                makeDropdownClassName('text'),
-                'qq-whitespace-nowrap qq-truncate',
-                fontSize.sm,
-                fontWeight.md
-              )}
+              style={{
+                margin: 0,
+                fontSize: '0.875rem',
+                fontWeight: '500',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+              }}
             >
               {selectedValue
                 ? valueToNameMapping.get(selectedValue)
@@ -153,19 +135,18 @@ const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
             </p>
           </div>
           <ArrowDownHeadIcon
-            className={twMerge(
-              makeDropdownClassName('arrowDownIcon'),
-              'qq-flex-none',
-              sizing.lg.height,
-              sizing.lg.width,
-              spacing.twoXs.negativeMarginRight,
-              getColorClassNames(DEFAULT_COLOR, colorPalette.lightText)
-                .textColor
-            )}
+            style={{
+              flexShrink: 0,
+              height: '1.5rem',
+              width: '1.5rem',
+              marginRight: '-0.25rem',
+              color: theme?.secondaryTextColor || '#6C727F',
+            }}
             aria-hidden="true"
           />
         </button>
         <Modal
+          theme={theme}
           showModal={isFocused}
           setShowModal={setIsFocused}
           parentRef={dropdownRef}

package/src/components/Dropdown/DropdownItem.tsx

@@ -1,97 +1,62 @@
 /* eslint-disable react/display-name */
 import React, { useContext } from 'react';
-import { twMerge } from 'tailwind-merge';
 
 import { HoveredValueContext, SelectedValueContext } from '../../contexts';
 
-import { fontSize } from '../../lib/font';
-import { sizing } from '../../lib/sizing';
-import { spacing } from '../../lib/spacing';
-
-import { getColorClassNames, makeClassName } from '../../lib';
-import { DEFAULT_COLOR, colorPalette } from '../../lib/theme';
-
-const makeDropdownItemClassName = makeClassName('DropdownItem');
-
 export interface DropdownItemProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   value: string;
   text?: string;
   icon?: React.ElementType;
   theme: any;
+  lastItem?: boolean;
 }
 
 const DropdownItem = React.forwardRef<HTMLButtonElement, DropdownItemProps>(
   (props, ref) => {
-    const { value, text, icon, className, theme, ...other } = props;
+    const { value, text, icon, className, theme, lastItem, ...other } = props;
     const { selectedValue, handleValueChange } =
       useContext(SelectedValueContext);
     const { hoveredValue } = useContext(HoveredValueContext);
     const isActive = selectedValue === value;
     const isHovered = hoveredValue === value;
-    const bgColor = isActive
-      ? getColorClassNames(DEFAULT_COLOR, colorPalette.lightBackground).bgColor
-      : isHovered
-      ? getColorClassNames(DEFAULT_COLOR, colorPalette.canvasBackground).bgColor
-      : getColorClassNames(DEFAULT_COLOR, colorPalette.canvasBackground)
-          .hoverBgColor;
-    const textColor = isActive
-      ? getColorClassNames(DEFAULT_COLOR, colorPalette.darkestText).textColor
-      : getColorClassNames(DEFAULT_COLOR, colorPalette.darkText).textColor;
 
     const Icon = icon ? icon : null;
     return (
       <button
         ref={ref}
         style={{
-          // borderColor: theme.borderColor || '#E5E7EB',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'start',
+          width: '100%',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          padding: '0.75rem 2rem',
+          fontSize: '0.875rem',
           borderStyle: 'solid',
-          borderBottomWidth: 1,
+          borderBottomWidth: lastItem ? '0px' : '1px',
           borderBottomColor: theme?.borderColor || '#E5E7EB',
           background: theme?.backgroundColor || 'white',
           borderTop: 'none',
           borderRight: 'none',
           borderLeft: 'none',
           cursor: 'pointer',
+          color: theme?.primaryTextColor || '#364153',
         }}
         type="button"
         onClick={() => handleValueChange?.(value)}
-        className={twMerge(
-          makeDropdownItemClassName('root'),
-          'qq-flex qq-items-center qq-justify-start qq-w-full qq-truncate',
-          spacing.twoXl.paddingX,
-          spacing.md.paddingY,
-          fontSize.sm,
-          // bgColor,
-          textColor,
-          className
-        )}
         {...other}
       >
-        {Icon ? (
-          <Icon
-            className={twMerge(
-              makeDropdownItemClassName('icon'),
-              'qq-flex-none',
-              sizing.lg.height,
-              sizing.lg.width,
-              spacing.lg.marginRight,
-              getColorClassNames(DEFAULT_COLOR, colorPalette.lightText)
-                .textColor
-            )}
-            aria-hidden="true"
-          />
-        ) : null}
         <p
           style={{
             margin: 0,
             fontFamily: theme?.fontFamily,
             color: theme?.primaryTextColor,
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
           }}
-          className={twMerge(
-            makeDropdownItemClassName('text'),
-            'qq-text-sm qq-whitespace-nowrap qq-truncate'
-          )}
         >
           {text ?? value}
         </p>

package/src/components/Modal/Modal.tsx

@@ -1,19 +1,10 @@
 /* eslint-disable react/display-name */
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { twMerge } from 'tailwind-merge';
 
 import { useOnClickOutside, useOnWindowResize } from '../../hooks';
 
 import { HorizontalPosition } from '../../lib/inputTypes';
-import {
-  border,
-  borderRadius,
-  boxShadow,
-  getColorClassNames,
-  mergeRefs,
-  spacing,
-} from '../../lib';
-import { DEFAULT_COLOR, colorPalette } from '../../lib/theme';
+import { mergeRefs } from '../../lib';
 
 export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
   showModal: boolean;
@@ -25,6 +16,7 @@ export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
   maxHeight?: string;
   anchorPosition?: HorizontalPosition;
   children: React.ReactNode;
+  theme: any;
 }
 
 const Modal = React.forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
@@ -33,9 +25,10 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
     setShowModal,
     parentRef,
     width,
-    maxHeight = 'max-h-72',
+    maxHeight = '18rem',
     children,
     className,
+    theme,
     ...other
   } = props;
   const [modalExceedsWindow, setModalExceedsWindow] = useState(false);
@@ -55,10 +48,7 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
   );
 
   const getAbsoluteSpacing = () => {
-    if (!modalExceedsWindow) {
-      return spacing.none.left;
-    }
-    return spacing.none.right;
+    return modalExceedsWindow ? '0' : '0';
   };
 
   useOnClickOutside(modalRef, e => {
@@ -87,22 +77,51 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
   return showModal ? (
     <div
       ref={mergeRefs([modalRef, ref])}
-      className={twMerge(
-        'qq-absolute qq-z-10 qq-divide-y qq-overflow-y-auto',
-        width ? '' : 'qq-w-full',
-        getAbsoluteSpacing(),
-        maxHeight,
-        getColorClassNames('white').bgColor,
-        getColorClassNames(DEFAULT_COLOR, colorPalette.lightBorder).borderColor,
-        getColorClassNames(DEFAULT_COLOR, colorPalette.lightBorder).divideColor,
-        spacing.twoXs.marginTop,
-        spacing.twoXs.marginBottom,
-        borderRadius.md.all,
-        border.sm.all,
-        boxShadow.lg,
-        className
-      )}
-      style={{ width }}
+      style={{
+        position: 'absolute',
+        zIndex: 10,
+        overflowY: 'auto',
+        width: width ? width : '100%',
+        left: getAbsoluteSpacing(),
+        right: getAbsoluteSpacing(),
+        maxHeight: maxHeight,
+        backgroundColor: theme?.backgroundColor || 'white',
+        borderColor: theme?.borderColor || '#E5E7EB',
+        // borderTopColor: getColorClassNames(
+        //   DEFAULT_COLOR,
+        //   colorPalette.lightBorder
+        // ).borderColor,
+        // borderBottomColor: getColorClassNames(
+        //   DEFAULT_COLOR,
+        //   colorPalette.lightBorder
+        // ).borderColor,
+        // borderLeftColor: getColorClassNames(
+        //   DEFAULT_COLOR,
+        //   colorPalette.lightBorder
+        // ).borderColor,
+        // borderRightColor: getColorClassNames(
+        //   DEFAULT_COLOR,
+        //   colorPalette.lightBorder
+        // ).borderColor,
+        borderTopStyle: 'solid',
+        borderBottomStyle: 'solid',
+        borderLeftStyle: 'solid',
+        borderRightStyle: 'solid',
+        borderTopWidth: 1,
+        borderBottomWidth: 1,
+        borderLeftWidth: 1,
+        borderRightWidth: 1,
+        marginTop: '0.5rem',
+        marginBottom: '0.5rem',
+        borderRadius: '0.375rem',
+        boxShadow:
+          '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+        // boxShadow: '0 1px 3px 0 #0000001A, 0 1px 2px 0 #0000000F',
+        // borderTopWidth: '2px',
+        // borderBottomWidth: '2px',
+        // borderLeftWidth: '2px',
+        // borderRightWidth: '2px',
+      }}
       {...other}
     >
       {children}