[WEB-4660] chore: replace jsx element with react node

apps/admin/core/components/authentication/authentication-method-card.tsx

@@ -7,8 +7,8 @@ import { cn } from "@plane/utils";
 type Props = {
   name: string;
   description: string;
-  icon: JSX.Element;
-  config: JSX.Element;
+  icon: React.ReactNode;
+  config: React.ReactNode;
   disabled?: boolean;
   withBorder?: boolean;
   unavailable?: boolean;

apps/admin/core/components/common/controller-input.tsx

@@ -13,7 +13,7 @@ type Props = {
   type: "text" | "password";
   name: string;
   label: string;
-  description?: string | JSX.Element;
+  description?: string | React.ReactNode;
   placeholder: string;
   error: boolean;
   required: boolean;
@@ -23,7 +23,7 @@ export type TControllerInputFormField = {
   key: string;
   type: "text" | "password";
   label: string;
-  description?: string | JSX.Element;
+  description?: string | React.ReactNode;
   placeholder: string;
   error: boolean;
   required: boolean;

apps/admin/core/components/common/copy-field.tsx

@@ -9,14 +9,14 @@ import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 type Props = {
   label: string;
   url: string;
-  description: string | JSX.Element;
+  description: string | React.ReactNode;
 };
 
 export type TCopyField = {
   key: string;
   label: string;
   url: string;
-  description: string | JSX.Element;
+  description: string | React.ReactNode;
 };
 
 export const CopyField: React.FC<Props> = (props) => {

apps/space/core/components/issues/issue-layouts/issue-layout-HOC.tsx

@@ -3,7 +3,7 @@ import { TLoader } from "@plane/types";
 import { LogoSpinner } from "@/components/common";
 
 interface Props {
-  children: string | JSX.Element | JSX.Element[];
+  children: string | React.ReactNode | React.ReactNode[];
   getGroupIssueCount: (
     groupId: string | undefined,
     subGroupId: string | undefined,

apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx

@@ -31,7 +31,7 @@ const ProfileActivityPage = observer(() => {
 
   const handleLoadMore = () => setPageCount((prev) => prev + 1);
 
-  const activityPages: JSX.Element[] = [];
+  const activityPages: React.ReactNode[] = [];
   for (let i = 0; i < pageCount; i++)
     activityPages.push(
       <WorkspaceActivityListPage

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx

@@ -6,7 +6,7 @@ import { useParams } from "next/navigation";
 // icons
 import { Calendar, ChevronDown, Kanban, List } from "lucide-react";
 // plane imports
-import { EIssueFilterType, ISSUE_LAYOUTS, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
+import { EIssueFilterType, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import {
   EIssuesStoreType,
@@ -15,15 +15,13 @@ import {
   IIssueFilterOptions,
   EIssueLayoutTypes,
 } from "@plane/types";
-import { CustomMenu } from "@plane/ui";
 import { isIssueFilterActive } from "@plane/utils";
 // components
 import { WorkItemsModal } from "@/components/analytics/work-items/modal";
 import {
   DisplayFiltersSelection,
   FilterSelection,
   FiltersDropdown,
-  IssueLayoutIcon,
   MobileLayoutSelection,
 } from "@/components/issues/issue-layouts";
 // helpers

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/activity/page.tsx

@@ -34,7 +34,7 @@ const ProfileActivityPage = observer(() => {
 
   const handleLoadMore = () => setPageCount((prev) => prev + 1);
 
-  const activityPages: JSX.Element[] = [];
+  const activityPages: React.ReactNode[] = [];
   for (let i = 0; i < pageCount; i++)
     activityPages.push(
       <ProfileActivityListPage

apps/web/app/(all)/profile/activity/page.tsx

@@ -37,7 +37,7 @@ const ProfileActivityPage = observer(() => {
 
   const handleLoadMore = () => setPageCount((prev) => prev + 1);
 
-  const activityPages: JSX.Element[] = [];
+  const activityPages: React.ReactNode[] = [];
   for (let i = 0; i < pageCount; i++)
     activityPages.push(
       <ProfileActivityListPage

apps/web/ce/components/command-palette/helpers.tsx

@@ -18,7 +18,7 @@ import { IssueIdentifier } from "@/plane-web/components/issues";
 
 export type TCommandGroups = {
   [key: string]: {
-    icon: JSX.Element | null;
+    icon: React.ReactNode | null;
     itemName: (item: any) => React.ReactNode;
     path: (item: any, projectId: string | undefined) => string;
     title: string;

apps/web/ce/components/workflow/state-option.tsx

@@ -7,7 +7,7 @@ export type TStateOptionProps = {
   option: {
     value: string | undefined;
     query: string;
-    content: JSX.Element;
+    content: React.ReactNode;
   };
   selectedValue: string | null | undefined;
   className?: string;

apps/web/core/components/analytics/select/select-x-axis.tsx

@@ -10,7 +10,7 @@ type Props = {
   placeholder?: string;
   hiddenOptions?: ChartXAxisProperty[];
   allowNoValue?: boolean;
-  label?: string | JSX.Element;
+  label?: string | React.ReactNode;
 };
 
 export const SelectXAxis: React.FC<Props> = (props) => {

apps/web/core/components/core/list/list-item.tsx

@@ -12,17 +12,17 @@ interface IListItemProps {
   title: string;
   itemLink: string;
   onItemClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
-  prependTitleElement?: JSX.Element;
-  appendTitleElement?: JSX.Element;
-  actionableItems?: JSX.Element;
+  prependTitleElement?: React.ReactNode;
+  appendTitleElement?: React.ReactNode;
+  actionableItems?: React.ReactNode;
   isMobile?: boolean;
   parentRef: React.RefObject<HTMLDivElement>;
   disableLink?: boolean;
   className?: string;
   itemClassName?: string;
   actionItemContainerClassName?: string;
   isSidebarOpen?: boolean;
-  quickActionElement?: JSX.Element;
+  quickActionElement?: React.ReactNode;
   preventDefaultProgress?: boolean;
   leftElementClassName?: string;
   rightElementClassName?: string;

apps/web/core/components/core/modals/gpt-assistant-popover.tsx

@@ -22,7 +22,7 @@ type Props = {
   onError?: (error: any) => void;
   placement?: Placement;
   prompt?: string;
-  button: JSX.Element;
+  button: React.ReactNode;
   className?: string;
   workspaceId: string;
   workspaceSlug: string;

apps/web/core/components/dropdowns/cycle/cycle-options.tsx

@@ -23,7 +23,7 @@ type DropdownOptions =
   | {
       value: string | null;
       query: string;
-      content: JSX.Element;
+      content: React.ReactNode;
     }[]
   | undefined;
 

apps/web/core/components/dropdowns/estimate.tsx

@@ -33,7 +33,7 @@ type DropdownOptions =
   | {
       value: string | null;
       query: string;
-      content: JSX.Element;
+      content: React.ReactNode;
     }[]
   | undefined;
 

apps/web/core/components/dropdowns/module/module-options.tsx

@@ -18,7 +18,7 @@ type DropdownOptions =
   | {
       value: string | null;
       query: string;
-      content: JSX.Element;
+      content: React.ReactNode;
     }[]
   | undefined;
 

apps/web/core/components/gantt-chart/chart/main-content.tsx

@@ -46,7 +46,7 @@ type Props = {
     currentView: TGanttViews,
     targetDate?: Date
   ) => ChartDataType | undefined;
-  quickAdd?: React.JSX.Element | undefined;
+  quickAdd?: React.ReactNode | undefined;
   isEpic?: boolean;
 };
 

apps/web/core/components/gantt-chart/chart/root.tsx

@@ -43,7 +43,7 @@ type ChartViewRootProps = {
   loadMoreBlocks?: () => void;
   updateBlockDates?: (updates: IBlockUpdateDependencyData[]) => Promise<void>;
   canLoadMoreBlocks?: boolean;
-  quickAdd?: React.JSX.Element | undefined;
+  quickAdd?: React.ReactNode | undefined;
   showToday: boolean;
   isEpic?: boolean;
 };

apps/web/core/components/gantt-chart/root.tsx

@@ -14,7 +14,7 @@ type GanttChartRootProps = {
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
   blockToRender: (data: any) => React.ReactNode;
   sidebarToRender: (props: any) => React.ReactNode;
-  quickAdd?: React.JSX.Element | undefined;
+  quickAdd?: React.ReactNode | undefined;
   canLoadMoreBlocks?: boolean;
   loadMoreBlocks?: () => void;
   updateBlockDates?: (updates: IBlockUpdateDependencyData[]) => Promise<void>;

apps/web/core/components/gantt-chart/sidebar/gantt-dnd-HOC.tsx

@@ -13,7 +13,7 @@ type Props = {
   id: string;
   isLastChild: boolean;
   isDragEnabled: boolean;
-  children: (isDragging: boolean) => JSX.Element;
+  children: (isDragging: boolean) => React.ReactNode;
   onDrop: (draggingBlockId: string | undefined, droppedBlockId: string | undefined, dropAtEndOfList: boolean) => void;
 };
 

apps/web/core/components/gantt-chart/sidebar/root.tsx

@@ -22,7 +22,7 @@ type Props = {
   enableSelection: boolean | ((blockId: string) => boolean);
   sidebarToRender: (props: any) => React.ReactNode;
   title: string;
-  quickAdd?: React.JSX.Element | undefined;
+  quickAdd?: React.ReactNode | undefined;
   selectionHelpers: TSelectionHelper;
   isEpic?: boolean;
 };

apps/web/core/components/integration/github/select-repository.tsx

@@ -15,7 +15,7 @@ import { ProjectService } from "@/services/project";
 type Props = {
   integration: IWorkspaceIntegration;
   value: any;
-  label: string | JSX.Element;
+  label: string | React.ReactNode;
   onChange: (repo: any) => void;
   characterLimit?: number;
 };

apps/web/core/components/integration/github/single-user-select.tsx

@@ -66,7 +66,7 @@ export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users,
     | {
         value: string;
         query: string;
-        content: JSX.Element;
+        content: React.ReactNode;
       }[]
     | undefined;
 

apps/web/core/components/integration/jira/import-users.tsx

@@ -54,7 +54,7 @@ export const JiraImportUsers: FC = () => {
     | {
         value: string;
         query: string;
-        content: JSX.Element;
+        content: React.ReactNode;
       }[]
     | undefined;
 

apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx

@@ -4,7 +4,7 @@ import React, { FC } from "react";
 import { cn } from "@plane/utils";
 
 type Props = {
-  icon: JSX.Element;
+  icon: React.ReactNode;
   title: string;
   disabled?: boolean;
 };

apps/web/core/components/issues/issue-layouts/issue-layout-HOC.tsx

@@ -31,7 +31,7 @@ const ActiveLoader = (props: { layout: EIssueLayoutTypes }) => {
 };
 
 interface Props {
-  children: string | JSX.Element | JSX.Element[];
+  children: string | React.ReactNode | React.ReactNode[];
   layout: EIssueLayoutTypes;
 }
 

apps/web/core/components/issues/issue-layouts/quick-add/root.tsx

@@ -42,7 +42,7 @@ type TQuickAddIssueRoot = {
   layout: EIssueLayoutTypes;
   prePopulatedData?: Partial<TIssue>;
   QuickAddButton?: FC<TQuickAddIssueButton>;
-  customQuickAddButton?: JSX.Element;
+  customQuickAddButton?: React.ReactNode;
   containerClassName?: string;
   setIsQuickAddOpen?: (isOpen: boolean) => void;
   quickAddCallback?: (projectId: string | null | undefined, data: TIssue) => Promise<TIssue | undefined>;

apps/web/core/components/issues/select/base.tsx

@@ -21,7 +21,7 @@ export type TWorkItemLabelSelectBaseProps = {
   createLabelEnabled?: boolean;
   disabled?: boolean;
   getLabelById: (labelId: string) => IIssueLabel | null;
-  label?: JSX.Element;
+  label?: React.ReactNode;
   labelIds: string[];
   onChange: (value: string[]) => void;
   onDropdownOpen?: () => void;

apps/web/core/components/labels/label-drag-n-drop-HOC.tsx

@@ -42,7 +42,7 @@ type Props = {
     isDragging: boolean,
     isDroppingInLabel: boolean,
     dragHandleRef: MutableRefObject<HTMLButtonElement | null>
-  ) => JSX.Element;
+  ) => React.ReactNode;
   onDrop: (
     draggingLabelId: string,
     droppedParentId: string | null,

apps/web/core/components/project/member-select.tsx

@@ -50,7 +50,7 @@ export const MemberSelect: React.FC<Props> = observer((props) => {
     | {
         value: string;
         query: string;
-        content: React.JSX.Element;
+        content: React.ReactNode;
       }[]
     | undefined;
   const selectedOption = projectId ? getProjectMemberDetails(value, projectId.toString()) : null;

apps/web/core/components/project/send-project-invitation-modal.tsx

@@ -163,7 +163,7 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
     | {
         value: string;
         query: string;
-        content: React.JSX.Element;
+        content: React.ReactNode;
       }[]
     | undefined;
 

apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx

@@ -9,7 +9,7 @@ import { usePlatformOS } from "@/hooks/use-platform-os";
 type Props = {
   href: string;
   title: string;
-  icon: JSX.Element;
+  icon: React.ReactNode;
 };
 
 export const FavoriteItemTitle: FC<Props> = observer((props) => {

packages/propel/src/charts/bar-chart/bar.tsx

@@ -158,7 +158,7 @@ const CustomBarLollipop = React.memo((props: TBarProps) => {
  */
 const createShapeVariant =
   (Component: React.ComponentType<TBarProps>, factoryProps?: Partial<TBarProps>) =>
-  (shapeProps: TShapeProps, bar: TBarItem<string>, stackKeys: string[]): JSX.Element => {
+  (shapeProps: TShapeProps, bar: TBarItem<string>, stackKeys: string[]): React.ReactNode => {
     const showTopBorderRadius = bar.showTopBorderRadius?.(shapeProps.dataKey, shapeProps.payload);
     const showBottomBorderRadius = bar.showBottomBorderRadius?.(shapeProps.dataKey, shapeProps.payload);
 
@@ -178,7 +178,7 @@ const createShapeVariant =
 
 export const barShapeVariants: Record<
   TBarChartShapeVariant,
-  (props: TShapeProps, bar: TBarItem<string>, stackKeys: string[]) => JSX.Element
+  (props: TShapeProps, bar: TBarItem<string>, stackKeys: string[]) => React.ReactNode
 > = {
   bar: createShapeVariant(CustomBar), // Standard bar with rounded corners
   lollipop: createShapeVariant(CustomBarLollipop), // Line with circle at top

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

@@ -68,7 +68,8 @@ export const BarChart = React.memo(<K extends string, T extends string>(props: T
           opacity={!!activeLegend && activeLegend !== bar.key ? 0.1 : 1}
           shape={(shapeProps: any) => {
             const shapeVariant = barShapeVariants[bar.shapeVariant ?? "bar"];
-            return shapeVariant(shapeProps, bar, stackKeys);
+            const node = shapeVariant(shapeProps, bar, stackKeys);
+            return React.isValidElement(node) ? node : <>{node}</>;
           }}
           className="[&_path]:transition-opacity [&_path]:duration-200"
           onMouseEnter={() => setActiveBar(bar.key)}

packages/types/package.json

@@ -26,9 +26,15 @@
     "fix:format": "prettier --write \"**/*.{ts,tsx,md,json,css,scss}\"",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
   "devDependencies": {
     "@plane/eslint-config": "*",
     "@plane/typescript-config": "*",
+    "@types/react": "18.3.11",
+    "@types/react-dom": "18.3.1",
     "tsup": "8.4.0",
     "typescript": "5.8.3"
   }

packages/types/src/instance/auth.ts

@@ -2,8 +2,8 @@ export type TInstanceAuthenticationModes = {
   key: string;
   name: string;
   description: string;
-  icon: JSX.Element;
-  config: JSX.Element;
+  icon: React.ReactNode;
+  config: React.ReactNode;
   unavailable?: boolean;
 };
 

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

@@ -7,7 +7,7 @@ import { Tooltip } from "../tooltip";
 import { Breadcrumbs } from "./breadcrumbs";
 
 type TBreadcrumbNavigationSearchDropdownProps = {
-  icon?: React.JSX.Element;
+  icon?: React.ReactNode;
   title?: string;
   selectedItem: string;
   navigationItems: ICustomSearchSelectOption[];