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/ui/src/auth-form/auth-form.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useMemo } from "react";
 import { E_PASSWORD_STRENGTH } from "@plane/constants";
-import { cn } from "../utils";
 import { Button } from "../button/button";
 import { Spinner } from "../spinners/circular-spinner";
+import { cn } from "../utils";
 import { AuthConfirmPasswordInput } from "./auth-confirm-password-input";
 import { AuthForgotPassword } from "./auth-forgot-password";
 import { AuthInput } from "./auth-input";

packages/ui/src/auth-form/auth-input.tsx

@@ -1,7 +1,7 @@
 import { Eye, EyeOff } from "lucide-react";
 import React, { useState } from "react";
-import { cn } from "../utils";
 import { Input } from "../form-fields/input";
+import { cn } from "../utils";
 
 export interface AuthInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "autoComplete"> {
   label?: string;

packages/ui/src/badge/badge.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 // helpers
-import { getIconStyling, getBadgeStyling, TBadgeVariant, TBadgeSizes } from "./helper";
 import { cn } from "../utils";
+import { getIconStyling, getBadgeStyling, TBadgeVariant, TBadgeSizes } from "./helper";
 
 export interface BadgeProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: TBadgeVariant;

packages/ui/src/breadcrumbs/breadcrumbs.tsx

@@ -1,7 +1,7 @@
 import { ChevronRight } from "lucide-react";
 import * as React from "react";
-import { cn } from "../utils";
 import { Tooltip } from "../tooltip";
+import { cn } from "../utils";
 
 type BreadcrumbsProps = {
   className?: string;

packages/ui/src/breadcrumbs/navigation-dropdown.tsx

@@ -2,10 +2,10 @@
 
 import { CheckIcon } from "lucide-react";
 import * as React from "react";
-import { cn } from "../utils";
 // ui
 import { CustomMenu, TContextMenuItem } from "../dropdowns";
 import { Tooltip } from "../tooltip";
+import { cn } from "../utils";
 import { Breadcrumbs } from "./breadcrumbs";
 
 type TBreadcrumbNavigationDropdownProps = {

packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { useState } from "react";
 import { ICustomSearchSelectOption } from "@plane/types";
-import { cn } from "../utils";
 import { CustomSearchSelect } from "../dropdowns";
 import { Tooltip } from "../tooltip";
+import { cn } from "../utils";
 import { Breadcrumbs } from "./breadcrumbs";
 
 type TBreadcrumbNavigationSearchDropdownProps = {

packages/ui/src/button/button.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 
-import { getIconStyling, getButtonStyling, TButtonVariant, TButtonSizes } from "./helper";
 import { cn } from "../utils";
+import { getIconStyling, getButtonStyling, TButtonVariant, TButtonSizes } from "./helper";
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: TButtonVariant;

packages/ui/src/button/toggle-switch.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
 import { Switch } from "@headlessui/react";
+import * as React from "react";
 // helpers
 import { cn } from "../utils";
 

packages/ui/src/collapsible/collapsible-button.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from "react";
-import { cn } from "../utils";
 import { DropdownIcon, ISvgIcons } from "../icons";
+import { cn } from "../utils";
 
 type Props = {
   isOpen: boolean;

packages/ui/src/collapsible/collapsible.tsx

@@ -1,5 +1,5 @@
-import React, { FC, useState, useEffect, useCallback } from "react";
 import { Disclosure, Transition } from "@headlessui/react";
+import React, { FC, useState, useEffect, useCallback } from "react";
 
 export type TCollapsibleProps = {
   title: string | React.ReactNode;

packages/ui/src/content-wrapper/content-wrapper.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { cn } from "../utils";
 import { Row } from "../row";
 import { ERowVariant, TRowVariant } from "../row/helper";
+import { cn } from "../utils";
 
 export interface ContentWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
   variant?: TRowVariant;

packages/ui/src/dropdown/multi-select.tsx

@@ -5,8 +5,8 @@ import { usePopper } from "react-popper";
 // plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
 // local imports
-import { cn } from "../utils";
 import { useDropdownKeyPressed } from "../hooks/use-dropdown-key-pressed";
+import { cn } from "../utils";
 import { DropdownButton } from "./common";
 import { DropdownOptions } from "./common/options";
 import { IMultiSelectDropdown } from "./dropdown";

packages/ui/src/dropdown/single-select.tsx

@@ -5,8 +5,8 @@ import { usePopper } from "react-popper";
 // plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
 // local imports
-import { cn } from "../utils";
 import { useDropdownKeyPressed } from "../hooks/use-dropdown-key-pressed";
+import { cn } from "../utils";
 import { DropdownButton } from "./common";
 import { DropdownOptions } from "./common/options";
 import { ISingleSelectDropdown } from "./dropdown";

packages/ui/src/dropdowns/custom-menu.tsx

@@ -6,9 +6,9 @@ import { usePopper } from "react-popper";
 // plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
 // helpers
+import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
 import { cn } from "../utils";
 // hooks
-import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
 // types
 import {
   ICustomMenuDropdownProps,

packages/ui/src/dropdowns/custom-select.tsx

@@ -1,7 +1,7 @@
-import React, { useRef, useState } from "react";
-import { usePopper } from "react-popper";
 import { Listbox } from "@headlessui/react";
 import { Check, ChevronDown } from "lucide-react";
+import React, { useRef, useState } from "react";
+import { usePopper } from "react-popper";
 // plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
 // hooks

packages/ui/src/emoji/emoji-icon-picker-new.tsx

@@ -1,15 +1,15 @@
-import React, { useRef, useState } from "react";
-import { usePopper } from "react-popper";
 import { Popover, Tab } from "@headlessui/react";
 import EmojiPicker from "emoji-picker-react";
+import React, { useRef, useState } from "react";
+import { usePopper } from "react-popper";
 // plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
 // helpers
 import { cn } from "../utils";
 // hooks
+import { EmojiIconPickerTypes, TABS_LIST, TCustomEmojiPicker } from "./emoji-icon-helper";
 import { LucideIconsList } from "./lucide-icons-list";
 // helpers
-import { EmojiIconPickerTypes, TABS_LIST, TCustomEmojiPicker } from "./emoji-icon-helper";
 
 export const EmojiIconPicker: React.FC<TCustomEmojiPicker> = (props) => {
   const {

packages/ui/src/emoji/emoji-icon-picker.tsx

@@ -1,15 +1,15 @@
+import { Popover, Tab } from "@headlessui/react";
+import EmojiPicker from "emoji-picker-react";
 import React, { useRef, useState } from "react";
 import { usePopper } from "react-popper";
-import EmojiPicker from "emoji-picker-react";
-import { Popover, Tab } from "@headlessui/react";
 // plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
 // components
+import { cn } from "../utils";
+import { EmojiIconPickerTypes, TABS_LIST, TCustomEmojiPicker } from "./emoji-icon-helper";
 import { IconsList } from "./icons-list";
 // helpers
-import { cn } from "../utils";
 // hooks
-import { EmojiIconPickerTypes, TABS_LIST, TCustomEmojiPicker } from "./emoji-icon-helper";
 
 export const CustomEmojiIconPicker: React.FC<TCustomEmojiPicker> = (props) => {
   const {

packages/ui/src/emoji/icons-list.tsx

@@ -3,9 +3,9 @@ import React, { useEffect, useState } from "react";
 // icons
 import useFontFaceObserver from "use-font-face-observer";
 import { MATERIAL_ICONS_LIST } from "..";
-import { cn } from "../utils";
 import { Input } from "../form-fields";
 import { InfoIcon } from "../icons";
+import { cn } from "../utils";
 // components
 // hooks
 // helpers

packages/ui/src/emoji/lucide-icons-list.tsx

@@ -2,9 +2,9 @@ import { Search } from "lucide-react";
 import React, { useEffect, useState } from "react";
 // local imports
 import { LUCIDE_ICONS_LIST } from "..";
-import { cn } from "../utils";
 import { Input } from "../form-fields";
 import { InfoIcon } from "../icons";
+import { cn } from "../utils";
 import { DEFAULT_COLORS, TIconsListProps, adjustColorForContrast } from "./emoji-icon-helper";
 
 export const LucideIconsList: React.FC<TIconsListProps> = (props) => {

packages/ui/src/form-fields/input-color-picker.tsx

@@ -3,9 +3,9 @@ import * as React from "react";
 import { ColorResult, SketchPicker } from "react-color";
 import { usePopper } from "react-popper";
 // helpers
+import { Button } from "../button";
 import { cn } from "../utils";
 // components
-import { Button } from "../button";
 import { Input } from "./input";
 
 export interface InputColorPickerProps {

packages/ui/src/form-fields/textarea.tsx

@@ -1,8 +1,8 @@
 import React, { useRef } from "react";
 // helpers
+import { useAutoResizeTextArea } from "../hooks/use-auto-resize-textarea";
 import { cn } from "../utils";
 // hooks
-import { useAutoResizeTextArea } from "../hooks/use-auto-resize-textarea";
 
 export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   mode?: "primary" | "transparent" | "true-transparent";

packages/ui/src/header/header.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
+import { ERowVariant, Row } from "../row";
 import { cn } from "../utils";
 import { EHeaderVariant, getHeaderStyle, THeaderVariant } from "./helper";
-import { ERowVariant, Row } from "../row";
 
 export interface HeaderProps {
   variant?: THeaderVariant;

packages/ui/src/icons/cycle/cycle-group-icon.tsx

@@ -1,8 +1,8 @@
+import { CircleDotDashed, Circle } from "lucide-react";
 import * as React from "react";
 
-import { ContrastIcon } from "./contrast-icon";
 import { CircleDotFullIcon } from "./circle-dot-full-icon";
-import { CircleDotDashed, Circle } from "lucide-react";
+import { ContrastIcon } from "./contrast-icon";
 
 import { CYCLE_GROUP_COLORS, ICycleGroupIcon } from "./helper";
 

packages/ui/src/icons/priority-icon.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
 import { AlertCircle, Ban, SignalHigh, SignalLow, SignalMedium } from "lucide-react";
+import * as React from "react";
 import { cn } from "../utils";
 
 export type TIssuePriorities = "urgent" | "high" | "medium" | "low" | "none";

packages/ui/src/modals/alert-modal.tsx

@@ -1,12 +1,12 @@
-import React from "react";
 import { AlertTriangle, Info, LucideIcon } from "lucide-react";
+import React from "react";
 // components
 import { Button, TButtonVariant } from "../button";
+import { cn } from "../utils";
+import { EModalPosition, EModalWidth } from "./constants";
 import { ModalCore } from "./modal-core";
 // constants
-import { EModalPosition, EModalWidth } from "./constants";
 // helpers
-import { cn } from "../utils";
 
 export type TModalVariant = "danger" | "primary";
 

packages/ui/src/modals/modal-core.tsx

@@ -1,9 +1,9 @@
-import React, { Fragment } from "react";
 import { Dialog, Transition } from "@headlessui/react";
+import React, { Fragment } from "react";
 // constants
+import { cn } from "../utils";
 import { EModalPosition, EModalWidth } from "./constants";
 // helpers
-import { cn } from "../utils";
 
 type Props = {
   children: React.ReactNode;

packages/ui/src/popovers/popover-menu.stories.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
 import { PopoverMenu } from "./popover-menu";
 
 const meta: Meta<typeof PopoverMenu> = {

packages/ui/src/popovers/popover-menu.tsx

@@ -1,8 +1,8 @@
 import React, { Fragment } from "react";
 // components
+import { cn } from "../utils";
 import { Popover } from "./popover";
 // helpers
-import { cn } from "../utils";
 // types
 import { TPopoverMenu } from "./types";
 

packages/ui/src/popovers/popover.tsx

@@ -1,11 +1,11 @@
+import { Popover as HeadlessReactPopover, Transition } from "@headlessui/react";
+import { EllipsisVertical } from "lucide-react";
 import React, { Fragment, Ref, useState } from "react";
 import { usePopper } from "react-popper";
-import { Popover as HeadlessReactPopover, Transition } from "@headlessui/react";
 // helpers
 import { cn } from "../utils";
 // types
 import { TPopover } from "./types";
-import { EllipsisVertical } from "lucide-react";
 
 export const Popover = (props: TPopover) => {
   const {

packages/ui/src/popovers/types.ts

@@ -1,5 +1,5 @@
-import { MutableRefObject, ReactNode } from "react";
 import { Placement } from "@popperjs/core";
+import { MutableRefObject, ReactNode } from "react";
 
 export type TPopoverButtonDefaultOptions = {
   // button and button styling

packages/ui/src/sortable/draggable.tsx

@@ -1,10 +1,10 @@
-import React, { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { isEqual } from "lodash";
-import { cn } from "../utils";
 import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { isEqual } from "lodash";
+import React, { useEffect, useRef, useState } from "react";
 import { DropIndicator } from "../drop-indicator";
+import { cn } from "../utils";
 
 type Props = {
   children: React.ReactNode;

packages/ui/src/toast/index.tsx

@@ -1,7 +1,7 @@
+import { AlertTriangle, CheckCircle2, X, XCircle } from "lucide-react";
 import * as React from "react";
 import { Toaster, toast } from "sonner";
 // icons
-import { AlertTriangle, CheckCircle2, X, XCircle } from "lucide-react";
 // spinner
 import { CircularBarSpinner } from "../spinners";
 // helper