Yeah toast (#8878)

* Split out into macro component

* Add Action component

* Add fallback

* add button to view post after sending

* Dismiss toast when clicking action button

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

.eslintrc.js

@@ -34,6 +34,7 @@ module.exports = {
           'P',
           'Admonition',
           'Admonition.Admonition',
+          'Toast.Action',
           'AgeAssuranceAdmonition',
           'Span',
         ],

src/components/Toast/Toast.tsx

@@ -1,21 +1,32 @@
 import {createContext, useContext, useMemo} from 'react'
-import {View} from 'react-native'
+import {type GestureResponderEvent, View} from 'react-native'
 
 import {atoms as a, select, useAlf, useTheme} from '#/alf'
+import {
+  Button,
+  type ButtonProps,
+  type UninheritableButtonProps,
+} from '#/components/Button'
+import {CircleCheck_Stroke2_Corner0_Rounded as CircleCheck} from '#/components/icons/CircleCheck'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
 import {CircleInfo_Stroke2_Corner0_Rounded as ErrorIcon} from '#/components/icons/CircleInfo'
+import {type Props as SVGIconProps} from '#/components/icons/common'
 import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
+import {dismiss} from '#/components/Toast/sonner'
 import {type ToastType} from '#/components/Toast/types'
-import {Text} from '#/components/Typography'
+import {Text as BaseText} from '#/components/Typography'
-import {CircleCheck_Stroke2_Corner0_Rounded as CircleCheck} from '../icons/CircleCheck'
 
-type ContextType = {
+type ToastConfigContextType = {
+  id: string
+}
+
+type ToastThemeContextType = {
   type: ToastType
 }
 
 export type ToastComponentProps = {
   type?: ToastType
-  content: React.ReactNode
+  content: string
 }
 
 export const ICONS = {
@@ -26,69 +37,93 @@ export const ICONS = {
   info: CircleInfo,
 }
 
-const Context = createContext<ContextType>({
+const ToastConfigContext = createContext<ToastConfigContextType>({
+  id: '',
+})
+ToastConfigContext.displayName = 'ToastConfigContext'
+
+export function ToastConfigProvider({
+  children,
+  id,
+}: {
+  children: React.ReactNode
+  id: string
+}) {
+  return (
+    <ToastConfigContext.Provider value={useMemo(() => ({id}), [id])}>
+      {children}
+    </ToastConfigContext.Provider>
+  )
+}
+
+const ToastThemeContext = createContext<ToastThemeContextType>({
   type: 'default',
 })
-Context.displayName = 'ToastContext'
+ToastThemeContext.displayName = 'ToastThemeContext'
 
-export function Toast({type = 'default', content}: ToastComponentProps) {
+export function Default({type = 'default', content}: ToastComponentProps) {
-  const {fonts} = useAlf()
+  return (
+    <Outer type={type}>
+      <Icon />
+      <Text>{content}</Text>
+    </Outer>
+  )
+}
+
+export function Outer({
+  children,
+  type = 'default',
+}: {
+  children: React.ReactNode
+  type?: ToastType
+}) {
   const t = useTheme()
   const styles = useToastStyles({type})
-  const Icon = ICONS[type]
-  /**
-   * Vibes-based number, adjusts `top` of `View` that wraps the text to
-   * compensate for different type sizes and keep the first line of text
-   * aligned with the icon. - esb
-   */
-  const fontScaleCompensation = useMemo(
-    () => parseInt(fonts.scale) * -1 * 0.65,
-    [fonts.scale],
-  )
 
   return (
-    <Context.Provider value={useMemo(() => ({type}), [type])}>
+    <ToastThemeContext.Provider value={useMemo(() => ({type}), [type])}>
       <View
         style={[
           a.flex_1,
-          a.py_lg,
+          a.p_lg,
-          a.pl_xl,
-          a.pr_2xl,
           a.rounded_md,
           a.border,
           a.flex_row,
           a.gap_sm,
           t.atoms.shadow_sm,
           {
+            paddingVertical: 14, // 16 seems too big
             backgroundColor: styles.backgroundColor,
             borderColor: styles.borderColor,
           },
         ]}>
-        <Icon size="md" fill={styles.iconColor} />
+        {children}
+      </View>
+    </ToastThemeContext.Provider>
+  )
+}
 
+export function Icon({icon}: {icon?: React.ComponentType<SVGIconProps>}) {
+  const {type} = useContext(ToastThemeContext)
+  const styles = useToastStyles({type})
+  const IconComponent = icon || ICONS[type]
+  return <IconComponent size="md" fill={styles.iconColor} />
+}
+
+export function Text({children}: {children: React.ReactNode}) {
+  const {type} = useContext(ToastThemeContext)
+  const {textColor} = useToastStyles({type})
+  const {fontScaleCompensation} = useToastFontScaleCompensation()
+  return (
     <View
       style={[
         a.flex_1,
+        a.pr_lg,
         {
           top: fontScaleCompensation,
         },
       ]}>
-          {typeof content === 'string' ? (
+      <BaseText
-            <ToastText>{content}</ToastText>
-          ) : (
-            content
-          )}
-        </View>
-      </View>
-    </Context.Provider>
-  )
-}
-
-export function ToastText({children}: {children: React.ReactNode}) {
-  const {type} = useContext(Context)
-  const {textColor} = useToastStyles({type})
-  return (
-    <Text
         selectable={false}
         style={[
           a.text_md,
@@ -100,7 +135,141 @@ export function ToastText({children}: {children: React.ReactNode}) {
           },
         ]}>
         {children}
-    </Text>
+      </BaseText>
+    </View>
+  )
+}
+
+export function Action(
+  props: Omit<ButtonProps, UninheritableButtonProps | 'children'> & {
+    children: string
+  },
+) {
+  const t = useTheme()
+  const {fontScaleCompensation} = useToastFontScaleCompensation()
+  const {type} = useContext(ToastThemeContext)
+  const {id} = useContext(ToastConfigContext)
+  const styles = useMemo(() => {
+    const base = {
+      base: {
+        textColor: t.palette.contrast_600,
+        backgroundColor: t.atoms.bg_contrast_25.backgroundColor,
+      },
+      interacted: {
+        textColor: t.atoms.text.color,
+        backgroundColor: t.atoms.bg_contrast_50.backgroundColor,
+      },
+    }
+    return {
+      default: base,
+      success: {
+        base: {
+          textColor: select(t.name, {
+            light: t.palette.primary_800,
+            dim: t.palette.primary_900,
+            dark: t.palette.primary_900,
+          }),
+          backgroundColor: t.palette.primary_25,
+        },
+        interacted: {
+          textColor: select(t.name, {
+            light: t.palette.primary_900,
+            dim: t.palette.primary_975,
+            dark: t.palette.primary_975,
+          }),
+          backgroundColor: t.palette.primary_50,
+        },
+      },
+      error: {
+        base: {
+          textColor: select(t.name, {
+            light: t.palette.negative_700,
+            dim: t.palette.negative_900,
+            dark: t.palette.negative_900,
+          }),
+          backgroundColor: t.palette.negative_25,
+        },
+        interacted: {
+          textColor: select(t.name, {
+            light: t.palette.negative_900,
+            dim: t.palette.negative_975,
+            dark: t.palette.negative_975,
+          }),
+          backgroundColor: t.palette.negative_50,
+        },
+      },
+      warning: base,
+      info: base,
+    }[type]
+  }, [t, type])
+
+  const onPress = (e: GestureResponderEvent) => {
+    console.log('Toast Action pressed, dismissing toast', id)
+    dismiss(id)
+    props.onPress?.(e)
+  }
+
+  return (
+    <View style={{top: fontScaleCompensation}}>
+      <Button {...props} onPress={onPress}>
+        {s => {
+          const interacted = s.pressed || s.hovered || s.focused
+          return (
+            <>
+              <View
+                style={[
+                  a.absolute,
+                  a.curve_continuous,
+                  {
+                    // tiny button styles
+                    top: -5,
+                    bottom: -5,
+                    left: -9,
+                    right: -9,
+                    borderRadius: 6,
+                    backgroundColor: interacted
+                      ? styles.interacted.backgroundColor
+                      : styles.base.backgroundColor,
+                  },
+                ]}
+              />
+              <BaseText
+                style={[
+                  a.text_md,
+                  a.font_medium,
+                  a.leading_snug,
+                  {
+                    color: interacted
+                      ? styles.interacted.textColor
+                      : styles.base.textColor,
+                  },
+                ]}>
+                {props.children}
+              </BaseText>
+            </>
+          )
+        }}
+      </Button>
+    </View>
+  )
+}
+
+/**
+ * Vibes-based number, provides t `top` value to wrap the text to compensate
+ * for different type sizes and keep the first line of text aligned with the
+ * icon. - esb
+ */
+function useToastFontScaleCompensation() {
+  const {fonts} = useAlf()
+  const fontScaleCompensation = useMemo(
+    () => parseInt(fonts.scale) * -1 * 0.65,
+    [fonts.scale],
+  )
+  return useMemo(
+    () => ({
+      fontScaleCompensation,
+    }),
+    [fontScaleCompensation],
   )
 }
 

src/components/Toast/index.tsx

@@ -1,15 +1,21 @@
+import React from 'react'
 import {View} from 'react-native'
+import {nanoid} from 'nanoid/non-secure'
 import {toast as sonner, Toaster} from 'sonner-native'
 
 import {atoms as a} from '#/alf'
 import {DURATION} from '#/components/Toast/const'
 import {
-  Toast as BaseToast,
+  Default as DefaultToast,
+  Outer as BaseOuter,
   type ToastComponentProps,
+  ToastConfigProvider,
 } from '#/components/Toast/Toast'
 import {type BaseToastOptions} from '#/components/Toast/types'
 
 export {DURATION} from '#/components/Toast/const'
+export {Action, Icon, Text} from '#/components/Toast/Toast'
+export {type ToastType} from '#/components/Toast/types'
 
 /**
  * Toasts are rendered in a global outlet, which is placed at the top of the
@@ -22,10 +28,24 @@ export function ToastOutlet() {
 /**
  * The toast UI component
  */
-export function Toast({type, content}: ToastComponentProps) {
+export function Default({type, content}: ToastComponentProps) {
   return (
     <View style={[a.px_xl, a.w_full]}>
-      <BaseToast content={content} type={type} />
+      <DefaultToast content={content} type={type} />
+    </View>
+  )
+}
+
+export function Outer({
+  children,
+  type = 'default',
+}: {
+  children: React.ReactNode
+  type?: ToastComponentProps['type']
+}) {
+  return (
+    <View style={[a.px_xl, a.w_full]}>
+      <BaseOuter type={type}>{children}</BaseOuter>
     </View>
   )
 }
@@ -42,8 +62,31 @@ export function show(
   content: React.ReactNode,
   {type, ...options}: BaseToastOptions = {},
 ) {
-  sonner.custom(<Toast content={content} type={type} />, {
+  const id = nanoid()
+
+  if (typeof content === 'string') {
+    sonner.custom(
+      <ToastConfigProvider id={id}>
+        <DefaultToast content={content} type={type} />
+      </ToastConfigProvider>,
+      {
         ...options,
+        id,
         duration: options?.duration ?? DURATION,
-  })
+      },
+    )
+  } else if (React.isValidElement(content)) {
+    sonner.custom(
+      <ToastConfigProvider id={id}>{content}</ToastConfigProvider>,
+      {
+        ...options,
+        id,
+        duration: options?.duration ?? DURATION,
+      },
+    )
+  } else {
+    throw new Error(
+      `Toast can be a string or a React element, got ${typeof content}`,
+    )
+  }
 }

src/components/Toast/index.web.tsx

@@ -1,10 +1,19 @@
+import React from 'react'
+import {nanoid} from 'nanoid/non-secure'
 import {toast as sonner, Toaster} from 'sonner'
 
 import {atoms as a} from '#/alf'
 import {DURATION} from '#/components/Toast/const'
-import {Toast} from '#/components/Toast/Toast'
+import {
+  Default as DefaultToast,
+  ToastConfigProvider,
+} from '#/components/Toast/Toast'
 import {type BaseToastOptions} from '#/components/Toast/types'
 
+export {DURATION} from '#/components/Toast/const'
+export * from '#/components/Toast/Toast'
+export {type ToastType} from '#/components/Toast/types'
+
 /**
  * Toasts are rendered in a global outlet, which is placed at the top of the
  * component tree.
@@ -32,9 +41,30 @@ export function show(
   content: React.ReactNode,
   {type, ...options}: BaseToastOptions = {},
 ) {
-  sonner(<Toast content={content} type={type} />, {
+  const id = nanoid()
-    unstyled: true, // required on web
+
+  if (typeof content === 'string') {
+    sonner(
+      <ToastConfigProvider id={id}>
+        <DefaultToast content={content} type={type} />
+      </ToastConfigProvider>,
+      {
         ...options,
+        unstyled: true, // required on web
+        id,
+        duration: options?.duration ?? DURATION,
+      },
+    )
+  } else if (React.isValidElement(content)) {
+    sonner(<ToastConfigProvider id={id}>{content}</ToastConfigProvider>, {
+      ...options,
+      unstyled: true, // required on web
+      id,
       duration: options?.duration ?? DURATION,
     })
+  } else {
+    throw new Error(
+      `Toast can be a string or a React element, got ${typeof content}`,
+    )
+  }
 }

src/components/Toast/sonner/index.ts

@@ -0,0 +1,3 @@
+import {toast} from 'sonner-native'
+
+export const dismiss = toast.dismiss

src/components/Toast/sonner/index.web.ts

@@ -0,0 +1,3 @@
+import {toast} from 'sonner'
+
+export const dismiss = toast.dismiss

src/view/com/composer/Composer.tsx

@@ -46,12 +46,14 @@ import {
   AppBskyFeedDefs,
   type AppBskyFeedGetPostThread,
   AppBskyUnspeccedDefs,
+  AtUri,
   type BskyAgent,
   type RichText,
 } from '@atproto/api'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg, plural, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {useNavigation} from '@react-navigation/native'
 import {useQueryClient} from '@tanstack/react-query'
 
 import * as apilib from '#/lib/api/index'
@@ -70,6 +72,7 @@ import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {mimeToExt} from '#/lib/media/video/util'
+import {type NavigationProp} from '#/lib/routes/types'
 import {logEvent} from '#/lib/statsig/statsig'
 import {cleanError} from '#/lib/strings/errors'
 import {colors} from '#/lib/styles'
@@ -123,12 +126,13 @@ import {Text} from '#/view/com/util/text/Text'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, native, useTheme, web} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {CircleCheck_Stroke2_Corner0_Rounded as CircleCheckIcon} from '#/components/icons/CircleCheck'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
 import {EmojiArc_Stroke2_Corner0_Rounded as EmojiSmile} from '#/components/icons/Emoji'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 import {LazyQuoteEmbed} from '#/components/Post/Embed/LazyQuoteEmbed'
 import * as Prompt from '#/components/Prompt'
-import * as toast from '#/components/Toast'
+import * as Toast from '#/components/Toast'
 import {Text as NewText} from '#/components/Typography'
 import {BottomSheetPortalProvider} from '../../../../modules/bottom-sheet'
 import {
@@ -188,6 +192,7 @@ export const ComposePost = ({
   const {closeAllDialogs} = useDialogStateControlContext()
   const {closeAllModals} = useModalControls()
   const {data: preferences} = usePreferencesQuery()
+  const navigation = useNavigation<NavigationProp>()
 
   const [isKeyboardVisible] = useIsKeyboardVisible({iosUseWillEvents: true})
   const [isPublishing, setIsPublishing] = useState(false)
@@ -521,12 +526,27 @@ export const ComposePost = ({
       onPostSuccess?.(postSuccessData)
     }
     onClose()
-    toast.show(
+    Toast.show(
-      thread.posts.length > 1
+      <Toast.Outer type="success">
-        ? _(msg`Your posts have been published`)
+        <Toast.Icon icon={CircleCheckIcon} />
+        <Toast.Text>
+          {thread.posts.length > 1
+            ? _(msg`Your posts were sent`)
             : replyTo
-          ? _(msg`Your reply has been published`)
+              ? _(msg`Your reply was sent`)
-          : _(msg`Your post has been published`),
+              : _(msg`Your post was sent`)}
+        </Toast.Text>
+        {postUri && (
+          <Toast.Action
+            label={_(msg`View post`)}
+            onPress={() => {
+              const {host: name, rkey} = new AtUri(postUri)
+              navigation.navigate('PostThread', {name, rkey})
+            }}>
+            View
+          </Toast.Action>
+        )}
+      </Toast.Outer>,
       {type: 'success'},
     )
   }, [
@@ -543,6 +563,7 @@ export const ComposePost = ({
     replyTo,
     setLangPrefs,
     queryClient,
+    navigation,
   ])
 
   // Preserves the referential identity passed to each post item.
@@ -826,7 +847,7 @@ let ComposerPost = React.memo(function ComposerPost({
         if (isNative) return // web only
         const [mimeType] = uri.slice('data:'.length).split(';')
         if (!SUPPORTED_MIME_TYPES.includes(mimeType as SupportedMimeTypes)) {
-          toast.show(_(msg`Unsupported video type: ${mimeType}`), {
+          Toast.show(_(msg`Unsupported video type: ${mimeType}`), {
             type: 'error',
           })
           return
@@ -1362,7 +1383,7 @@ function ComposerFooter({
       }
 
       errors.map(error => {
-        toast.show(error, {
+        Toast.show(error, {
           type: 'warning',
         })
       })

src/view/screens/Storybook/Toasts.tsx

@@ -2,74 +2,129 @@ import {Pressable, View} from 'react-native'
 
 import {show as deprecatedShow} from '#/view/com/util/Toast'
 import {atoms as a} from '#/alf'
-import * as toast from '#/components/Toast'
+import {Globe_Stroke2_Corner0_Rounded as GlobeIcon} from '#/components/icons/Globe'
-import {Toast} from '#/components/Toast/Toast'
+import * as Toast from '#/components/Toast'
+import {Default} from '#/components/Toast/Toast'
 import {H1} from '#/components/Typography'
 
+function ToastWithAction({type = 'default'}: {type?: Toast.ToastType}) {
+  return (
+    <Toast.Outer type={type}>
+      <Toast.Icon icon={GlobeIcon} />
+      <Toast.Text>This toast has an action button</Toast.Text>
+      <Toast.Action
+        label="Action"
+        onPress={() => console.log('Action clicked!')}>
+        Action
+      </Toast.Action>
+    </Toast.Outer>
+  )
+}
+
+function LongToastWithAction({type = 'default'}: {type?: Toast.ToastType}) {
+  return (
+    <Toast.Outer type={type}>
+      <Toast.Icon icon={GlobeIcon} />
+      <Toast.Text>
+        This is a longer message to test how the toast handles multiple lines of
+        text content.
+      </Toast.Text>
+      <Toast.Action
+        label="Action"
+        onPress={() => console.log('Action clicked!')}>
+        Action
+      </Toast.Action>
+    </Toast.Outer>
+  )
+}
+
 export function Toasts() {
   return (
     <View style={[a.gap_md]}>
       <H1>Toast Examples</H1>
 
       <View style={[a.gap_md]}>
+        <View style={[a.gap_md, {marginHorizontal: a.px_xl.paddingLeft * -1}]}>
           <Pressable
             accessibilityRole="button"
-          onPress={() => toast.show(`Hey I'm a toast!`)}>
+            onPress={() => Toast.show(<ToastWithAction />)}>
-          <Toast content="Hey I'm a toast!" />
+            <ToastWithAction />
+          </Pressable>
+          <Pressable
+            accessibilityRole="button"
+            onPress={() => Toast.show(<LongToastWithAction />)}>
+            <LongToastWithAction />
+          </Pressable>
+          <Pressable
+            accessibilityRole="button"
+            onPress={() => Toast.show(<ToastWithAction type="success" />)}>
+            <ToastWithAction type="success" />
+          </Pressable>
+          <Pressable
+            accessibilityRole="button"
+            onPress={() => Toast.show(<ToastWithAction type="error" />)}>
+            <ToastWithAction type="error" />
+          </Pressable>
+        </View>
+
+        <Pressable
+          accessibilityRole="button"
+          onPress={() => Toast.show(`Hey I'm a toast!`)}>
+          <Default content="Hey I'm a toast!" />
         </Pressable>
         <Pressable
           accessibilityRole="button"
           onPress={() =>
-            toast.show(`This toast will disappear after 6 seconds`, {
+            Toast.show(`This toast will disappear after 6 seconds`, {
               duration: 6e3,
             })
           }>
-          <Toast content="This toast will disappear after 6 seconds" />
+          <Default content="This toast will disappear after 6 seconds" />
         </Pressable>
         <Pressable
           accessibilityRole="button"
           onPress={() =>
-            toast.show(
+            Toast.show(
               `This is a longer message to test how the toast handles multiple lines of text content.`,
             )
           }>
-          <Toast content="This is a longer message to test how the toast handles multiple lines of text content." />
+          <Default content="This is a longer message to test how the toast handles multiple lines of text content." />
         </Pressable>
         <Pressable
           accessibilityRole="button"
           onPress={() =>
-            toast.show(`Success! Yayyyyyyy :)`, {
+            Toast.show(`Success! Yayyyyyyy :)`, {
               type: 'success',
             })
           }>
-          <Toast content="Success! Yayyyyyyy :)" type="success" />
+          <Default content="Success! Yayyyyyyy :)" type="success" />
         </Pressable>
         <Pressable
           accessibilityRole="button"
           onPress={() =>
-            toast.show(`I'm providing info!`, {
+            Toast.show(`I'm providing info!`, {
               type: 'info',
             })
           }>
-          <Toast content="I'm providing info!" type="info" />
+          <Default content="I'm providing info!" type="info" />
         </Pressable>
         <Pressable
           accessibilityRole="button"
           onPress={() =>
-            toast.show(`This is a warning toast`, {
+            Toast.show(`This is a warning toast`, {
               type: 'warning',
             })
           }>
-          <Toast content="This is a warning toast" type="warning" />
+          <Default content="This is a warning toast" type="warning" />
         </Pressable>
         <Pressable
           accessibilityRole="button"
           onPress={() =>
-            toast.show(`This is an error toast :(`, {
+            Toast.show(`This is an error toast :(`, {
               type: 'error',
             })
           }>
-          <Toast content="This is an error toast :(" type="error" />
+          <Default content="This is an error toast :(" type="error" />
         </Pressable>
 
         <Pressable
@@ -80,7 +135,7 @@ export function Toasts() {
               'exclamation-circle',
             )
           }>
-          <Toast
+          <Default
             content="This is a test of the deprecated API"
             type="warning"
           />