[WEB-4748] chore: placement helper fn added and code refactor #7627

Co-authored-by: Sriram Veeraghanta <[email protected]>

Author: anmolsinghbhatia

packages/propel/src/popover/root.tsx

@@ -1,62 +1,15 @@
 import * as React from "react";
 import { Popover as BasePopover } from "@base-ui-components/react/popover";
-
-// types
-export type Placement =
-  | "auto"
-  | "auto-start"
-  | "auto-end"
-  | "top-start"
-  | "top-end"
-  | "bottom-start"
-  | "bottom-end"
-  | "right-start"
-  | "right-end"
-  | "left-start"
-  | "left-end"
-  | "top"
-  | "bottom"
-  | "right"
-  | "left";
-
-type Side = "top" | "bottom" | "left" | "right";
-type Align = "start" | "center" | "end";
+import { TPlacement, TSide, TAlign, convertPlacementToSideAndAlign } from "../utils/placement";
 
 export interface PopoverContentProps extends React.ComponentProps<typeof BasePopover.Popup> {
-  placement?: Placement;
-  align?: Align;
+  placement?: TPlacement;
+  align?: TAlign;
   sideOffset?: BasePopover.Positioner.Props["sideOffset"];
-  side?: Side;
+  side?: TSide;
   containerRef?: React.RefObject<HTMLElement>;
 }
 
-// placement conversion map
-const PLACEMENT_MAP = new Map<Placement, { side: Side; align: Align }>([
-  ["auto", { side: "bottom", align: "center" }],
-  ["auto-start", { side: "bottom", align: "start" }],
-  ["auto-end", { side: "bottom", align: "end" }],
-  ["top", { side: "top", align: "center" }],
-  ["bottom", { side: "bottom", align: "center" }],
-  ["left", { side: "left", align: "center" }],
-  ["right", { side: "right", align: "center" }],
-  ["top-start", { side: "top", align: "start" }],
-  ["top-end", { side: "top", align: "end" }],
-  ["bottom-start", { side: "bottom", align: "start" }],
-  ["bottom-end", { side: "bottom", align: "end" }],
-  ["left-start", { side: "left", align: "start" }],
-  ["left-end", { side: "left", align: "end" }],
-  ["right-start", { side: "right", align: "start" }],
-  ["right-end", { side: "right", align: "end" }],
-]);
-
-// conversion function
-export function convertPlacementToSideAndAlign(placement: Placement): {
-  side: Side;
-  align: Align;
-} {
-  return PLACEMENT_MAP.get(placement) || { side: "bottom", align: "center" };
-}
-
 // PopoverContent component
 const PopoverContent = React.memo<PopoverContentProps>(function PopoverContent({
   children,

packages/propel/src/tooltip/root.tsx

@@ -1,70 +1,24 @@
 import * as React from "react";
 import { Tooltip as BaseTooltip } from "@base-ui-components/react/tooltip";
 import { cn } from "@plane/utils";
-
-export type TPosition =
-  | "top"
-  | "right"
-  | "bottom"
-  | "left"
-  | "auto"
-  | "auto-end"
-  | "auto-start"
-  | "bottom-start"
-  | "bottom-end"
-  | "left-start"
-  | "left-end"
-  | "right-start"
-  | "right-end"
-  | "top-start"
-  | "top-end";
-
-type Side = "top" | "bottom" | "left" | "right";
-type Align = "start" | "center" | "end";
-
-// placement conversion map
-const PLACEMENT_MAP = new Map<TPosition, { side: Side; align: Align }>([
-  ["auto", { side: "bottom", align: "center" }],
-  ["auto-start", { side: "bottom", align: "start" }],
-  ["auto-end", { side: "bottom", align: "end" }],
-  ["top", { side: "top", align: "center" }],
-  ["bottom", { side: "bottom", align: "center" }],
-  ["left", { side: "left", align: "center" }],
-  ["right", { side: "right", align: "center" }],
-  ["top-start", { side: "top", align: "start" }],
-  ["top-end", { side: "top", align: "end" }],
-  ["bottom-start", { side: "bottom", align: "start" }],
-  ["bottom-end", { side: "bottom", align: "end" }],
-  ["left-start", { side: "left", align: "start" }],
-  ["left-end", { side: "left", align: "end" }],
-  ["right-start", { side: "right", align: "start" }],
-  ["right-end", { side: "right", align: "end" }],
-]);
+import { TPlacement, TSide, TAlign, convertPlacementToSideAndAlign } from "../utils/placement";
 
 type ITooltipProps = {
   tooltipHeading?: string;
   tooltipContent: string | React.ReactNode;
-  position?: TPosition;
+  position?: TPlacement;
   children: React.ReactElement;
   disabled?: boolean;
   className?: string;
   openDelay?: number;
   closeDelay?: number;
   isMobile?: boolean;
   renderByDefault?: boolean;
-  side?: Side;
-  align?: Align;
+  side?: TSide;
+  align?: TAlign;
   sideOffset?: number;
 };
 
-// conversion function
-export function convertPlacementToSideAndAlign(placement: TPosition): {
-  side: Side;
-  align: Align;
-} {
-  return PLACEMENT_MAP.get(placement) || { side: "bottom", align: "center" };
-}
-
 export function Tooltip(props: ITooltipProps) {
   const {
     tooltipHeading,

packages/propel/src/utils/placement.ts

@@ -0,0 +1,47 @@
+// types
+export type TPlacement =
+  | "auto"
+  | "auto-start"
+  | "auto-end"
+  | "top-start"
+  | "top-end"
+  | "bottom-start"
+  | "bottom-end"
+  | "right-start"
+  | "right-end"
+  | "left-start"
+  | "left-end"
+  | "top"
+  | "bottom"
+  | "right"
+  | "left";
+
+export type TSide = "top" | "bottom" | "left" | "right";
+export type TAlign = "start" | "center" | "end";
+
+// placement conversion map
+const PLACEMENT_MAP = new Map<TPlacement, { side: TSide; align: TAlign }>([
+  ["auto", { side: "bottom", align: "center" }],
+  ["auto-start", { side: "bottom", align: "start" }],
+  ["auto-end", { side: "bottom", align: "end" }],
+  ["top", { side: "top", align: "center" }],
+  ["bottom", { side: "bottom", align: "center" }],
+  ["left", { side: "left", align: "center" }],
+  ["right", { side: "right", align: "center" }],
+  ["top-start", { side: "top", align: "start" }],
+  ["top-end", { side: "top", align: "end" }],
+  ["bottom-start", { side: "bottom", align: "start" }],
+  ["bottom-end", { side: "bottom", align: "end" }],
+  ["left-start", { side: "left", align: "start" }],
+  ["left-end", { side: "left", align: "end" }],
+  ["right-start", { side: "right", align: "start" }],
+  ["right-end", { side: "right", align: "end" }],
+]);
+
+// conversion function
+export function convertPlacementToSideAndAlign(placement: TPlacement): {
+  side: TSide;
+  align: TAlign;
+} {
+  return PLACEMENT_MAP.get(placement) || { side: "bottom", align: "center" };
+}