feature(dashboard): add new retention chart type

apps/dashboard/src/components/ui/button.tsx

@@ -45,6 +45,26 @@ export interface ButtonProps
   loading?: boolean;
   icon?: LucideIcon;
   responsive?: boolean;
+  autoHeight?: boolean;
+}
+
+function fixHeight({
+  autoHeight,
+  size,
+}: { autoHeight?: boolean; size: ButtonProps['size'] }) {
+  if (autoHeight) {
+    switch (size) {
+      case 'lg':
+        return 'h-auto min-h-11 py-2';
+      case 'icon':
+        return 'h-auto min-h-8 py-1';
+      case 'default':
+        return 'h-auto min-h-10 py-2';
+      default:
+        return 'h-auto min-h-8 py-1';
+    }
+  }
+  return '';
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
@@ -59,6 +79,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       disabled,
       icon,
       responsive,
+      autoHeight,
       ...props
     },
     ref,
@@ -67,7 +88,10 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     const Icon = loading ? Loader2 : (icon ?? null);
     return (
       <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
+        className={cn(
+          buttonVariants({ variant, size, className }),
+          fixHeight({ autoHeight, size }),
+        )}
         ref={ref}
         disabled={loading || disabled}
         {...props}

apps/dashboard/src/components/ui/combobox-advanced.tsx

@@ -6,7 +6,7 @@ import VirtualList from 'rc-virtual-list';
 import * as React from 'react';
 import { useOnClickOutside } from 'usehooks-ts';
 
-import { Button } from './button';
+import { Button, type ButtonProps } from './button';
 import { Checkbox, DumpCheckbox } from './checkbox';
 import { Popover, PopoverContent, PopoverTrigger } from './popover';
 
@@ -19,6 +19,7 @@ interface ComboboxAdvancedProps {
   items: IItem[];
   placeholder: string;
   className?: string;
+  size?: ButtonProps['size'];
 }
 
 export function ComboboxAdvanced({
@@ -27,6 +28,7 @@ export function ComboboxAdvanced({
   onChange,
   placeholder,
   className,
+  size,
 }: ComboboxAdvancedProps) {
   const [open, setOpen] = React.useState(false);
   const [inputValue, setInputValue] = React.useState('');
@@ -99,7 +101,9 @@ export function ComboboxAdvanced({
         <Button
           variant={'outline'}
           onClick={() => setOpen((prev) => !prev)}
-          className={cn('h-auto min-h-10 py-2', className)}
+          className={className}
+          size={size}
+          autoHeight
         >
           <div className="flex w-full flex-wrap gap-1">
             {value.length === 0 && placeholder}

apps/dashboard/src/components/ui/combobox.tsx

@@ -38,6 +38,7 @@ export interface ComboboxProps<T> {
   align?: 'start' | 'end' | 'center';
   portal?: boolean;
   error?: string;
+  disabled?: boolean;
 }
 
 export type ExtendedComboboxProps<T> = Omit<
@@ -61,6 +62,7 @@ export function Combobox<T extends string>({
   align = 'start',
   portal,
   error,
+  disabled,
 }: ComboboxProps<T>) {
   const [open, setOpen] = React.useState(false);
   const [search, setSearch] = React.useState('');
@@ -75,6 +77,7 @@ export function Combobox<T extends string>({
       <PopoverTrigger asChild>
         {children ?? (
           <Button
+            disabled={disabled}
             size={size}
             variant="outline"
             role="combobox"

apps/dashboard/src/components/ui/dropdown-menu.tsx

@@ -4,6 +4,7 @@ import { cn } from '@/utils/cn';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { Check, ChevronRight, Circle } from 'lucide-react';
 import * as React from 'react';
+import { ButtonProps } from './button';
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 

apps/dashboard/src/components/ui/tooltip.tsx

@@ -38,6 +38,7 @@ interface TooltiperProps {
   content: React.ReactNode;
   children: React.ReactNode;
   className?: string;
+  tooltipClassName?: string;
   onClick?: () => void;
   side?: 'top' | 'right' | 'bottom' | 'left';
   delayDuration?: number;
@@ -49,6 +50,7 @@ export function Tooltiper({
   content,
   children,
   className,
+  tooltipClassName,
   onClick,
   side,
   delayDuration = 0,
@@ -62,7 +64,11 @@ export function Tooltiper({
         {children}
       </TooltipTrigger>
       <TooltipPortal>
-        <TooltipContent sideOffset={sideOffset} side={side}>
+        <TooltipContent
+          sideOffset={sideOffset}
+          side={side}
+          className={tooltipClassName}
+        >
           {content}
         </TooltipContent>
       </TooltipPortal>