@quillsql/react 1.1.0 → 1.1.2

package/src/DateRangePicker/DateRangePickerButton.tsx

@@ -75,7 +75,7 @@ const DateRangePickerButton = ({
     <div
       className={twMerge(
         makeDateRangePickerClassName('button'),
-        'flex items-center justify-between',
+        'qq-flex qq-items-center qq-justify-between',
         getColorClassNames('white').bgColor,
         borderRadius.md.all,
         boxShadow.sm
@@ -88,7 +88,7 @@ const DateRangePickerButton = ({
         onKeyDown={onCalendarKeyDown}
         className={twMerge(
           makeDateRangePickerClassName('calendarButton'),
-          'flex items-center w-full truncate focus:outline-none focus:ring-2',
+          '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
@@ -105,7 +105,7 @@ const DateRangePickerButton = ({
         <CalendarIcon
           className={twMerge(
             makeDateRangePickerClassName('calendarButtonIcon'),
-            'flex-none',
+            'qq-flex-none',
             getColorClassNames(DEFAULT_COLOR, colorPalette.lightText).textColor,
             sizing.lg.height,
             sizing.lg.width,
@@ -117,7 +117,7 @@ const DateRangePickerButton = ({
         <p
           className={twMerge(
             makeDateRangePickerClassName('calendarButtonText'),
-            'whitespace-nowrap truncate',
+            'qq-whitespace-nowrap qq-truncate',
             fontSize.sm,
             fontWeight.md
           )}
@@ -132,7 +132,7 @@ const DateRangePickerButton = ({
           onClick={() => setShowDropdown(!showDropdown)}
           className={twMerge(
             makeDateRangePickerClassName('dropdownButton'),
-            'inline-flex justify-between w-48 truncate focus:outline-none focus:ring-2',
+            '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,
@@ -148,7 +148,7 @@ const DateRangePickerButton = ({
           <p
             className={twMerge(
               makeDateRangePickerClassName('dropdownButtonText'),
-              'whitespace-nowrap truncate',
+              'qq-whitespace-nowrap qq-truncate',
               fontSize.sm,
               fontWeight.md
             )}
@@ -158,7 +158,7 @@ const DateRangePickerButton = ({
           <ArrowDownHeadIcon
             className={twMerge(
               makeDateRangePickerClassName('dropdownButtonIcon'),
-              'flex-none',
+              'qq-flex-none',
               sizing.lg.height,
               sizing.lg.width,
               spacing.twoXs.negativeMarginRight,

package/src/DateRangePicker/index.ts

@@ -1,3 +1,4 @@
-export { default as DateRangePicker } from "./DateRangePicker";
+// @ts-nocheck
+export { default as DateRangePicker } from './DateRangePicker';
 
-export { DateRangePickerValue } from "./DateRangePicker";
+export { DateRangePickerValue } from './DateRangePicker';

package/src/PieChart.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 /* 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';
@@ -134,7 +135,7 @@ const ChartLegend = (categories: string[], colors: string[]) => {
   //   });
 
   return (
-    <div ref={legendRef} className="flex items-center justify-end">
+    <div ref={legendRef} className="qq-flex qq-items-center qq-justify-end">
       <Legend
         // @ts-ignore
         categories={categories}
@@ -386,7 +387,7 @@ export const ChartTooltipFrame = ({
 }) => (
   <div
     // style={{ transform: 'translateX(-120px)' }}
-    className="bg-white text-sm rounded-md border shadow-lg"
+    className="qq-bg-white qq-text-sm qq-rounded-md qq-border qq-shadow-lg"
     // className={twMerge(
     //   'bg-white',
     //   'font-normal',
@@ -411,8 +412,8 @@ export const ChartTooltipRow = ({
   name,
   color,
 }: ChartTooltipRowProps) => (
-  <div className="flex items-center justify-between space-x-8">
-    <div className="flex items-center space-x-2">
+  <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' }}
         className={twMerge(
@@ -422,10 +423,10 @@ export const ChartTooltipRow = ({
           // 'border-black',
           // sizing.sm.height,
           // sizing.sm.width,
-          'h-3',
-          'w-3',
-          'shadow',
-          'rounded-full'
+          'qq-h-3',
+          'qq-w-3',
+          'qq-shadow',
+          'qq-rounded-full'
           // border.md.all,
           // boxShadow.md
         )}
@@ -435,16 +436,16 @@ export const ChartTooltipRow = ({
         //   'font-medium tabular-nums text-right whitespace-nowrap',
         //   'text-[#212121] !important'
         // )}
-        className="font-medium tabular-nums text-right whitespace-nowrap text-black"
+        className="qq-font-medium qq-tabular-nums qq-text-right qq-whitespace-nowrap qq-text-black"
       >
         {value}
       </p>
     </div>
     <p
       className={twMerge(
-        'text-right whitespace-nowrap',
+        'qq-text-right qq-whitespace-nowrap',
         // getColorClassNames(DEFAULT_COLOR, colorPalette.text).textColor,
-        'text-gray-500'
+        'qq-text-gray-500'
         // fontWeight.sm
       )}
     >
@@ -470,7 +471,7 @@ export const DonutChartTooltip = ({
       <ChartTooltipFrame>
         <div
           //   style={{ transform: 'translateX(-120px)' }}
-          className={twMerge('px-4', 'py-2')}
+          className={twMerge('qq-px-4', 'qq-py-2')}
         >
           <ChartTooltipRow
             value={valueFormatter(payloadRow.value)}
@@ -572,7 +573,7 @@ function rgbToHsl(rgb) {
   const max = Math.max(r, g, b);
   const min = Math.min(r, g, b);
 
-  let h = 0,
+  const h = 0,
     s = 0,
     l = (max + min) / 2;
 
@@ -824,7 +825,7 @@ function Legend2({ payload, colors }: { payload: any; colors: string[] }) {
                 display: 'block',
                 maxWidth: 120,
               }}
-              className="text-sm text-gray-600 whitespace-nowrap overflow-hidden overflow-ellipsis text-sm 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/QuillProvider.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React, { useContext, useEffect } from 'react';
 import { ContextProvider } from './Context';
 

package/src/components/Dropdown/Dropdown.tsx

@@ -92,7 +92,7 @@ const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
         onKeyDown={handleKeyDown}
         className={twMerge(
           makeDropdownClassName('root'),
-          'relative w-full min-w-[10rem]',
+          'qq-relative qq-w-full qq-min-w-[10rem]',
           className
         )}
         {...other}
@@ -101,7 +101,7 @@ const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
           type="button"
           className={twMerge(
             makeDropdownClassName('button'),
-            'flex justify-between items-center w-full focus:outline-none focus:ring-2',
+            '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,
@@ -115,12 +115,12 @@ const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
           onClick={() => setIsFocused(!isFocused)}
           disabled={disabled}
         >
-          <div className="flex justify-start items-center truncate">
+          <div className="qq-flex qq-justify-start qq-items-center qq-truncate">
             {Icon ? (
               <Icon
                 className={twMerge(
                   makeDropdownClassName('icon'),
-                  'shrink-0',
+                  'qq-shrink-0',
                   sizing.lg.height,
                   sizing.lg.width,
                   getColorClassNames(DEFAULT_COLOR, colorPalette.lightText)
@@ -133,7 +133,7 @@ const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
             <p
               className={twMerge(
                 makeDropdownClassName('text'),
-                'whitespace-nowrap truncate',
+                'qq-whitespace-nowrap qq-truncate',
                 fontSize.sm,
                 fontWeight.md
               )}
@@ -146,7 +146,7 @@ const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
           <ArrowDownHeadIcon
             className={twMerge(
               makeDropdownClassName('arrowDownIcon'),
-              'flex-none',
+              'qq-flex-none',
               sizing.lg.height,
               sizing.lg.width,
               spacing.twoXs.negativeMarginRight,

package/src/components/Dropdown/DropdownItem.tsx

@@ -46,7 +46,7 @@ const DropdownItem = React.forwardRef<HTMLButtonElement, DropdownItemProps>(
         onClick={() => handleValueChange?.(value)}
         className={twMerge(
           makeDropdownItemClassName('root'),
-          'flex items-center justify-start w-full truncate',
+          'qq-flex qq-items-center qq-justify-start qq-w-full qq-truncate',
           spacing.twoXl.paddingX,
           spacing.md.paddingY,
           fontSize.sm,
@@ -60,7 +60,7 @@ const DropdownItem = React.forwardRef<HTMLButtonElement, DropdownItemProps>(
           <Icon
             className={twMerge(
               makeDropdownItemClassName('icon'),
-              'flex-none',
+              'qq-flex-none',
               sizing.lg.height,
               sizing.lg.width,
               spacing.lg.marginRight,
@@ -73,7 +73,7 @@ const DropdownItem = React.forwardRef<HTMLButtonElement, DropdownItemProps>(
         <p
           className={twMerge(
             makeDropdownItemClassName('text'),
-            'text-sm whitespace-nowrap truncate'
+            'qq-text-sm qq-whitespace-nowrap qq-truncate'
           )}
         >
           {text ?? value}

package/src/components/Modal/Modal.tsx

@@ -88,8 +88,8 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
     <div
       ref={mergeRefs([modalRef, ref])}
       className={twMerge(
-        'absolute z-10 divide-y overflow-y-auto',
-        width ? '' : 'w-full',
+        'qq-absolute qq-z-10 qq-divide-y qq-overflow-y-auto',
+        width ? '' : 'qq-w-full',
         getAbsoluteSpacing(),
         maxHeight,
         getColorClassNames('white').bgColor,