@quillsql/react 1.1.1 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quillsql/react",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "access": "public",
   "description": "Quill React components for building dashboards and reporting.",
   "main": "lib/index.js",
@@ -11,7 +11,8 @@
     "lint:fix": "eslint --fix 'src/**/*.{ts,tsx}'",
     "prettier": "prettier --check 'src/**/*.{ts,tsx}'",
     "prettier:fix": "prettier --write 'src/**/*.{ts,tsx}'",
-    "build:css": "postcss src/styles.css -o lib/styles.css"
+    "build:css": "postcss src/styles.css -o lib/styles.css",
+    "prefix-classnames": "node ./prefix-classnames.js"
   },
   "keywords": [],
   "author": "",
@@ -41,6 +42,7 @@
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
+    "glob": "^10.2.2",
     "postcss": "^8.4.21",
     "postcss-cli": "^10.1.0",
     "prettier": "^2.8.7"

package/prefix-classnames.js

@@ -0,0 +1,50 @@
+const fs = require('fs');
+const path = require('path');
+const { glob } = require('glob');
+
+const rootDir = path.resolve(__dirname);
+const classNameRegex = /className=["']([\w\s-]+)["']/g;
+
+console.log('Root directory:', rootDir);
+
+try {
+  const files = glob.sync('**/*.{js,jsx,tsx}', {
+    cwd: rootDir,
+    ignore: '**/node_modules/**',
+  });
+
+  console.log('Files found:', files);
+
+  files.forEach(file => {
+    console.log('Processing file:', file);
+    const filePath = path.join(rootDir, file);
+    fs.readFile(filePath, 'utf-8', (err, data) => {
+      if (err) {
+        console.error('Error reading file:', err);
+        return;
+      }
+
+      const result = data.replace(classNameRegex, (match, p1) => {
+        const classNames = p1.split(' ');
+        const prefixedClassNames = classNames.map(className => {
+          if (className.startsWith('qq-')) {
+            return className;
+          } else {
+            return `qq-${className}`;
+          }
+        });
+        return `className="${prefixedClassNames.join(' ')}"`;
+      });
+
+      fs.writeFile(filePath, result, 'utf-8', err => {
+        if (err) {
+          console.error('Error writing file:', err);
+          return;
+        }
+        console.log('File updated successfully:', filePath);
+      });
+    });
+  });
+} catch (error) {
+  console.error('Error in glob.sync():', error);
+}

package/src/BarList.tsx

@@ -138,6 +138,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
         ref={ref}
         style={{
           width: '100%',
+          height: '100%',
           marginLeft: 25,
           // background: 'red',
           marginTop: 20,
@@ -146,16 +147,16 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
         }}
         className={twMerge(
           // makeBarListClassName('root'),
-          'flex justify-between',
-          'space-x-6',
+          'qq-flex qq-justify-between',
+          'qq-space-x-6',
           className
         )}
         {...other}
       >
         <div
           //   className={twMerge(makeBarListClassName('bars'), 'relative w-full')}
-          className="relative-w-full bg-[#212121]"
-          style={{ width: '100%' }}
+          className="qq-relative-w-full"
+          style={{ width: '100%', height: '100%' }}
         >
           {data.slice(0, Math.floor(NUM_TO_SHOW / 2)).map((item, idx) => {
             //   const Icon = item.icon;
@@ -163,7 +164,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
 
             return (
               <div
-                className="flex flex-row items-center"
+                className="qq-flex qq-flex-row qq-items-center"
                 key={item[xAxisField] + idx}
               >
                 <div
@@ -173,17 +174,20 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                   <p
                     className={twMerge(
                       // makeBarListClassName('barText'),
-                      'whitespace-nowrap truncate',
-                      'text-gray-500',
-                      'text-sm'
+                      'qq-whitespace-nowrap truncate',
+                      'qq-text-gray-500',
+                      'qq-text-sm'
                     )}
                   >
                     {item[xAxisField]}
                   </p>
                 </div>
-                <div style={{ width: '100%' }} className="flex flex-col">
+                <div
+                  style={{ width: '100%', height: '100%' }}
+                  className="qq-flex qq-flex-col"
+                >
                   <div
-                    className={`flex items-center h-9 rounded mb-2`}
+                    className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
                     style={{
                       width: `${widths[idx]}%`,
                       transition: showAnimation ? 'all 2s' : '',
@@ -191,14 +195,17 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                     }}
                   >
                     <div
-                      className={twMerge('absolute max-w-full flex', 'ml-2')}
+                      className={twMerge(
+                        'qq-absolute qq-max-w-full qq-flex',
+                        'qq-ml-2'
+                      )}
                     >
                       <p
                         className={twMerge(
                           // makeBarListClassName('barText'),
-                          'whitespace-nowrap truncate',
-                          'text-gray-500',
-                          'text-sm'
+                          'qq-whitespace-nowrap truncate',
+                          'qq-text-gray-500',
+                          'qq-text-sm'
                         )}
                       >
                         {yAxisFields[0].label}
@@ -206,7 +213,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                     </div>
                   </div>
                   <div
-                    className={`flex items-center h-9 rounded mb-2`}
+                    className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
                     style={{
                       width: `${widths2[idx]}%`,
                       transition: showAnimation ? 'all 2s' : '',
@@ -214,14 +221,17 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                     }}
                   >
                     <div
-                      className={twMerge('absolute max-w-full flex', 'ml-2')}
+                      className={twMerge(
+                        'qq-absolute qq-max-w-full qq-flex',
+                        'qq-ml-2'
+                      )}
                     >
                       <p
                         className={twMerge(
                           // makeBarListClassName('barText'),
-                          'whitespace-nowrap truncate',
-                          'text-gray-500',
-                          'text-sm'
+                          'qq-whitespace-nowrap truncate',
+                          'qq-text-gray-500',
+                          'qq-text-sm'
                         )}
                       >
                         {yAxisFields[1].label}
@@ -234,31 +244,36 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
             );
           })}
           {data.length > NUM_TO_SHOW && (
-            <div style={{ color: theme.chartLabelColor }} className="text-sm">
+            <div
+              style={{ color: theme.chartLabelColor }}
+              className="qq-text-sm"
+            >
               ...{data.length - NUM_TO_SHOW} more
             </div>
           )}
         </div>
         {/* eslint-disable prettier/prettier */}
         <div
-          className={(makeBarListClassName('labels'), 'text-right min-w-min')}
+          className={
+            (makeBarListClassName('labels'), 'qq-text-right qq-min-w-min')
+          }
         >
           {data.slice(0, NUM_TO_SHOW).map((item, idx) => (
             <div
               key={item[xAxisField] + 'label' + idx}
               className={twMerge(
                 makeBarListClassName('labelWrapper'),
-                'flex justify-end items-center',
-                'h-9',
-                idx === data.length - 1 ? 'mb-0' : 'mb-2'
+                'qq-flex qq-justify-end qq-items-center',
+                'qq-h-9',
+                idx === data.length - 1 ? 'qq-mb-0' : 'qq-mb-2'
               )}
             >
               <p
                 className={twMerge(
                   makeBarListClassName('labelText'),
-                  'whitespace-nowrap truncate',
-                  'text-gray-500',
-                  'text-sm'
+                  'qq-whitespace-nowrap truncate',
+                  'qq-text-gray-500',
+                  'qq-text-sm'
                 )}
               >
                 {valueFormatter(item[yAxisFields[0].field])}
@@ -275,7 +290,9 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
       ref={ref}
       style={{
         width: '100%',
-        marginLeft: 25,
+        height: '100%',
+        // height: hei
+        // marginLeft: 25,
         // background: 'red',
         marginTop: 20,
         paddingRight: 25,
@@ -283,16 +300,16 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
       }}
       className={twMerge(
         // makeBarListClassName('root'),
-        'flex justify-between',
-        'space-x-6',
+        'qq-flex qq-justify-between qq-h-full qq-w-full',
+        'qq-space-x-6',
         className
       )}
       {...other}
     >
       <div
         //   className={twMerge(makeBarListClassName('bars'), 'relative w-full')}
-        className="relative-w-full bg-[#212121]"
-        style={{ width: '100%' }}
+        className="qq-relative-w-full"
+        style={{ width: 'calc(100%)', height: '100%', paddingLeft: 25 }}
       >
         {data.slice(0, NUM_TO_SHOW).map((item, idx) => {
           //   const Icon = item.icon;
@@ -301,20 +318,25 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
           return (
             <div
               key={item[xAxisField] + 'label' + idx}
-              className={`flex items-center h-9 rounded mb-2`}
+              className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
               style={{
                 width: `${widths[idx]}%`,
                 transition: showAnimation ? 'all 2s' : '',
                 backgroundColor: hexToRgbaWith10PercentAlpha(colors[0]),
               }}
             >
-              <div className={twMerge('absolute max-w-full flex', 'ml-2')}>
+              <div
+                className={twMerge(
+                  'qq-absolute qq-max-w-full qq-flex',
+                  'qq-ml-2'
+                )}
+              >
                 <p
                   className={twMerge(
                     // makeBarListClassName('barText'),
-                    'whitespace-nowrap truncate',
-                    'text-gray-500',
-                    'text-sm'
+                    'qq-whitespace-nowrap truncate',
+                    'qq-text-gray-500',
+                    'qq-text-sm'
                   )}
                 >
                   {item[xAxisField]}
@@ -324,29 +346,33 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
           );
         })}
         {data.length > NUM_TO_SHOW && (
-          <div style={{ color: theme.chartLabelColor }} className="text-sm">
+          <div style={{ color: theme.chartLabelColor }} className="qq-text-sm">
             ...{data.length - NUM_TO_SHOW} more
           </div>
         )}
       </div>
       {/* eslint-disable prettier/prettier */}
-      <div className={(makeBarListClassName('labels'), 'text-right min-w-min')}>
+      <div
+        className={
+          (makeBarListClassName('labels'), 'qq-text-right qq-min-w-min')
+        }
+      >
         {data.slice(0, NUM_TO_SHOW).map((item, idx) => (
           <div
             key={item[xAxisField] + 'value' + idx}
             className={twMerge(
               makeBarListClassName('labelWrapper'),
-              'flex justify-end items-center',
-              'h-9',
-              idx === data.length - 1 ? 'mb-0' : 'mb-2'
+              'qq-flex qq-justify-end qq-items-center',
+              'qq-h-9',
+              idx === data.length - 1 ? 'qq-mb-0' : 'qq-mb-2'
             )}
           >
             <p
               className={twMerge(
                 makeBarListClassName('labelText'),
-                'whitespace-nowrap truncate',
-                'text-gray-500',
-                'text-sm'
+                'qq-whitespace-nowrap qq-truncate',
+                'qq-text-gray-500',
+                'qq-text-sm'
               )}
             >
               {valueFormatter(item[yAxisFields[0].field])}

package/src/Chart.tsx

@@ -199,11 +199,17 @@ const labelFormatter = (name: string) => {
 
 export const ChartTooltipFrame = ({
   children,
+  theme,
 }: {
   children: React.ReactNode;
 }) => (
   <div
-    className="bg-white text-sm rounded-md border shadow-lg"
+    style={{
+      borderStyle: 'solid',
+      borderColor: theme.borderColor || '#E5E7EB',
+      borderWidth: 1,
+    }}
+    className="qq-bg-white qq-text-sm qq-rounded-md qq-shadow-lg"
     // className={twMerge(
     //   'bg-white',
     //   'font-normal',
@@ -221,17 +227,24 @@ export interface ChartTooltipRowProps {
   value: string;
   name: string;
   color: Color;
+  thee: any;
 }
 
 export const ChartTooltipRow = ({
   value,
   name,
   color,
+  theme,
 }: 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' }}
+        style={{
+          background: color,
+          borderWidth: 2,
+          borderStyle: 'solid',
+          borderColor: 'white',
+        }}
         className={twMerge(
           // 'shrink-0',
           // 'bg-black',
@@ -239,10 +252,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
         )}
@@ -252,16 +265,28 @@ 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"
+        style={{
+          marginTop: 0,
+          marginBottom: 0,
+          fontFamily: theme.fontFamily,
+          color: theme.primaryTextColor,
+        }}
+        className="qq-font-medium qq-tabular-nums qq-text-right qq-whitespace-nowrap qq-text-black"
       >
         {value}
       </p>
     </div>
     <p
+      style={{
+        marginTop: 0,
+        marginBottom: 0,
+        fontFamily: theme.fontFamily,
+        color: theme.secondaryTextColor,
+      }}
       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
       )}
     >
@@ -276,6 +301,7 @@ export interface ChartTooltipProps {
   label: string;
   colors: string[];
   valueFormatter: any;
+  theme: any;
 }
 
 const ChartTooltip = ({
@@ -284,12 +310,21 @@ const ChartTooltip = ({
   label,
   colors,
   valueFormatter,
+  theme,
 }: ChartTooltipProps) => {
   if (active && payload) {
     return (
-      <ChartTooltipFrame>
+      <ChartTooltipFrame theme={theme}>
         <div
-          className="flex flex-col py-2 px-4 border-b gray-200"
+          style={{
+            borderStyle: 'solid',
+            borderBottomColor: theme.borderColor || '#E5E7EB',
+            borderTop: 'none',
+            borderLeft: 'none',
+            borderRight: 'none',
+            borderBottomWidth: 1,
+          }}
+          className="qq-flex qq-flex-col qq-py-2 qq-px-4 qq-gray-200"
           // className={
           // twMerge()
           // getColorClassNames(DEFAULT_COLOR, colorPalette.lightBorder)
@@ -300,12 +335,18 @@ const ChartTooltip = ({
           // }
         >
           <p
-            style={{ textAlign: 'left' }}
+            style={{
+              textAlign: 'left',
+              marginTop: 0,
+              marginBottom: 0,
+              fontFamily: theme.fontFamily,
+              color: theme.primaryTextColor,
+            }}
             className={twMerge(
-              'text-elem',
-              'text-black',
-              'font-medium',
-              'gray-700'
+              'qq-text-elem',
+              'qq-text-black',
+              'qq-font-medium',
+              'qq-gray-700'
               // getColorClassNames(DEFAULT_COLOR, colorPalette.darkText)
               //   .textColor,
               // fontWeight.md
@@ -319,7 +360,7 @@ const ChartTooltip = ({
         </div>
 
         <div
-          className="px-4 space-y-1 py-2 px-4"
+          className="qq-px-4 qq-space-y-1 qq-py-2 qq-px-4"
           // className={
           // twMerge()
           // spacing.twoXl.paddingX,
@@ -335,6 +376,7 @@ const ChartTooltip = ({
                 name={labelFormatter(name)}
                 // color={categoryColors.get(name) ?? BaseColors.Blue}
                 color={colors[idx]}
+                theme={theme}
               />
             )
           )}
@@ -519,16 +561,25 @@ const ChartUpdater: React.FC<ChartProps> = ({
         className="flex flex-col flex-1 h-[100%]"
         style={{ ...containerStyle, marginLeft: 25 }}
       >
-        <Skeleton
-          count={1}
-          height={containerStyle?.height}
-          borderRadius={8}
-          // highlightColor="#F7F7F8"
-          highlightColor="#FDFDFD"
-          // baseColor="#F3F4F6"
-          baseColor="#F9F9FA"
-          width={'calc(100% - 50px)'}
-        />
+        <div style={{ height: containerStyle?.height || 300, width: '100%' }}>
+          <Skeleton
+            count={1}
+            // height={containerStyle?.height}
+            height={
+              containerStyle?.height && containerStyle?.marginTop
+                ? containerStyle?.height + containerStyle?.marginTop
+                : containerStyle?.height
+                ? containerStyle?.height
+                : 300
+            }
+            borderRadius={8}
+            // highlightColor="#F7F7F8"
+            highlightColor="#FDFDFD"
+            // baseColor="#F3F4F6"
+            baseColor="#F9F9FA"
+            width="100%"
+          />
+        </div>
       </div>
     );
   }
@@ -550,6 +601,7 @@ const ChartUpdater: React.FC<ChartProps> = ({
         category={yAxisFields[0].field}
         index={xAxisField}
         colors={colors}
+        theme={theme}
       />
     );
   }
@@ -597,7 +649,7 @@ const ChartUpdater: React.FC<ChartProps> = ({
     return (
       <div
         style={{
-          // fontFamily: theme.fontFamily,
+          fontFamily: theme.fontFamily,
           fontSize: 32,
           color: theme.primaryTextColor,
           fontWeight: '600',
@@ -609,10 +661,10 @@ const ChartUpdater: React.FC<ChartProps> = ({
           maxWidth: '100%',
           textAlign: 'left',
           overflow: 'hidden',
-          height: '100%',
+          height: containerStyle?.height || '100%',
           // background: 'red',
         }}
-        className="flex flex-col text-xl"
+        className="qq-flex qq-flex-col qq-text-xl"
       >
         {formatNumber(
           chartConfig.rows[0][chartConfig.xAxisField],
@@ -631,6 +683,7 @@ const ChartUpdater: React.FC<ChartProps> = ({
       xAxisField={chartConfig.xAxisField}
       xAxisLabel={chartConfig.xAxisLabel}
       containerStyle={containerStyle}
+      theme={theme}
     />
   );
 };
@@ -719,7 +772,10 @@ function BarChart({
 }) {
   const newColors = findComplementaryAndAnalogousColors(colors[0], colors[1]);
   return (
-    <div style={containerStyle} className="flex flex-col flex-1 h-full w-full">
+    <div
+      style={containerStyle}
+      className="qq-flex qq-flex-col qq-flex-1 qq-h-full qq-w-full"
+    >
       <ResponsiveContainer width="100%" height={'100%'}>
         <ReChartsBarChart
           data={data}
@@ -800,6 +856,7 @@ function BarChart({
             content={({ active, payload, label }) => {
               return (
                 <ChartTooltip
+                  theme={theme}
                   active={active}
                   payload={payload}
                   label={label}
@@ -842,6 +899,7 @@ function LineChart({
   containerStyle,
   xAxisField,
   xAxisLabel,
+  theme,
 }: {
   colors: string[];
   yAxisFields: any[];
@@ -849,13 +907,17 @@ function LineChart({
   containerStyle?: React.CSSProperties;
   xAxisField: string;
   xAxisLabel: string;
+  theme: any;
 }) {
   // console.log('CONTAINER: ', containerStyle);
   if (!yAxisFields || !yAxisFields.length) {
     return null;
   }
   return (
-    <div style={containerStyle} className="flex flex-col flex-1 h-full w-full">
+    <div
+      style={containerStyle}
+      className="qq-flex qq-flex-col qq-flex-1 qq-h-full qq-w-full"
+    >
       <ResponsiveContainer width="100%" height={'100%'}>
         <ReChartsAreaChart data={data}>
           <CartesianGrid
@@ -916,6 +978,7 @@ function LineChart({
                   label={label}
                   valueFormatter={valueFormatter}
                   colors={colors}
+                  theme={theme}
                 />
               );
             }}