@quillsql/react 1.1.2 → 1.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quillsql/react",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "access": "public",
   "description": "Quill React components for building dashboards and reporting.",
   "main": "lib/index.js",

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,
@@ -155,7 +156,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
         <div
           //   className={twMerge(makeBarListClassName('bars'), 'relative w-full')}
           className="qq-relative-w-full"
-          style={{ width: '100%' }}
+          style={{ width: '100%', height: '100%' }}
         >
           {data.slice(0, Math.floor(NUM_TO_SHOW / 2)).map((item, idx) => {
             //   const Icon = item.icon;
@@ -171,6 +172,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                   style={{ maxWidth: 130, minWidth: 130, overflow: 'hidden' }}
                 >
                   <p
+                    style={{ fontFamily: theme?.fontFamily }}
                     className={twMerge(
                       // makeBarListClassName('barText'),
                       'qq-whitespace-nowrap truncate',
@@ -181,7 +183,10 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                     {item[xAxisField]}
                   </p>
                 </div>
-                <div style={{ width: '100%' }} className="qq-flex qq-flex-col">
+                <div
+                  style={{ width: '100%', height: '100%' }}
+                  className="qq-flex qq-flex-col"
+                >
                   <div
                     className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
                     style={{
@@ -197,6 +202,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                       )}
                     >
                       <p
+                        style={{ fontFamily: theme?.fontFamily }}
                         className={twMerge(
                           // makeBarListClassName('barText'),
                           'qq-whitespace-nowrap truncate',
@@ -223,6 +229,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                       )}
                     >
                       <p
+                        style={{ fontFamily: theme?.fontFamily }}
                         className={twMerge(
                           // makeBarListClassName('barText'),
                           'qq-whitespace-nowrap truncate',
@@ -241,7 +248,10 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
           })}
           {data.length > NUM_TO_SHOW && (
             <div
-              style={{ color: theme.chartLabelColor }}
+              style={{
+                color: theme?.chartLabelColor,
+                fontFamily: theme?.fontFamily,
+              }}
               className="qq-text-sm"
             >
               ...{data.length - NUM_TO_SHOW} more
@@ -265,6 +275,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
               )}
             >
               <p
+                style={{ fontFamily: theme?.fontFamily }}
                 className={twMerge(
                   makeBarListClassName('labelText'),
                   'qq-whitespace-nowrap truncate',
@@ -286,7 +297,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,
@@ -294,7 +307,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
       }}
       className={twMerge(
         // makeBarListClassName('root'),
-        'qq-flex qq-justify-between',
+        'qq-flex qq-justify-between qq-h-full qq-w-full',
         'qq-space-x-6',
         className
       )}
@@ -303,7 +316,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
       <div
         //   className={twMerge(makeBarListClassName('bars'), 'relative w-full')}
         className="qq-relative-w-full"
-        style={{ width: '100%' }}
+        style={{ width: 'calc(100%)', height: '100%', paddingLeft: 25 }}
       >
         {data.slice(0, NUM_TO_SHOW).map((item, idx) => {
           //   const Icon = item.icon;
@@ -326,6 +339,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                 )}
               >
                 <p
+                  style={{ fontFamily: theme?.fontFamily }}
                   className={twMerge(
                     // makeBarListClassName('barText'),
                     'qq-whitespace-nowrap truncate',
@@ -362,6 +376,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
             )}
           >
             <p
+              style={{ fontFamily: theme?.fontFamily }}
               className={twMerge(
                 makeBarListClassName('labelText'),
                 'qq-whitespace-nowrap qq-truncate',

package/src/Chart.tsx

@@ -199,11 +199,17 @@ const labelFormatter = (name: string) => {
 
 export const ChartTooltipFrame = ({
   children,
+  theme,
 }: {
   children: React.ReactNode;
 }) => (
   <div
-    className="qq-bg-white qq-text-sm qq-rounded-md qq-border qq-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="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',
@@ -252,12 +265,24 @@ export const ChartTooltipRow = ({
         //   'font-medium tabular-nums text-right whitespace-nowrap',
         //   'text-[#212121] !important'
         // )}
+        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(
         'qq-text-right qq-whitespace-nowrap',
         // getColorClassNames(DEFAULT_COLOR, colorPalette.text).textColor,
@@ -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="qq-flex qq-flex-col qq-py-2 qq-px-4 qq-border-b qq-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,7 +335,13 @@ const ChartTooltip = ({
           // }
         >
           <p
-            style={{ textAlign: 'left' }}
+            style={{
+              textAlign: 'left',
+              marginTop: 0,
+              marginBottom: 0,
+              fontFamily: theme.fontFamily,
+              color: theme.primaryTextColor,
+            }}
             className={twMerge(
               'qq-text-elem',
               'qq-text-black',
@@ -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,7 +661,7 @@ const ChartUpdater: React.FC<ChartProps> = ({
           maxWidth: '100%',
           textAlign: 'left',
           overflow: 'hidden',
-          height: '100%',
+          height: containerStyle?.height || '100%',
           // background: 'red',
         }}
         className="qq-flex qq-flex-col qq-text-xl"
@@ -631,6 +683,7 @@ const ChartUpdater: React.FC<ChartProps> = ({
       xAxisField={chartConfig.xAxisField}
       xAxisLabel={chartConfig.xAxisLabel}
       containerStyle={containerStyle}
+      theme={theme}
     />
   );
 };
@@ -803,6 +856,7 @@ function BarChart({
             content={({ active, payload, label }) => {
               return (
                 <ChartTooltip
+                  theme={theme}
                   active={active}
                   payload={payload}
                   label={label}
@@ -845,6 +899,7 @@ function LineChart({
   containerStyle,
   xAxisField,
   xAxisLabel,
+  theme,
 }: {
   colors: string[];
   yAxisFields: any[];
@@ -852,6 +907,7 @@ function LineChart({
   containerStyle?: React.CSSProperties;
   xAxisField: string;
   xAxisLabel: string;
+  theme: any;
 }) {
   // console.log('CONTAINER: ', containerStyle);
   if (!yAxisFields || !yAxisFields.length) {
@@ -880,8 +936,11 @@ function LineChart({
             //   }
             style={{
               fontSize: '12px',
-              fontFamily: 'Inter; Helvetica',
-              // color: '#6269E9',
+              fontFamily:
+                theme?.chartLabelFontFamily ||
+                theme?.fontFamily ||
+                'Inter; Helvetica',
+              color: theme?.chartLabelColor || '#666666',
             }}
             // interval="preserveStartEnd"
             interval="preserveStartEnd"
@@ -906,7 +965,11 @@ function LineChart({
             tick={{ transform: 'translate(-3, 0)' }}
             style={{
               fontSize: '12px',
-              fontFamily: 'Inter; Helvetica',
+              fontFamily:
+                theme?.chartLabelFontFamily ||
+                theme?.fontFamily ||
+                'Inter; Helvetica',
+              color: theme?.chartLabelColor || '#666666',
             }}
             tickFormatter={valueFormatter}
           />
@@ -922,6 +985,7 @@ function LineChart({
                   label={label}
                   valueFormatter={valueFormatter}
                   colors={colors}
+                  theme={theme}
                 />
               );
             }}

package/src/Dashboard.tsx

@@ -99,6 +99,7 @@ export default function Dashboard({
           // change to be set on the dashboard / section as default date range
           defaultValue={[undefined, undefined, '90d']}
           onValueChange={onChangeDateFilter}
+          theme={theme}
         />
       </div>
       {Object.keys(dashboardSections)
@@ -148,7 +149,7 @@ export default function Dashboard({
                     gridTemplateColumns: `repeat(auto-fill,minmax(${
                       maxColumnWidth || 400
                     }px, 1fr))`,
-                    // gridTemplateRows: `repeat(${170}px)`,
+                    gridTemplateRows: `repeat(${170}px)`,
                   }}
                 >
                   {dashboardSections[section]
@@ -272,8 +273,8 @@ export default function Dashboard({
                                       containerStyle={{
                                         display: 'flex',
                                         width: '100%',
-                                        height: 120,
-                                        marginBottom: 50,
+                                        height: 30,
+                                        // marginBottom: 50,
                                         marginTop: 20,
                                       }}
                                       isDateFilter={true}
@@ -293,7 +294,7 @@ export default function Dashboard({
               ) : null}
               <div
                 style={{
-                  width: `100%`,
+                  // width: `100%`,
                   listStyleType: 'none',
                   display: 'grid',
                   gridGap: 25,
@@ -345,8 +346,9 @@ export default function Dashboard({
                             // boxShadow: theme.boxShadow,
                             height: '100%',
                             cursor: 'pointer',
-                            width: '100%',
+                            // width: '100%',
                             paddingRight: 25,
+                            minHeight: rowHeight || 400,
                             borderRadius: 8,
                             paddingTop: 20,
                           }}
@@ -368,6 +370,7 @@ export default function Dashboard({
                                   display: 'flex',
                                   flexDirection: 'column',
                                   justifyContent: 'space-between',
+                                  height: '100%',
                                 }}
                               >
                                 <div
@@ -423,11 +426,12 @@ export default function Dashboard({
                                   {/* <Arrow fill={theme.fontColor} /> */}
                                 </div>
                                 {/* <div style={{ height: 20 }} /> */}
-                                <div style={{ padding: 0 }}>
+                                <div style={{ padding: 0, height: '100%' }}>
                                   <Chart
                                     containerStyle={{
                                       display: 'flex',
                                       width: '100%',
+                                      // TODO: fix fixed height
                                       height: 300,
                                       marginBottom: 50,
                                       marginTop: 30,

package/src/DateRangePicker/Calendar.tsx

@@ -50,6 +50,7 @@ interface CalendarHeaderProps {
   anchorDate: Date;
   setStartOfCurrMonth: Dispatch<SetStateAction<Date | null>>;
   locale: Locale;
+  theme: any;
 }
 
 const CalendarHeader = ({
@@ -57,6 +58,7 @@ const CalendarHeader = ({
   anchorDate,
   setStartOfCurrMonth,
   locale,
+  theme,
 }: CalendarHeaderProps) => {
   const firstDayOfMonth = startOfMonth(anchorDate);
   const handlePaginationClick = (
@@ -99,6 +101,12 @@ const CalendarHeader = ({
         )}
       >
         <button
+          style={{
+            borderStyle: 'solid',
+            borderBottomWidth: 1,
+            borderBottomColor: theme?.borderColor || '#E5E7EB',
+            background: theme?.backgroundColor || 'white',
+          }}
           type="button"
           className={twMerge(
             makeDateRangePickerClassName('calendarHeaderPrevYearButton'),
@@ -130,6 +138,12 @@ const CalendarHeader = ({
           />
         </button>
         <button
+          style={{
+            borderStyle: 'solid',
+            borderBottomWidth: 1,
+            borderBottomColor: theme?.borderColor || '#E5E7EB',
+            background: theme?.backgroundColor || 'white',
+          }}
           type="button"
           name="prevMonth"
           className={twMerge(
@@ -178,6 +192,12 @@ const CalendarHeader = ({
         )}
       >
         <button
+          style={{
+            borderStyle: 'solid',
+            borderBottomWidth: 1,
+            borderBottomColor: theme?.borderColor || '#E5E7EB',
+            background: theme?.backgroundColor || 'white',
+          }}
           type="button"
           name="nextMonth"
           className={twMerge(
@@ -208,6 +228,12 @@ const CalendarHeader = ({
           />
         </button>
         <button
+          style={{
+            background: theme?.backgroundColor || 'white',
+            borderStyle: 'solid',
+            borderWidth: 1,
+            borderColor: theme?.borderColor || '#E5E7EB',
+          }}
           type="button"
           className={twMerge(
             makeDateRangePickerClassName('calendarHeaderNextYearButton'),
@@ -252,6 +278,7 @@ interface CalendarBodyProps {
   minDate: Date | null;
   maxDate: Date | null;
   locale: Locale;
+  theme: any;
 }
 
 const CalendarBody = ({
@@ -262,6 +289,7 @@ const CalendarBody = ({
   minDate,
   maxDate,
   locale,
+  theme,
 }: CalendarBodyProps) => {
   const [hoveredDate, setHoveredDate] = useState<Date | undefined>();
   const color = useContext(BaseColorContext);
@@ -347,6 +375,7 @@ const CalendarBody = ({
               )}
             >
               <button
+                style={{ border: 'none' }}
                 type="button"
                 onClick={() => onDateClick(date)}
                 onPointerEnter={() => setHoveredDate?.(date)}
@@ -388,6 +417,7 @@ export interface CalendarProps {
   maxDate: Date | null;
   onDateClick: (date: Date) => void;
   locale: Locale;
+  theme: any;
 }
 
 const Calendar = ({
@@ -400,6 +430,7 @@ const Calendar = ({
   maxDate,
   onDateClick,
   locale,
+  theme,
 }: CalendarProps) => {
   return (
     <div className={twMerge(spacing.lg.paddingX, spacing.twoXs.paddingY)}>
@@ -408,6 +439,7 @@ const Calendar = ({
         anchorDate={anchorDate}
         setStartOfCurrMonth={setStartOfCurrMonth}
         locale={locale}
+        theme={theme}
       />
       <CalendarBody
         anchorDate={anchorDate}
@@ -417,6 +449,7 @@ const Calendar = ({
         minDate={minDate}
         maxDate={maxDate}
         locale={locale}
+        theme={theme}
       />
     </div>
   );

package/src/DateRangePicker/DateRangePicker.tsx

@@ -57,6 +57,7 @@ export interface DateRangePickerProps
   disabled?: boolean;
   color?: string;
   locale?: Locale;
+  theme: any;
 }
 
 const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
@@ -76,6 +77,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
       enableYearPagination = false,
       locale = enUS,
       className,
+      theme,
       ...other
     } = props;
 
@@ -196,6 +198,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
             onDropdownKeyDown={handleDropdownKeyDown}
             locale={locale}
             dropdownPlaceholder={dropdownPlaceholder}
+            theme={theme}
           />
           {/* Calendar Modal */}
           <Modal
@@ -217,6 +220,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
               onDateClick={handleDateClick}
               locale={locale}
               setStartOfCurrMonth={setStartOfCurrMonth}
+              theme={theme}
             />
           </Modal>
           {/* Dropdpown Modal */}
@@ -237,7 +241,12 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
               >
                 {dropdownOptions.map(
                   ({ value, text }: DateRangePickerOption) => (
-                    <DropdownItem key={value} value={value} text={text} />
+                    <DropdownItem
+                      key={value}
+                      value={value}
+                      text={text}
+                      theme={theme}
+                    />
                   )
                 )}
               </HoveredValueContext.Provider>

package/src/DateRangePicker/DateRangePickerButton.tsx

@@ -39,6 +39,7 @@ interface DateRangePickerButtonProps {
   onDropdownKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
   locale?: Locale;
   dropdownPlaceholder?: string;
+  theme: any;
 }
 
 const DateRangePickerButton = ({
@@ -57,6 +58,7 @@ const DateRangePickerButton = ({
   onDropdownKeyDown,
   locale,
   dropdownPlaceholder = 'Select',
+  theme,
 }: DateRangePickerButtonProps) => {
   const [startDate, endDate, dropdownValue] = value;
 
@@ -83,6 +85,13 @@ const DateRangePickerButton = ({
     >
       <button
         type="button"
+        style={{
+          borderColor: theme?.borderColor || '#E5E7EB',
+          borderStyle: 'solid',
+          fontFamily: theme?.fontFamily,
+          color: theme?.primaryTextColor,
+          cursor: 'pointer',
+        }}
         ref={calendarRef}
         onClick={() => setShowCalendar(!showCalendar)}
         onKeyDown={onCalendarKeyDown}
@@ -115,6 +124,11 @@ const DateRangePickerButton = ({
           aria-hidden="true"
         />
         <p
+          style={{
+            margin: 0,
+            fontFamily: theme?.fontFamily,
+            color: theme?.primaryTextColor,
+          }}
           className={twMerge(
             makeDateRangePickerClassName('calendarButtonText'),
             'qq-whitespace-nowrap qq-truncate',
@@ -128,6 +142,11 @@ const DateRangePickerButton = ({
       {enableDropdown ? (
         <button
           type="button"
+          style={{
+            borderColor: theme?.borderColor || '#E5E7EB',
+            borderStyle: 'solid',
+            cursor: 'pointer',
+          }}
           ref={dropdownRef}
           onClick={() => setShowDropdown(!showDropdown)}
           className={twMerge(
@@ -146,6 +165,11 @@ const DateRangePickerButton = ({
           disabled={disabled}
         >
           <p
+            style={{
+              margin: 0,
+              fontFamily: theme?.fontFamily,
+              color: theme?.primaryTextColor,
+            }}
             className={twMerge(
               makeDateRangePickerClassName('dropdownButtonText'),
               'qq-whitespace-nowrap qq-truncate',