@quillsql/react 1.1.2 → 1.1.4

package/src/PieChart.tsx

@@ -382,12 +382,18 @@ export const parseLabelInput = (
 
 export const ChartTooltipFrame = ({
   children,
+  theme,
 }: {
   children: React.ReactNode;
 }) => (
   <div
+    style={{
+      borderStyle: 'solid',
+      borderColor: theme?.borderColor || '#E5E7EB',
+      borderWidth: 1,
+    }}
     // style={{ transform: 'translateX(-120px)' }}
-    className="qq-bg-white qq-text-sm qq-rounded-md qq-border qq-shadow-lg"
+    className="qq-bg-white qq-text-sm qq-rounded-md qq-shadow-lg"
     // className={twMerge(
     //   'bg-white',
     //   'font-normal',
@@ -405,17 +411,24 @@ export interface ChartTooltipRowProps {
   value: string;
   name: string;
   color: Color;
+  theme: any;
 }
 
 export const ChartTooltipRow = ({
   value,
   name,
   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">
       <span
-        style={{ background: color, borderWidth: 2, borderColor: 'white' }}
+        style={{
+          background: color,
+          borderWidth: 2,
+          borderStyle: 'solid',
+          borderColor: 'white',
+        }}
         className={twMerge(
           // 'shrink-0',
           // 'bg-black',
@@ -436,16 +449,28 @@ export const ChartTooltipRow = ({
         //   'font-medium tabular-nums text-right whitespace-nowrap',
         //   'text-[#212121] !important'
         // )}
-        className="qq-font-medium qq-tabular-nums qq-text-right qq-whitespace-nowrap qq-text-black"
+        style={{
+          marginTop: 0,
+          marginBottom: 0,
+          fontFamily: theme?.fontFamily,
+          color: theme?.primaryTextColor,
+        }}
+        className="qq-font-medium qq-tabular-nums qq-text-right qq-whitespace-nowrap"
       >
         {value}
       </p>
     </div>
     <p
+      style={{
+        marginTop: 0,
+        marginBottom: 0,
+        fontFamily: theme?.fontFamily,
+        color: theme?.secondaryTextColor,
+      }}
       className={twMerge(
-        'qq-text-right qq-whitespace-nowrap',
+        'qq-text-right qq-whitespace-nowrap'
         // getColorClassNames(DEFAULT_COLOR, colorPalette.text).textColor,
-        'qq-text-gray-500'
+        // 'qq-text-gray-500'
         // fontWeight.sm
       )}
     >
@@ -458,17 +483,19 @@ export interface DonutChartTooltipProps {
   active: boolean | undefined;
   payload: any;
   valueFormatter: ValueFormatter;
+  theme: any;
 }
 
 export const DonutChartTooltip = ({
   active,
   payload,
   valueFormatter,
+  theme,
 }: DonutChartTooltipProps) => {
   if (active && payload[0]) {
     const payloadRow = payload[0];
     return (
-      <ChartTooltipFrame>
+      <ChartTooltipFrame theme={theme}>
         <div
           //   style={{ transform: 'translateX(-120px)' }}
           className={twMerge('qq-px-4', 'qq-py-2')}
@@ -477,6 +504,7 @@ export const DonutChartTooltip = ({
             value={valueFormatter(payloadRow.value)}
             name={payloadRow.name}
             color={payloadRow.payload.color}
+            theme={theme}
           />
         </div>
       </ChartTooltipFrame>
@@ -708,6 +736,7 @@ const PieChartWrapper = React.forwardRef<HTMLDivElement, DonutChartProps>(
       showTooltip = true,
       className,
       containerStyle,
+      theme,
       ...other
     } = props;
     const isDonut = variant == 'donut';
@@ -784,6 +813,7 @@ const PieChartWrapper = React.forwardRef<HTMLDivElement, DonutChartProps>(
                   active={active}
                   payload={payload}
                   valueFormatter={valueFormatter}
+                  theme={theme}
                 />
               )}
             />

package/src/components/Dropdown/Dropdown.tsx

@@ -40,6 +40,7 @@ export interface DropdownProps extends React.HTMLAttributes<HTMLDivElement> {
   disabled?: boolean;
   icon?: React.JSXElementConstructor<any>;
   children: React.ReactElement[] | React.ReactElement;
+  theme: any;
 }
 
 const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
@@ -53,6 +54,7 @@ const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
       icon,
       children,
       className,
+      theme,
       ...other
     } = props;
     const [selectedValue, setSelectedValue] = useInternalState(
@@ -98,6 +100,12 @@ const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
         {...other}
       >
         <button
+          style={{
+            // borderColor: theme.borderColor || '#E5E7EB',
+            // borderStyle: 'solid',
+            border: 'none',
+            background: 'white',
+          }}
           type="button"
           className={twMerge(
             makeDropdownClassName('button'),
@@ -131,6 +139,7 @@ const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
               />
             ) : null}
             <p
+              style={{ margin: 0 }}
               className={twMerge(
                 makeDropdownClassName('text'),
                 'qq-whitespace-nowrap qq-truncate',

package/src/components/Dropdown/DropdownItem.tsx

@@ -18,11 +18,12 @@ export interface DropdownItemProps
   value: string;
   text?: string;
   icon?: React.ElementType;
+  theme: any;
 }
 
 const DropdownItem = React.forwardRef<HTMLButtonElement, DropdownItemProps>(
   (props, ref) => {
-    const { value, text, icon, className, ...other } = props;
+    const { value, text, icon, className, theme, ...other } = props;
     const { selectedValue, handleValueChange } =
       useContext(SelectedValueContext);
     const { hoveredValue } = useContext(HoveredValueContext);
@@ -42,6 +43,17 @@ const DropdownItem = React.forwardRef<HTMLButtonElement, DropdownItemProps>(
     return (
       <button
         ref={ref}
+        style={{
+          // borderColor: theme.borderColor || '#E5E7EB',
+          borderStyle: 'solid',
+          borderBottomWidth: 1,
+          borderBottomColor: theme?.borderColor || '#E5E7EB',
+          background: theme?.backgroundColor || 'white',
+          borderTop: 'none',
+          borderRight: 'none',
+          borderLeft: 'none',
+          cursor: 'pointer',
+        }}
         type="button"
         onClick={() => handleValueChange?.(value)}
         className={twMerge(
@@ -50,7 +62,7 @@ const DropdownItem = React.forwardRef<HTMLButtonElement, DropdownItemProps>(
           spacing.twoXl.paddingX,
           spacing.md.paddingY,
           fontSize.sm,
-          bgColor,
+          // bgColor,
           textColor,
           className
         )}
@@ -71,6 +83,11 @@ const DropdownItem = React.forwardRef<HTMLButtonElement, DropdownItemProps>(
           />
         ) : null}
         <p
+          style={{
+            margin: 0,
+            fontFamily: theme?.fontFamily,
+            color: theme?.primaryTextColor,
+          }}
           className={twMerge(
             makeDropdownItemClassName('text'),
             'qq-text-sm qq-whitespace-nowrap qq-truncate'

package/tailwind.config.js

@@ -1,6 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   prefix: 'qq-',
+  corePlugins: {
+    preflight: false,
+  },
   darkMode: false,
   content: [
     './src/**/*.{js,ts,jsx,tsx}',