Convert old toast types to new ones, mark as deprecated (#8746)

* convert old types to new types

* add depreciation warning for old warnings

* rm as consts

src/view/com/util/Toast.style.tsx

@@ -4,18 +4,42 @@ import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/ico
 import {CircleInfo_Stroke2_Corner0_Rounded as ErrorIcon} from '#/components/icons/CircleInfo'
 import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
 
-export type ToastType =
+export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info'
-  | 'default'
+
-  | 'success'
+export type LegacyToastType =
-  | 'error'
-  | 'warning'
-  | 'info'
   | 'xmark'
   | 'exclamation-circle'
   | 'check'
   | 'clipboard-check'
   | 'circle-exclamation'
 
+export const convertLegacyToastType = (
+  type: ToastType | LegacyToastType,
+): ToastType => {
+  switch (type) {
+    // these ones are fine
+    case 'default':
+    case 'success':
+    case 'error':
+    case 'warning':
+    case 'info':
+      return type
+    // legacy ones need conversion
+    case 'xmark':
+      return 'error'
+    case 'exclamation-circle':
+      return 'warning'
+    case 'check':
+      return 'success'
+    case 'clipboard-check':
+      return 'success'
+    case 'circle-exclamation':
+      return 'warning'
+    default:
+      return 'default'
+  }
+}
+
 export const TOAST_ANIMATION_CONFIG = {
   duration: 300,
   damping: 15,
@@ -165,7 +189,7 @@ export const TOAST_WEB_KEYFRAMES = `
       opacity: 1;
     }
   }
-  
+
   @keyframes toastFadeOut {
     from {
       opacity: 1;

src/view/com/util/Toast.tsx

@@ -20,7 +20,9 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context'
 
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 import {
+  convertLegacyToastType,
   getToastTypeStyles,
+  type LegacyToastType,
   TOAST_ANIMATION_CONFIG,
   TOAST_TYPE_TO_ICON,
   type ToastType,
@@ -30,14 +32,30 @@ import {Text} from '#/components/Typography'
 
 const TIMEOUT = 2e3
 
-export function show(message: string, type: ToastType = 'default') {
+// Use type overloading to mark certain types as deprecated -sfn
+// https://stackoverflow.com/a/78325851/13325987
+export function show(message: string, type?: ToastType): void
+/**
+ * @deprecated type is deprecated - use one of `'default' | 'success' | 'error' | 'warning' | 'info'`
+ */
+export function show(message: string, type?: LegacyToastType): void
+export function show(
+  message: string,
+  type: ToastType | LegacyToastType = 'default',
+): void {
   if (process.env.NODE_ENV === 'test') {
     return
   }
 
   AccessibilityInfo.announceForAccessibility(message)
   const item = new RootSiblings(
-    <Toast message={message} type={type} destroy={() => item.destroy()} />,
+    (
+      <Toast
+        message={message}
+        type={convertLegacyToastType(type)}
+        destroy={() => item.destroy()}
+      />
+    ),
   )
 }
 
@@ -57,9 +75,8 @@ function Toast({
   const [cardHeight, setCardHeight] = useState(0)
 
   const toastStyles = getToastTypeStyles(t)
-  const colors = toastStyles[type as keyof typeof toastStyles]
+  const colors = toastStyles[type]
-  const IconComponent =
+  const IconComponent = TOAST_TYPE_TO_ICON[type]
-    TOAST_TYPE_TO_ICON[type as keyof typeof TOAST_TYPE_TO_ICON]
 
   // for the exit animation to work on iOS the animated component
   // must not be the root component

src/view/com/util/Toast.web.tsx

@@ -6,8 +6,10 @@ import {useEffect, useState} from 'react'
 import {Pressable, StyleSheet, Text, View} from 'react-native'
 
 import {
+  convertLegacyToastType,
   getToastTypeStyles,
   getToastWebAnimationStyles,
+  type LegacyToastType,
   TOAST_TYPE_TO_ICON,
   TOAST_WEB_KEYFRAMES,
   type ToastType,
@@ -63,11 +65,11 @@ export const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
 
   const toastTypeStyles = getToastTypeStyles(t)
   const toastStyles = activeToast
-    ? toastTypeStyles[activeToast.type as keyof typeof toastTypeStyles]
+    ? toastTypeStyles[activeToast.type]
     : toastTypeStyles.default
 
   const IconComponent = activeToast
-    ? TOAST_TYPE_TO_ICON[activeToast.type as keyof typeof TOAST_TYPE_TO_ICON]
+    ? TOAST_TYPE_TO_ICON[activeToast.type]
     : TOAST_TYPE_TO_ICON.default
 
   const animationStyles = getToastWebAnimationStyles()
@@ -125,12 +127,15 @@ export const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
 // methods
 // =
 
-export function show(text: string, type: ToastType = 'default') {
+export function show(
+  text: string,
+  type: ToastType | LegacyToastType = 'default',
+) {
   if (toastTimeout) {
     clearTimeout(toastTimeout)
   }
 
-  globalSetActiveToast?.({text, type})
+  globalSetActiveToast?.({text, type: convertLegacyToastType(type)})
   toastTimeout = setTimeout(() => {
     globalSetActiveToast?.(undefined)
   }, DURATION)