Move to infisical. Create local dev environment. Add ci gates. Modernize repo

packages/ui/.cache/.eslintcache

@@ -1 +0,0 @@
-[{"/home/gib/Documents/Code/convex-monorepo/packages/ui/src/accordion.tsx":"1","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/alert-dialog.tsx":"2","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/alert.tsx":"3","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/aspect-ratio.tsx":"4","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/avatar.tsx":"5","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/badge.tsx":"6","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/based-avatar.tsx":"7","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/based-progress.tsx":"8","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/breadcrumb.tsx":"9","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/button-group.tsx":"10","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/button.tsx":"11","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/calendar.tsx":"12","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/card.tsx":"13","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/carousel.tsx":"14","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/chart.tsx":"15","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/checkbox.tsx":"16","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/collapsible.tsx":"17","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/combobox.tsx":"18","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/command.tsx":"19","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/context-menu.tsx":"20","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/dialog.tsx":"21","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/drawer.tsx":"22","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/dropdown-menu.tsx":"23","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/empty.tsx":"24","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/field.tsx":"25","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/form.tsx":"26","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/hooks/index.tsx":"27","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/hooks/use-mobile.ts":"28","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/hooks/use-on-click-outside.tsx":"29","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/hover-card.tsx":"30","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/image-crop.tsx":"31","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/index.tsx":"32","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/input-group.tsx":"33","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/input-otp.tsx":"34","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/input.tsx":"35","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/item.tsx":"36","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/kbd.tsx":"37","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/label.tsx":"38","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/menubar.tsx":"39","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/native-select.tsx":"40","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/navigation-menu.tsx":"41","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/pagination.tsx":"42","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/popover.tsx":"43","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/progress.tsx":"44","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/radio-group.tsx":"45","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/resizable.tsx":"46","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/scroll-area.tsx":"47","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/select.tsx":"48","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/separator.tsx":"49","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/sheet.tsx":"50","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/sidebar.tsx":"51","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/skeleton.tsx":"52","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/slider.tsx":"53","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/sonner.tsx":"54","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/spinner.tsx":"55","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/status-message.tsx":"56","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/submit-button.tsx":"57","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/switch.tsx":"58","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/table.tsx":"59","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/tabs.tsx":"60","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/textarea.tsx":"61","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/theme.tsx":"62","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/toggle-group.tsx":"63","/home/gib/Documents/Code/convex-monorepo/packages/ui/src/toggle.tsx":"64","/home/gib/Documents/Code/convex-monorepo/pacLine truncated

packages/ui/.cache/.prettiercache

@@ -1 +0,0 @@
-[["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55","56","57","58","59","60","61","62","63","64","65","66","67","68","69","70","71","72"],{"key":"73","value":"74"},{"key":"75","value":"76"},{"key":"77","value":"78"},{"key":"79","value":"80"},{"key":"81","value":"82"},{"key":"83","value":"84"},{"key":"85","value":"86"},{"key":"87","value":"88"},{"key":"89","value":"90"},{"key":"91","value":"92"},{"key":"93","value":"94"},{"key":"95","value":"96"},{"key":"97","value":"98"},{"key":"99","value":"100"},{"key":"101","value":"102"},{"key":"103","value":"104"},{"key":"105","value":"106"},{"key":"107","value":"108"},{"key":"109","value":"110"},{"key":"111","value":"112"},{"key":"113","value":"114"},{"key":"115","value":"116"},{"key":"117","value":"118"},{"key":"119","value":"120"},{"key":"121","value":"122"},{"key":"123","value":"124"},{"key":"125","value":"126"},{"key":"127","value":"128"},{"key":"129","value":"130"},{"key":"131","value":"132"},{"key":"133","value":"134"},{"key":"135","value":"136"},{"key":"137","value":"138"},{"key":"139","value":"140"},{"key":"141","value":"142"},{"key":"143","value":"144"},{"key":"145","value":"146"},{"key":"147","value":"148"},{"key":"149","value":"150"},{"key":"151","value":"152"},{"key":"153","value":"154"},{"key":"155","value":"156"},{"key":"157","value":"158"},{"key":"159","value":"160"},{"key":"161","value":"162"},{"key":"163","value":"164"},{"key":"165","value":"166"},{"key":"167","value":"168"},{"key":"169","value":"170"},{"key":"171","value":"172"},{"key":"173","value":"174"},{"key":"175","value":"176"},{"key":"177","value":"178"},{"key":"179","value":"180"},{"key":"181","value":"182"},{"key":"183","value":"184"},{"key":"185","value":"186"},{"key":"187","value":"188"},{"key":"189","value":"190"},{"key":"191","value":"192"},{"key":"193","value":"194"},{"key":"195","value":"196"},{"key":"197","value":"198"},{"key":"199","value":"200"},{"key":"201","value":"202"},{"key":"203","value":"204"},{"key":"205","value":"206"},{"key":"207","value":"208"},{"key":"209","value":"210"},{"key":"211","value":"212"},{"key":"213","value":"214"},{"key":"215","value":"216"},"/home/gib/Documents/Code/convex-monorepo/packages/ui/src/based-avatar.tsx",{"size":1745,"mtime":1774589278255,"data":"217"},"/home/gib/Documents/Code/convex-monorepo/packages/ui/src/hooks/index.tsx",{"size":104,"mtime":1774546669457,"data":"218"},"/home/gib/Documents/Code/convex-monorepo/packages/ui/src/hover-card.tsx",{"size":1476,"mtime":1774546669457,"data":"219"},"/home/gib/Documents/Code/convex-monorepo/packages/ui/src/popover.tsx",{"size":2261,"mtime":1774546669458,"data":"220"},"/home/gib/Documents/Code/convex-monorepo/packages/ui/src/tooltip.tsx",{"size":1771,"mtime":1774546669459,"data":"221"},"/home/gib/Documents/Code/convex-monorepo/packages/ui/src/aspect-ratio.tsx",{"size":273,"mtime":1774546669455,"data":"222"},"/home/gib/Documents/Code/convex-monorepo/packages/ui/src/button.tsx",{"size":3380,"mtime":1774546669455,"data":"223"},"/home/gib/Documents/Code/convex-monorepo/packages/ui/src/toggle-group.tsx",{"size":2238,"mtime":1774716762755,"data":"224"},"/home/gib/Documents/Code/convex-monorepo/packages/ui/src/hooks/use-mobile.ts",{"size":589,"mtime":1774546669457,"data":"225"},"/home/gib/Documents/Code/convex-monorepo/packages/ui/src/submit-button.tsx",{"size":1192,"mtime":1773778628581,"data":"226"},"/home/gib/Documents/Code/convex-monorepo/packages/ui/.cache/.eslintcache",{"size":34794,"mtime":1774717495793},"/home/gib/Documents/Code/convex-monorepo/packages/ui/src/carousel.tsx",{"size":5695,"mtime":1774718094545,"data":"227"},"/home/gib/Documents/Code/convex-monorepo/packages/ui/src/textarea.tsx",{"size":736,"mtime":1774546669459,"data":"228"},"/home/gib/Documents/Code/convex-monorepo/packages/ui/.cache/.prettiercache",{"size":13631,"mtime":1774718095584},"/home/gib/Documents/Code/convex-monorepo/packages/ui/src/avatar.tsx",{"size":2764,"mtime":1774546669455,"data":"229"},"/home/gib/Documents/Code/convex-monorepo/packages/ui/src/command.tsx",{"size":4628,"mtime":1774546669456,"data":"230"},"/home/gib/Documents/Code/convex-monorepo/packages/ui/src/dropdown-menu.tsx",{"size":8511,"mtime":1774546669456,"data":"231"},"/home/gib/Documents/Code/convex-monorepo/packages/ui/src/empty.tsx",{"size":2265,"mtime":1774546669456,"data":"232"},"/home/gib/Documents/Code/convex-monorepo/packages/ui/src/item.tsx",{"size":4575,"mtime":1774546669457,"data":"233"},"/home/gib/Documents/Code/convex-monorepo/packages/ui/src/spinner.tsx",{"size":307,"mtime":1774546669458,"data":"234"},"/home/gib/Documents/Code/convex-monorepo/packages/ui/package.json",{"size":2137,"mtime":1774590118182,"data":"235"},"/home/gib/Documents/Code/convex-monorepo/packages/ui/src/dialog.tsx",{"size":3925,"mtime":1774546669456,"data":"236"},"/Line truncated

packages/ui/package.json

@@ -12,6 +12,9 @@
     "format": "prettier --check . --ignore-path ../../.gitignore",
     "lint": "eslint --flag unstable_native_nodejs_ts_config",
     "typecheck": "tsc --noEmit --emitDeclarationOnly false",
+    "test:unit": "vitest run --project unit --passWithNoTests",
+    "test:integration": "vitest run --project integration --passWithNoTests",
+    "test:component": "NODE_ENV=test vitest run --project component",
     "ui-add": "bunx --bun shadcn@latest add && prettier src --write --list-different"
   },
   "dependencies": {
@@ -53,11 +56,15 @@
     "@gib/eslint-config": "workspace:*",
     "@gib/prettier-config": "workspace:*",
     "@gib/tsconfig": "workspace:*",
+    "@gib/vitest-config": "workspace:*",
+    "@testing-library/react": "catalog:test",
     "@types/react": "catalog:react19",
     "eslint": "catalog:",
+    "jsdom": "catalog:test",
     "prettier": "catalog:",
     "react": "catalog:react19",
     "typescript": "catalog:",
+    "vitest": "catalog:test",
     "zod": "catalog:"
   },
   "peerDependencies": {

packages/ui/src/based-progress.tsx

@@ -21,7 +21,7 @@ const BasedProgress = ({
   value = 0,
   ...props
 }: BasedProgressProps) => {
-  const [progress, setProgress] = React.useState<number>(value);
+  const [progress, setProgress] = React.useState<number>(value ?? 0);
 
   React.useEffect(() => {
     const id = window.setInterval(() => {

packages/ui/src/chart.tsx

@@ -105,6 +105,15 @@ ${colorConfig
 
 const ChartTooltip = RechartsPrimitive.Tooltip;
 
+type ChartPayloadItem = {
+  name?: string | number;
+  value?: number | string;
+  dataKey?: string | number;
+  type?: string;
+  color?: string;
+  payload?: Record<string, unknown> & { fill?: string };
+};
+
 const ChartTooltipContent = ({
   active,
   payload,
@@ -119,14 +128,29 @@ const ChartTooltipContent = ({
   color,
   nameKey,
   labelKey,
-}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-  React.ComponentProps<'div'> & {
-    hideLabel?: boolean;
-    hideIndicator?: boolean;
-    indicator?: 'line' | 'dot' | 'dashed';
-    nameKey?: string;
-    labelKey?: string;
-  }) => {
+}: React.ComponentProps<'div'> & {
+  active?: boolean;
+  payload?: ChartPayloadItem[];
+  label?: React.ReactNode;
+  labelFormatter?: (
+    value: React.ReactNode,
+    payload: ChartPayloadItem[],
+  ) => React.ReactNode;
+  formatter?: (
+    value: number | string,
+    name: string | number,
+    item: ChartPayloadItem,
+    index: number,
+    itemPayload: ChartPayloadItem['payload'],
+  ) => React.ReactNode;
+  color?: string;
+  labelClassName?: string;
+  hideLabel?: boolean;
+  hideIndicator?: boolean;
+  indicator?: 'line' | 'dot' | 'dashed';
+  nameKey?: string;
+  labelKey?: string;
+}) => {
   const { config } = useChart();
 
   const tooltipLabel = React.useMemo(() => {
@@ -139,7 +163,7 @@ const ChartTooltipContent = ({
     const itemConfig = getPayloadConfigFromPayload(config, item, key);
     const value =
       !labelKey && typeof label === 'string'
-        ? config[label]?.label ?? label
+        ? (config[label]?.label ?? label)
         : itemConfig?.label;
 
     if (labelFormatter) {
@@ -185,17 +209,17 @@ const ChartTooltipContent = ({
           .map((item, index) => {
             const key = `${nameKey ?? item.name ?? item.dataKey ?? 'value'}`;
             const itemConfig = getPayloadConfigFromPayload(config, item, key);
-            const indicatorColor = color ?? item.payload.fill ?? item.color;
+            const indicatorColor = color ?? item.payload?.fill ?? item.color;
 
             return (
               <div
-                key={item.dataKey}
+                key={item.dataKey ?? index}
                 className={cn(
                   '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
                   indicator === 'dot' && 'items-center',
                 )}
               >
-                {formatter && item?.value !== undefined && item.name ? (
+                {formatter && item.value !== undefined && item.name ? (
                   formatter(item.value, item.name, item, index, item.payload)
                 ) : (
                   <>
@@ -259,11 +283,12 @@ const ChartLegendContent = ({
   payload,
   verticalAlign = 'bottom',
   nameKey,
-}: React.ComponentProps<'div'> &
-  Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
-    hideIcon?: boolean;
-    nameKey?: string;
-  }) => {
+}: React.ComponentProps<'div'> & {
+  payload?: ChartPayloadItem[];
+  verticalAlign?: 'top' | 'bottom';
+  hideIcon?: boolean;
+  nameKey?: string;
+}) => {
   const { config } = useChart();
 
   if (!payload?.length) {
@@ -280,13 +305,13 @@ const ChartLegendContent = ({
     >
       {payload
         .filter((item) => item.type !== 'none')
-        .map((item) => {
+        .map((item, index) => {
           const key = `${nameKey ?? item.dataKey ?? 'value'}`;
           const itemConfig = getPayloadConfigFromPayload(config, item, key);
 
           return (
             <div
-              key={item.value}
+              key={item.value ?? index}
               className={cn(
                 '[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3',
               )}

packages/ui/src/combobox.tsx

@@ -68,13 +68,16 @@ const ComboboxInput = ({
     />
     <InputGroupAddon align='inline-end'>
       {showTrigger && (
-        <InputGroupButton
-          size='icon-xs'
-          variant='ghost'
-          render={<ComboboxTrigger />}
-          data-slot='input-group-button'
-          className='group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent'
-          disabled={disabled}
+        <ComboboxTrigger
+          render={
+            <InputGroupButton
+              size='icon-xs'
+              variant='ghost'
+              data-slot='input-group-button'
+              className='group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent'
+              disabled={disabled}
+            />
+          }
         />
       )}
       {showClear && <ComboboxClear disabled={disabled} />}

packages/ui/src/css.d.ts

@@ -0,0 +1 @@
+declare module '*.css';

packages/ui/src/image-crop.tsx

@@ -294,19 +294,17 @@ export const ImageCropApply = ({
 
   if (asChild) {
     return (
-      <Slot.Root onClick={handleClick} {...(props as any)}>
+      <Slot.Root
+        onClick={handleClick}
+        {...(props as ComponentProps<typeof Slot.Root>)}
+      >
         {children}
       </Slot.Root>
     );
   }
 
   return (
-    <Button
-      onClick={handleClick}
-      size='icon'
-      variant='ghost'
-      {...(props as any)}
-    >
+    <Button onClick={handleClick} size='icon' variant='ghost' {...props}>
       {children ?? <CropIcon className='size-4' />}
     </Button>
   );
@@ -331,19 +329,17 @@ export const ImageCropReset = ({
 
   if (asChild) {
     return (
-      <Slot.Root onClick={handleClick} {...(props as any)}>
+      <Slot.Root
+        onClick={handleClick}
+        {...(props as ComponentProps<typeof Slot.Root>)}
+      >
         {children}
       </Slot.Root>
     );
   }
 
   return (
-    <Button
-      onClick={handleClick}
-      size='icon'
-      variant='ghost'
-      {...(props as any)}
-    >
+    <Button onClick={handleClick} size='icon' variant='ghost' {...props}>
       {children ?? <RotateCcwIcon className='size-4' />}
     </Button>
   );
@@ -373,7 +369,15 @@ export const Cropper = ({
     onChange={onChange}
     onComplete={onComplete}
     onCrop={onCrop}
-    {...(props as any)}
+    {...(props as Omit<
+      ImageCropProps,
+      | 'file'
+      | 'maxImageSize'
+      | 'onChange'
+      | 'onComplete'
+      | 'onCrop'
+      | 'children'
+    >)}
   >
     <ImageCropContent className={className} style={style} />
   </ImageCrop>

packages/ui/tests/component/button.test.tsx

@@ -0,0 +1,13 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Button } from '../../src/button';
+
+describe('Button', () => {
+  it('renders its children', () => {
+    render(<Button>Click me</Button>);
+    expect(
+      screen.getByRole('button', { name: 'Click me' }),
+    ).toBeInTheDocument();
+  });
+});

packages/ui/tests/jest-dom.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

packages/ui/tsconfig.json

@@ -5,6 +5,6 @@
     "jsx": "preserve",
     "rootDir": "."
   },
-  "include": ["src"],
+  "include": ["src", "tests", "vitest.config.ts"],
   "exclude": ["node_modules"]
 }

packages/ui/vitest.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vitest/config';
+
+import { jsdomProject, nodeProject } from '@gib/vitest-config';
+
+export default defineConfig({
+  test: {
+    projects: [
+      nodeProject('unit', ['tests/unit/**/*.test.{ts,tsx}']),
+      nodeProject('integration', ['tests/integration/**/*.test.{ts,tsx}']),
+      jsdomProject('component', ['tests/component/**/*.test.{ts,tsx}']),
+    ],
+  },
+});