Mark old components as deprecated (#8747)

* mark a bunch of stuff as deprecated

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

* rm type import

src/lib/ThemeContext.tsx

@@ -1,7 +1,8 @@
-import React, {createContext, ReactNode, useContext} from 'react'
+import {type ReactNode} from 'react'
-import {TextStyle, ViewStyle} from 'react-native'
+import {createContext, useContext} from 'react'
+import {type TextStyle, type ViewStyle} from 'react-native'
 
-import {ThemeName} from '#/alf/types'
+import {type ThemeName} from '#/alf/types'
 import {darkTheme, defaultTheme, dimTheme} from './themes'
 
 export type ColorScheme = 'light' | 'dark'
@@ -29,6 +30,9 @@ export type Palette = Record<PaletteColorName, PaletteColor>
 export type ShapeName = 'button' | 'bigButton' | 'smallButton'
 export type Shapes = Record<ShapeName, ViewStyle>
 
+/**
+ * @deprecated use typography atoms from `#/alf`
+ */
 export type TypographyVariant =
   | '2xl-thin'
   | '2xl'

src/lib/hooks/usePalette.ts

@@ -1,7 +1,11 @@
 import {useMemo} from 'react'
-import {TextStyle, ViewStyle} from 'react-native'
+import {type TextStyle, type ViewStyle} from 'react-native'
 
-import {PaletteColor, PaletteColorName, useTheme} from '../ThemeContext'
+import {
+  type PaletteColor,
+  type PaletteColorName,
+  useTheme,
+} from '../ThemeContext'
 
 export interface UsePaletteValue {
   colors: PaletteColor
@@ -16,6 +20,10 @@ export interface UsePaletteValue {
   link: TextStyle
   icon: TextStyle
 }
+
+/**
+ * @deprecated use `useTheme` from `#/alf`
+ */
 export function usePalette(color: PaletteColorName): UsePaletteValue {
   const theme = useTheme()
   return useMemo(() => {

src/lib/styles.ts

@@ -1,9 +1,17 @@
-import {Dimensions, StyleProp, StyleSheet, TextStyle} from 'react-native'
+import {
+  Dimensions,
+  type StyleProp,
+  StyleSheet,
+  type TextStyle,
+} from 'react-native'
 
 import {isWeb} from '#/platform/detection'
-import {Theme, TypographyVariant} from './ThemeContext'
+import {type Theme, type TypographyVariant} from './ThemeContext'
 
 // 1 is lightest, 2 is light, 3 is mid, 4 is dark, 5 is darkest
+/**
+ * @deprecated use ALF colors instead
+ */
 export const colors = {
   white: '#ffffff',
   black: '#000000',
@@ -63,6 +71,9 @@ export const gradients = {
   blueDark: {start: '#5F45E0', end: colors.blue3}, // avis, banner
 }
 
+/**
+ * @deprecated use atoms from `#/alf`
+ */
 export const s = StyleSheet.create({
   // helpers
   footerSpacer: {height: 100},

src/state/modals/index.tsx

@@ -43,6 +43,9 @@ export interface ChangePasswordModal {
   name: 'change-password'
 }
 
+/**
+ * @deprecated DO NOT ADD NEW MODALS
+ */
 export type Modal =
   // Account
   | DeleteAccountModal
@@ -125,10 +128,16 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   )
 }
 
+/**
+ * @deprecated use the dialog system from `#/components/Dialog.tsx`
+ */
 export function useModals() {
   return React.useContext(ModalContext)
 }
 
+/**
+ * @deprecated use the dialog system from `#/components/Dialog.tsx`
+ */
 export function useModalControls() {
   return React.useContext(ModalControlContext)
 }

src/view/com/util/Link.tsx

@@ -56,6 +56,9 @@ interface Props extends React.ComponentProps<typeof TouchableOpacity> {
   onBeforePress?: () => void
 }
 
+/**
+ * @deprecated use Link from `#/components/Link.tsx` instead
+ */
 export const Link = memo(function Link({
   testID,
   style,
@@ -156,6 +159,9 @@ export const Link = memo(function Link({
   )
 })
 
+/**
+ * @deprecated use InlineLinkText from `#/components/Link.tsx` instead
+ */
 export const TextLink = memo(function TextLink({
   testID,
   type = 'md',
@@ -301,6 +307,9 @@ interface TextLinkOnWebOnlyProps extends TextProps {
   onPointerEnter?: () => void
   anchorNoUnderline?: boolean
 }
+/**
+ * @deprecated use WebOnlyInlineLinkText from `#/components/Link.tsx` instead
+ */
 export const TextLinkOnWebOnly = memo(function DesktopWebTextLink({
   testID,
   type = 'md',

src/view/com/util/ViewHeader.tsx

@@ -3,7 +3,7 @@ import {Header} from '#/components/Layout'
 /**
  * Legacy ViewHeader component. Use Layout.Header going forward.
  *
- * @deprecated
+ * @deprecated use `Layout.Header` from `#/components/Layout.tsx`
  */
 export function ViewHeader({
   title,

src/view/com/util/forms/Button.tsx

@@ -1,16 +1,16 @@
 import React from 'react'
 import {
   ActivityIndicator,
-  GestureResponderEvent,
+  type GestureResponderEvent,
-  NativeSyntheticEvent,
+  type NativeSyntheticEvent,
-  NativeTouchEvent,
+  type NativeTouchEvent,
   Pressable,
-  PressableStateCallbackType,
+  type PressableStateCallbackType,
-  StyleProp,
+  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,

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,
+  type GestureResponderEvent,
-  Insets,
+  type Insets,
-  StyleProp,
+  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',

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 {
-import {IconProp} from '@fortawesome/fontawesome-svg-core'
+  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,

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,

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',

src/view/com/util/text/Text.tsx

@@ -1,16 +1,16 @@
 import React from 'react'
-import {StyleSheet, TextProps} from 'react-native'
+import {StyleSheet, type TextProps} from 'react-native'
 import {UITextView} from 'react-native-uitextview'
 
 import {lh, s} from '#/lib/styles'
-import {TypographyVariant, useTheme} from '#/lib/ThemeContext'
+import {type TypographyVariant, useTheme} from '#/lib/ThemeContext'
 import {logger} from '#/logger'
 import {isIOS, isWeb} from '#/platform/detection'
 import {applyFonts, useAlf} from '#/alf'
 import {
   childHasEmoji,
   renderChildrenWithEmoji,
-  StringChild,
+  type StringChild,
 } from '#/alf/typography'
 
 export type CustomTextProps = Omit<TextProps, 'children'> & {
@@ -32,7 +32,7 @@ export type CustomTextProps = Omit<TextProps, 'children'> & {
 
 export {Text_DEPRECATED as Text}
 /**
- * @deprecated use Text from Typography instead.
+ * @deprecated use Text from `#/components/Typography.tsx` instead
  */
 function Text_DEPRECATED({
   type = 'md',