refactor(web): share placement parser across base ui primitives

web/app/components/base/ui/dropdown-menu/index.tsx

@@ -3,16 +3,9 @@
 import type { Placement } from '@floating-ui/react'
 import { Menu } from '@base-ui/react/menu'
 import * as React from 'react'
+import { parsePlacement } from '@/app/components/base/ui/placement'
 import { cn } from '@/utils/classnames'
 
-function parsePlacement(placement: Placement) {
-  const [side, align] = placement.split('-') as [
-    'top' | 'bottom' | 'left' | 'right',
-    'start' | 'center' | 'end' | undefined,
-  ]
-  return { side, align: align ?? 'center' as const }
-}
-
 export const DropdownMenu = Menu.Root
 export const DropdownMenuTrigger = Menu.Trigger
 export const DropdownMenuSub = Menu.SubmenuRoot

web/app/components/base/ui/placement.ts

@@ -0,0 +1,18 @@
+import type { Placement } from '@floating-ui/react'
+
+type ParsedPlacement = {
+  side: 'top' | 'bottom' | 'left' | 'right'
+  align: 'start' | 'center' | 'end'
+}
+
+export function parsePlacement(placement: Placement): ParsedPlacement {
+  const [side, align] = placement.split('-') as [
+    ParsedPlacement['side'],
+    ParsedPlacement['align'] | undefined,
+  ]
+
+  return {
+    side,
+    align: align ?? 'center',
+  }
+}

web/app/components/base/ui/popover/index.tsx

@@ -3,16 +3,9 @@
 import type { Placement } from '@floating-ui/react'
 import { Popover as BasePopover } from '@base-ui/react/popover'
 import * as React from 'react'
+import { parsePlacement } from '@/app/components/base/ui/placement'
 import { cn } from '@/utils/classnames'
 
-function parsePlacement(placement: Placement) {
-  const [side, align] = placement.split('-') as [
-    'top' | 'bottom' | 'left' | 'right',
-    'start' | 'center' | 'end' | undefined,
-  ]
-  return { side, align: align ?? 'center' as const }
-}
-
 export const Popover = BasePopover.Root
 export const PopoverTrigger = BasePopover.Trigger
 export const PopoverClose = BasePopover.Close

web/app/components/base/ui/select/index.tsx

@@ -3,16 +3,9 @@
 import type { Placement } from '@floating-ui/react'
 import { Select as BaseSelect } from '@base-ui/react/select'
 import * as React from 'react'
+import { parsePlacement } from '@/app/components/base/ui/placement'
 import { cn } from '@/utils/classnames'
 
-function parsePlacement(placement: Placement) {
-  const [side, align] = placement.split('-') as [
-    'top' | 'bottom' | 'left' | 'right',
-    'start' | 'center' | 'end' | undefined,
-  ]
-  return { side, align: align ?? 'center' as const }
-}
-
 export const Select = BaseSelect.Root
 export const SelectValue = BaseSelect.Value
 export const SelectGroup = BaseSelect.Group

web/app/components/base/ui/tooltip/index.tsx

@@ -3,16 +3,9 @@
 import type { Placement } from '@floating-ui/react'
 import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip'
 import * as React from 'react'
+import { parsePlacement } from '@/app/components/base/ui/placement'
 import { cn } from '@/utils/classnames'
 
-function parsePlacement(placement: Placement) {
-  const [side, align] = placement.split('-') as [
-    'top' | 'bottom' | 'left' | 'right',
-    'start' | 'center' | 'end' | undefined,
-  ]
-  return { side, align: align ?? 'center' as const }
-}
-
 export type TooltipProps = {
   position?: Placement
   disabled?: boolean