Mark old components as deprecated (#8747)

* mark a bunch of stuff as deprecated

* mark s as deprecated (serverence reference????)

* rm type import

5 files changed, 71 insertions, 22 deletions

diff --git a/src/view/com/util/forms/Button.tsx b/src/view/com/util/forms/Button.tsx
index 96b49a003..24d478fe5 100644
--- a/src/view/com/util/forms/Button.tsx
+++ b/src/view/com/util/forms/Button.tsx
@@ -1,16 +1,16 @@
 import React from 'react'
 import {
   ActivityIndicator,
-  GestureResponderEvent,
-  NativeSyntheticEvent,
-  NativeTouchEvent,
+  type GestureResponderEvent,
+  type NativeSyntheticEvent,
+  type NativeTouchEvent,
   Pressable,
-  PressableStateCallbackType,
-  StyleProp,
+  type PressableStateCallbackType,
+  type StyleProp,
   StyleSheet,
-  TextStyle,
+  type TextStyle,
   View,
-  ViewStyle,
+  type ViewStyle,
 } from 'react-native'
 
 import {choose} from '#/lib/functions'
@@ -37,7 +37,9 @@ declare module 'react-native' {
   }
 }
 
-// TODO: Enforce that button always has a label
+/**
+ * @deprecated use Button from `#/components/Button.tsx` instead
+ */
 export function Button({
   type = 'primary',
   label,
diff --git a/src/view/com/util/forms/DropdownButton.tsx b/src/view/com/util/forms/DropdownButton.tsx
index a061edf2e..e20dadb49 100644
--- a/src/view/com/util/forms/DropdownButton.tsx
+++ b/src/view/com/util/forms/DropdownButton.tsx
@@ -1,22 +1,24 @@
-import React, {PropsWithChildren, useMemo, useRef} from 'react'
+import {type PropsWithChildren} from 'react'
+import {useMemo, useRef} from 'react'
 import {
   Dimensions,
-  GestureResponderEvent,
-  Insets,
-  StyleProp,
+  type GestureResponderEvent,
+  type Insets,
+  type StyleProp,
   StyleSheet,
   TouchableOpacity,
   TouchableWithoutFeedback,
   useWindowDimensions,
   View,
-  ViewStyle,
+  type ViewStyle,
 } from 'react-native'
 import Animated, {FadeIn, FadeInDown, FadeInUp} from 'react-native-reanimated'
 import RootSiblings from 'react-native-root-siblings'
-import {IconProp} from '@fortawesome/fontawesome-svg-core'
+import {type IconProp} from '@fortawesome/fontawesome-svg-core'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import type React from 'react'
 
 import {HITSLOP_10} from '#/lib/constants'
 import {usePalette} from '#/lib/hooks/usePalette'
@@ -26,7 +28,7 @@ import {isWeb} from '#/platform/detection'
 import {native} from '#/alf'
 import {FullWindowOverlay} from '#/components/FullWindowOverlay'
 import {Text} from '../text/Text'
-import {Button, ButtonType} from './Button'
+import {Button, type ButtonType} from './Button'
 
 const ESTIMATED_BTN_HEIGHT = 50
 const ESTIMATED_SEP_HEIGHT = 16
@@ -70,6 +72,9 @@ interface DropdownButtonProps {
   accessibilityHint?: string
 }
 
+/**
+ * @deprecated use Menu from `#/components/Menu.tsx` instead
+ */
 export function DropdownButton({
   testID,
   type = 'bare',
diff --git a/src/view/com/util/forms/NativeDropdown.tsx b/src/view/com/util/forms/NativeDropdown.tsx
index 8fc9be6da..5e2089d29 100644
--- a/src/view/com/util/forms/NativeDropdown.tsx
+++ b/src/view/com/util/forms/NativeDropdown.tsx
@@ -1,9 +1,15 @@
 import React from 'react'
-import {Platform, Pressable, StyleSheet, View, ViewStyle} from 'react-native'
-import {IconProp} from '@fortawesome/fontawesome-svg-core'
+import {
+  Platform,
+  Pressable,
+  StyleSheet,
+  View,
+  type ViewStyle,
+} from 'react-native'
+import {type IconProp} from '@fortawesome/fontawesome-svg-core'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import * as DropdownMenu from 'zeego/dropdown-menu'
-import {MenuItemCommonProps} from 'zeego/lib/typescript/menu'
+import {type MenuItemCommonProps} from 'zeego/lib/typescript/menu'
 
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useTheme} from '#/lib/ThemeContext'
@@ -12,8 +18,14 @@ import {Portal} from '#/components/Portal'
 
 // Custom Dropdown Menu Components
 // ==
+/**
+ * @deprecated use Menu from `#/components/Menu.tsx` instead
+ */
 export const DropdownMenuRoot = DropdownMenu.Root
 // export const DropdownMenuTrigger = DropdownMenu.Trigger
+/**
+ * @deprecated use Menu from `#/components/Menu.tsx` instead
+ */
 export const DropdownMenuContent = DropdownMenu.Content
 
 type TriggerProps = Omit<
@@ -25,6 +37,9 @@ type TriggerProps = Omit<
     accessibilityLabel?: string
     accessibilityHint?: string
   }>
+/**
+ * @deprecated use Menu from `#/components/Menu.tsx` instead
+ */
 export const DropdownMenuTrigger = DropdownMenu.create(
   (props: TriggerProps) => {
     const theme = useTheme()
@@ -59,6 +74,9 @@ export const DropdownMenuTrigger = DropdownMenu.create(
 )
 
 type ItemProps = React.ComponentProps<(typeof DropdownMenu)['Item']>
+/**
+ * @deprecated use Menu from `#/components/Menu.tsx` instead
+ */
 export const DropdownMenuItem = DropdownMenu.create(
   (props: ItemProps & {testID?: string}) => {
     const theme = useTheme()
@@ -84,6 +102,9 @@ export const DropdownMenuItem = DropdownMenu.create(
 )
 
 type TitleProps = React.ComponentProps<(typeof DropdownMenu)['ItemTitle']>
+/**
+ * @deprecated use Menu from `#/components/Menu.tsx` instead
+ */
 export const DropdownMenuItemTitle = DropdownMenu.create(
   (props: TitleProps) => {
     const pal = usePalette('default')
@@ -98,11 +119,17 @@ export const DropdownMenuItemTitle = DropdownMenu.create(
 )
 
 type IconProps = React.ComponentProps<(typeof DropdownMenu)['ItemIcon']>
+/**
+ * @deprecated use Menu from `#/components/Menu.tsx` instead
+ */
 export const DropdownMenuItemIcon = DropdownMenu.create((props: IconProps) => {
   return <DropdownMenu.ItemIcon {...props} />
 }, 'ItemIcon')
 
 type SeparatorProps = React.ComponentProps<(typeof DropdownMenu)['Separator']>
+/**
+ * @deprecated use Menu from `#/components/Menu.tsx` instead
+ */
 export const DropdownMenuSeparator = DropdownMenu.create(
   (props: SeparatorProps) => {
     const pal = usePalette('default')
@@ -142,11 +169,14 @@ type Props = {
   triggerStyle?: ViewStyle
 }
 
-/* The `NativeDropdown` function uses native iOS and Android dropdown menus.
+/**
+ * The `NativeDropdown` function uses native iOS and Android dropdown menus.
  * It also creates a animated custom dropdown for web that uses
  * Radix UI primitives under the hood
  * @prop {DropdownItem[]} items - An array of dropdown items
  * @prop {React.ReactNode} children - A custom dropdown trigger
+ *
+ * @deprecated use Menu from `#/components/Menu.tsx` instead
  */
 export function NativeDropdown({
   items,
diff --git a/src/view/com/util/forms/NativeDropdown.web.tsx b/src/view/com/util/forms/NativeDropdown.web.tsx
index cab7bac51..37df48da3 100644
--- a/src/view/com/util/forms/NativeDropdown.web.tsx
+++ b/src/view/com/util/forms/NativeDropdown.web.tsx
@@ -63,6 +63,9 @@ type Props = {
   triggerStyle?: ViewStyle
 }
 
+/**
+ * @deprecated use Menu from `#/components/Menu.tsx` instead
+ */
 export function NativeDropdown({
   items,
   children,
diff --git a/src/view/com/util/forms/ToggleButton.tsx b/src/view/com/util/forms/ToggleButton.tsx
index 31222aafe..ca9d9fb49 100644
--- a/src/view/com/util/forms/ToggleButton.tsx
+++ b/src/view/com/util/forms/ToggleButton.tsx
@@ -1,12 +1,21 @@
-import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native'
+import {
+  type StyleProp,
+  StyleSheet,
+  type TextStyle,
+  View,
+  type ViewStyle,
+} from 'react-native'
 
 import {choose} from '#/lib/functions'
 import {colors} from '#/lib/styles'
 import {useTheme} from '#/lib/ThemeContext'
-import {TypographyVariant} from '#/lib/ThemeContext'
+import {type TypographyVariant} from '#/lib/ThemeContext'
 import {Text} from '../text/Text'
-import {Button, ButtonType} from './Button'
+import {Button, type ButtonType} from './Button'
 
+/**
+ * @deprecated use Toggle from `#/components/form/Toggle.tsx` instead
+ */
 export function ToggleButton({
   testID,
   type = 'default-light',