feat: migrate to pnpm from yarn (#7593)

* chore(repo): migrate to pnpm

* chore(repo): cleanup pnpm integration with turbo

* chore(repo): run lint

* chore(repo): cleanup tsconfigs

* chore: align TypeScript to 5.8.3 across monorepo; update pnpm override and catalog; pnpm install to update lockfile

* chore(repo): revert logger.ts changes

* fix: type errors

* fix: build errors

* fix: pnpm home setup in dockerfiles

---------

Co-authored-by: sriramveeraghanta <veeraghanta.sriram@gmail.com>
Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com>

packages/propel/package.json

@@ -22,7 +22,11 @@
   },
   "dependencies": {
     "@base-ui-components/react": "^1.0.0-beta.2",
-    "@plane/utils": "*",
+    "@plane/constants": "workspace:*",
+    "@plane/hooks": "workspace:*",
+    "@plane/types": "workspace:*",
+    "@plane/ui": "workspace:*",
+    "@plane/utils": "workspace:*",
     "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "lucide-react": "^0.469.0",
@@ -32,9 +36,9 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "@plane/eslint-config": "*",
-    "@plane/tailwind-config": "*",
-    "@plane/typescript-config": "*",
+    "@plane/eslint-config": "workspace:*",
+    "@plane/tailwind-config": "workspace:*",
+    "@plane/typescript-config": "workspace:*",
     "@types/react": "18.3.1",
     "@types/react-dom": "18.3.0",
     "typescript": "5.8.3"

packages/propel/src/avatar/avatar.tsx

@@ -78,7 +78,7 @@ export const getBorderRadius = (shape: "circle" | "square") => {
  * @param value The value to check
  * @returns Whether the value is a valid number or not
  */
-export const isAValidNumber = (value: any) => typeof value === "number" && !isNaN(value);
+export const isAValidNumber = (value: unknown): value is number => typeof value === "number" && !Number.isNaN(value);
 
 export const Avatar: React.FC<Props> = (props) => {
   const {
@@ -86,7 +86,6 @@ export const Avatar: React.FC<Props> = (props) => {
     fallbackBackgroundColor,
     fallbackText,
     fallbackTextColor,
-    showTooltip = true,
     size = "md",
     shape = "circle",
     src,

packages/propel/src/charts/area-chart/root.tsx

@@ -98,7 +98,7 @@ export const AreaChart = React.memo(<K extends string, T extends string>(props:
         comparisonLine: interpolatedValue,
       };
     });
-  }, [data, xAxis.key]);
+  }, [data, xAxis.key, yAxis.key]);
   return (
     <div className={className}>
       <ResponsiveContainer width="100%" height="100%">

packages/propel/src/charts/pie-chart/active-shape.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { Sector } from "recharts";
+import { PieSectorDataItem } from "recharts/types/polar/Pie";
 
-export const CustomActiveShape = React.memo((props: any) => {
+export const CustomActiveShape = React.memo((props: PieSectorDataItem) => {
   const { cx, cy, cornerRadius, innerRadius, outerRadius, startAngle, endAngle, fill } = props;
 
   return (
@@ -22,8 +23,8 @@ export const CustomActiveShape = React.memo((props: any) => {
         startAngle={startAngle}
         endAngle={endAngle}
         cornerRadius={cornerRadius}
-        innerRadius={outerRadius + 6}
-        outerRadius={outerRadius + 10}
+        innerRadius={(outerRadius ?? 0) + 6}
+        outerRadius={(outerRadius ?? 0) + 10}
         fill={fill}
       />
     </g>

packages/propel/src/menu/menu.tsx

@@ -19,7 +19,7 @@ const useSubMenu = () => React.useContext(SubMenuContext);
 
 // SubMenu implementation
 const SubMenu: React.FC<TSubMenuProps> = (props) => {
-  const { children, trigger, disabled = false, className = "", contentClassName = "" } = props;
+  const { children, trigger, disabled = false, className = "" } = props;
 
   return (
     <BaseMenu.SubmenuRoot disabled={disabled}>
@@ -67,9 +67,7 @@ function Menu(props: TMenuProps) {
     buttonClassName = "",
     customButtonClassName = "",
     customButtonTabIndex = 0,
-    placement,
     children,
-    className = "",
     customButton,
     disabled = false,
     ellipsis = false,
@@ -80,13 +78,10 @@ function Menu(props: TMenuProps) {
     optionsClassName = "",
     menuItemsClassName = "",
     verticalEllipsis = false,
-    portalElement,
     menuButtonOnClick,
     onMenuClose,
     tabIndex,
-    closeOnSelect,
     openOnHover = false,
-    useCaptureForOutsideClick = false,
     handleOpenChange = () => {},
   } = props;
 

packages/propel/src/menu/types.ts

@@ -21,8 +21,7 @@ export type TMenuProps = {
   ellipsis?: boolean;
   noBorder?: boolean;
   verticalEllipsis?: boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  menuButtonOnClick?: (...args: any) => void;
+  menuButtonOnClick?: (..._args: unknown[]) => void;
   menuItemsClassName?: string;
   onMenuClose?: () => void;
   closeOnSelect?: boolean;
@@ -44,6 +43,6 @@ export type TSubMenuProps = {
 export type TMenuItemProps = {
   children: React.ReactNode;
   disabled?: boolean;
-  onClick?: (args?: any) => void;
+  onClick?: (_args?: unknown) => void;
   className?: string;
 };

packages/propel/src/table/core.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 
 import { cn } from "@plane/utils";
 
-const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+const Table = React.forwardRef<React.ComponentRef<"table">, React.ComponentPropsWithoutRef<"table">>(
   ({ className, ...props }, ref) => (
     <div className="relative w-full overflow-auto">
       <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
@@ -11,7 +11,7 @@ const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableE
 );
 Table.displayName = "Table";
 
-const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+const TableHeader = React.forwardRef<React.ComponentRef<"thead">, React.ComponentPropsWithoutRef<"thead">>(
   ({ className, ...props }, ref) => (
     <thead
       ref={ref}
@@ -22,19 +22,19 @@ const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttribut
 );
 TableHeader.displayName = "TableHeader";
 
-const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+const TableBody = React.forwardRef<React.ComponentRef<"tbody">, React.ComponentPropsWithoutRef<"tbody">>(
   ({ className, ...props }, ref) => <tbody ref={ref} className={cn("", className)} {...props} />
 );
 TableBody.displayName = "TableBody";
 
-const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+const TableFooter = React.forwardRef<React.ComponentRef<"tfoot">, React.ComponentPropsWithoutRef<"tfoot">>(
   ({ className, ...props }, ref) => (
     <tfoot ref={ref} className={cn("bg-custom-background-300 font-medium", className)} {...props} />
   )
 );
 TableFooter.displayName = "TableFooter";
 
-const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+const TableRow = React.forwardRef<React.ComponentRef<"tr">, React.ComponentPropsWithoutRef<"tr">>(
   ({ className, ...props }, ref) => (
     <tr
       ref={ref}
@@ -45,30 +45,34 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
 );
 TableRow.displayName = "TableRow";
 
-const TableHead = React.forwardRef<HTMLElement, React.ThHTMLAttributes<HTMLElement>>(({ className, ...props }, ref) => (
-  <th
-    ref={ref as any}
-    className={cn(
-      "h-10 px-2 text-left align-middle font-medium text-custom-text-300 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className
-    )}
-    {...props}
-  />
-));
+const TableHead = React.forwardRef<React.ComponentRef<"th">, React.ComponentPropsWithoutRef<"th">>(
+  ({ className, ...props }, ref) => (
+    <th
+      ref={ref}
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium text-custom-text-300 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+);
 TableHead.displayName = "TableHead";
 
-const TableCell = React.forwardRef<HTMLElement, React.TdHTMLAttributes<HTMLElement>>(({ className, ...props }, ref) => (
-  <td
-    ref={ref as any}
-    className={cn("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className)}
-    {...props}
-  />
-));
+const TableCell = React.forwardRef<React.ComponentRef<"td">, React.ComponentPropsWithoutRef<"td">>(
+  ({ className, ...props }, ref) => (
+    <td
+      ref={ref}
+      className={cn("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className)}
+      {...props}
+    />
+  )
+);
 TableCell.displayName = "TableCell";
 
-const TableCaption = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
+const TableCaption = React.forwardRef<React.ComponentRef<"caption">, React.ComponentPropsWithoutRef<"caption">>(
   ({ className, ...props }, ref) => (
-    <caption ref={ref as any} className={cn("mt-4 text-sm text-custom-text-300", className)} {...props} />
+    <caption ref={ref} className={cn("mt-4 text-sm text-custom-text-300", className)} {...props} />
   )
 );
 TableCaption.displayName = "TableCaption";

packages/propel/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "@plane/typescript-config/react-library.json",
   "compilerOptions": {
-    "jsx": "react",
+    "jsx": "react-jsx",
     "lib": ["esnext", "dom"]
   },
   "include": ["src"],