From 67ba92fa624f8edb2878fe65ac19439dff042c29 Mon Sep 17 00:00:00 2001 From: Ana Date: Wed, 30 Jul 2025 00:02:03 -0700 Subject: [PATCH 1/6] update: imports for toast --- src/view/com/util/Toast.tsx | 2 +- src/view/com/util/Toast.web.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/view/com/util/Toast.tsx b/src/view/com/util/Toast.tsx index 2f8888bef4..9c20e56be8 100644 --- a/src/view/com/util/Toast.tsx +++ b/src/view/com/util/Toast.tsx @@ -25,7 +25,7 @@ import { TOAST_TYPE_TO_ICON, getToastTypeStyles, TOAST_ANIMATION_CONFIG, -} from './Toast.style' +} from '#/view/com/util/Toast.style' const TIMEOUT = 2e3 diff --git a/src/view/com/util/Toast.web.tsx b/src/view/com/util/Toast.web.tsx index 331a8b5398..fbe31528e3 100644 --- a/src/view/com/util/Toast.web.tsx +++ b/src/view/com/util/Toast.web.tsx @@ -11,7 +11,7 @@ import { getToastTypeStyles, getToastWebAnimationStyles, TOAST_WEB_KEYFRAMES, -} from './Toast.style' +} from '#/view/com/util/Toast.style' const DURATION = 3500 @@ -146,7 +146,7 @@ const styles = StyleSheet.create({ maxWidth: 380, padding: 20, flexDirection: 'row', - alignItems: 'flex-start', + alignItems: 'center', borderRadius: 10, borderWidth: 1, }, From f472c7f540840df7d98af22719742944e70ccfa2 Mon Sep 17 00:00:00 2001 From: Ana Date: Wed, 30 Jul 2025 00:14:28 -0700 Subject: [PATCH 2/6] update sorting --- src/view/com/util/Toast.style.tsx | 6 +++--- src/view/com/util/Toast.tsx | 18 +++++++++--------- src/view/com/util/Toast.web.tsx | 7 ++++--- src/view/screens/Storybook/Toasts.tsx | 18 +++++++++--------- 4 files changed, 25 insertions(+), 24 deletions(-) diff --git a/src/view/com/util/Toast.style.tsx b/src/view/com/util/Toast.style.tsx index 9a7e6b82d1..6bfb12bc1c 100644 --- a/src/view/com/util/Toast.style.tsx +++ b/src/view/com/util/Toast.style.tsx @@ -1,8 +1,8 @@ -import {type Theme, select} from '#/alf' -import {CircleInfo_Stroke2_Corner0_Rounded as ErrorIcon} from '#/components/icons/CircleInfo' -import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning' import {Check_Stroke2_Corner0_Rounded as SuccessIcon} from '#/components/icons/Check' import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo' +import {CircleInfo_Stroke2_Corner0_Rounded as ErrorIcon} from '#/components/icons/CircleInfo' +import {type Theme, select} from '#/alf' +import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning' export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info' diff --git a/src/view/com/util/Toast.tsx b/src/view/com/util/Toast.tsx index 9c20e56be8..6fe04f793f 100644 --- a/src/view/com/util/Toast.tsx +++ b/src/view/com/util/Toast.tsx @@ -1,3 +1,12 @@ +import {atoms as a, useTheme} from '#/alf' +import {Text} from '#/components/Typography' +import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' +import { + type ToastType, + getToastTypeStyles, + TOAST_ANIMATION_CONFIG, + TOAST_TYPE_TO_ICON, +} from '#/view/com/util/Toast.style' import {useEffect, useMemo, useRef, useState} from 'react' import {AccessibilityInfo, View} from 'react-native' import { @@ -17,15 +26,6 @@ import Animated, { } from 'react-native-reanimated' import RootSiblings from 'react-native-root-siblings' import {useSafeAreaInsets} from 'react-native-safe-area-context' -import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' -import {atoms as a, useTheme} from '#/alf' -import {Text} from '#/components/Typography' -import { - type ToastType, - TOAST_TYPE_TO_ICON, - getToastTypeStyles, - TOAST_ANIMATION_CONFIG, -} from '#/view/com/util/Toast.style' const TIMEOUT = 2e3 diff --git a/src/view/com/util/Toast.web.tsx b/src/view/com/util/Toast.web.tsx index fbe31528e3..9ed1f03975 100644 --- a/src/view/com/util/Toast.web.tsx +++ b/src/view/com/util/Toast.web.tsx @@ -4,14 +4,15 @@ import {useEffect, useState} from 'react' import {Pressable, StyleSheet, Text, View} from 'react-native' -import {atoms as a, useTheme} from '#/alf' + import { - type ToastType, - TOAST_TYPE_TO_ICON, getToastTypeStyles, getToastWebAnimationStyles, + TOAST_TYPE_TO_ICON, TOAST_WEB_KEYFRAMES, + type ToastType, } from '#/view/com/util/Toast.style' +import {atoms as a, useTheme} from '#/alf' const DURATION = 3500 diff --git a/src/view/screens/Storybook/Toasts.tsx b/src/view/screens/Storybook/Toasts.tsx index 5197ec2f4c..da0f1c416e 100644 --- a/src/view/screens/Storybook/Toasts.tsx +++ b/src/view/screens/Storybook/Toasts.tsx @@ -1,13 +1,13 @@ -import {View, Pressable} from 'react-native' +import {Pressable,View} from 'react-native' -import {atoms as a, useTheme} from '#/alf' -import {Text, H1} from '#/components/Typography' -import { - type ToastType, - TOAST_TYPE_TO_ICON, - getToastTypeStyles, -} from '#/view/com/util/Toast.style' import * as Toast from '#/view/com/util/Toast' +import { + getToastTypeStyles, + TOAST_TYPE_TO_ICON, + type ToastType, +} from '#/view/com/util/Toast.style' +import {atoms as a, useTheme} from '#/alf' +import {H1,Text} from '#/components/Typography' function ToastPreview({message, type}: {message: string; type: ToastType}) { const t = useTheme() @@ -16,7 +16,7 @@ function ToastPreview({message, type}: {message: string; type: ToastType}) { const IconComponent = TOAST_TYPE_TO_ICON[type] return ( - Toast.show(message, type)} style={[ {backgroundColor: colors.backgroundColor}, From f8781270e5df1d3730192ac463331845af028b4b Mon Sep 17 00:00:00 2001 From: Ana Date: Wed, 30 Jul 2025 00:36:14 -0700 Subject: [PATCH 3/6] update: toast style after lint --- src/view/com/util/Toast.style.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/view/com/util/Toast.style.tsx b/src/view/com/util/Toast.style.tsx index 6bfb12bc1c..dfa4f4fd63 100644 --- a/src/view/com/util/Toast.style.tsx +++ b/src/view/com/util/Toast.style.tsx @@ -1,7 +1,7 @@ +import {select, type Theme} from '#/alf' import {Check_Stroke2_Corner0_Rounded as SuccessIcon} from '#/components/icons/Check' import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo' import {CircleInfo_Stroke2_Corner0_Rounded as ErrorIcon} from '#/components/icons/CircleInfo' -import {type Theme, select} from '#/alf' import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning' export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info' From 315e7341bf99243bb0249567f62ca20d147e7b53 Mon Sep 17 00:00:00 2001 From: Ana Date: Wed, 30 Jul 2025 00:40:34 -0700 Subject: [PATCH 4/6] update: lint fixes for toast.tsx --- src/view/com/util/Toast.tsx | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/view/com/util/Toast.tsx b/src/view/com/util/Toast.tsx index 6fe04f793f..7258eac9d8 100644 --- a/src/view/com/util/Toast.tsx +++ b/src/view/com/util/Toast.tsx @@ -1,12 +1,3 @@ -import {atoms as a, useTheme} from '#/alf' -import {Text} from '#/components/Typography' -import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' -import { - type ToastType, - getToastTypeStyles, - TOAST_ANIMATION_CONFIG, - TOAST_TYPE_TO_ICON, -} from '#/view/com/util/Toast.style' import {useEffect, useMemo, useRef, useState} from 'react' import {AccessibilityInfo, View} from 'react-native' import { @@ -27,6 +18,16 @@ import Animated, { import RootSiblings from 'react-native-root-siblings' import {useSafeAreaInsets} from 'react-native-safe-area-context' +import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' +import { + getToastTypeStyles, + TOAST_ANIMATION_CONFIG, + TOAST_TYPE_TO_ICON, + type ToastType, +} from '#/view/com/util/Toast.style' +import {atoms as a, useTheme} from '#/alf' +import {Text} from '#/components/Typography' + const TIMEOUT = 2e3 export function show(message: string, type: ToastType = 'default') { From d141921abf23d0694ce399615e70011492434e69 Mon Sep 17 00:00:00 2001 From: Ana Date: Wed, 30 Jul 2025 00:48:56 -0700 Subject: [PATCH 5/6] add: prettier formating --- src/view/screens/Storybook/Toasts.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/view/screens/Storybook/Toasts.tsx b/src/view/screens/Storybook/Toasts.tsx index da0f1c416e..54735f7bbd 100644 --- a/src/view/screens/Storybook/Toasts.tsx +++ b/src/view/screens/Storybook/Toasts.tsx @@ -1,4 +1,4 @@ -import {Pressable,View} from 'react-native' +import {Pressable, View} from 'react-native' import * as Toast from '#/view/com/util/Toast' import { @@ -7,7 +7,7 @@ import { type ToastType, } from '#/view/com/util/Toast.style' import {atoms as a, useTheme} from '#/alf' -import {H1,Text} from '#/components/Typography' +import {H1, Text} from '#/components/Typography' function ToastPreview({message, type}: {message: string; type: ToastType}) { const t = useTheme() @@ -16,7 +16,8 @@ function ToastPreview({message, type}: {message: string; type: ToastType}) { const IconComponent = TOAST_TYPE_TO_ICON[type] return ( - Toast.show(message, type)} style={[ {backgroundColor: colors.backgroundColor}, From 18add1cff9eb36568439d8ea80180c36c1a30260 Mon Sep 17 00:00:00 2001 From: Ana Date: Wed, 30 Jul 2025 01:08:14 -0700 Subject: [PATCH 6/6] update type errors --- src/view/com/util/Toast.style.tsx | 12 +++++++++++- src/view/com/util/Toast.tsx | 5 +++-- src/view/com/util/Toast.web.tsx | 4 ++-- src/view/screens/Storybook/Toasts.tsx | 5 +++-- 4 files changed, 19 insertions(+), 7 deletions(-) diff --git a/src/view/com/util/Toast.style.tsx b/src/view/com/util/Toast.style.tsx index dfa4f4fd63..8b952fd00b 100644 --- a/src/view/com/util/Toast.style.tsx +++ b/src/view/com/util/Toast.style.tsx @@ -4,7 +4,17 @@ 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 = 'default' | 'success' | 'error' | 'warning' | 'info' +export type ToastType = + | 'default' + | 'success' + | 'error' + | 'warning' + | 'info' + | 'xmark' + | 'exclamation-circle' + | 'check' + | 'clipboard-check' + | 'circle-exclamation' export const TOAST_ANIMATION_CONFIG = { duration: 300, diff --git a/src/view/com/util/Toast.tsx b/src/view/com/util/Toast.tsx index 7258eac9d8..4c999ca2a4 100644 --- a/src/view/com/util/Toast.tsx +++ b/src/view/com/util/Toast.tsx @@ -57,8 +57,9 @@ function Toast({ const [cardHeight, setCardHeight] = useState(0) const toastStyles = getToastTypeStyles(t) - const colors = toastStyles[type] - const IconComponent = TOAST_TYPE_TO_ICON[type] + const colors = toastStyles[type as keyof typeof toastStyles] + const IconComponent = + 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 diff --git a/src/view/com/util/Toast.web.tsx b/src/view/com/util/Toast.web.tsx index 9ed1f03975..1abbaa0031 100644 --- a/src/view/com/util/Toast.web.tsx +++ b/src/view/com/util/Toast.web.tsx @@ -63,11 +63,11 @@ export const ToastContainer: React.FC = ({}) => { const toastTypeStyles = getToastTypeStyles(t) const toastStyles = activeToast - ? toastTypeStyles[activeToast.type] + ? toastTypeStyles[activeToast.type as keyof typeof toastTypeStyles] : toastTypeStyles.default const IconComponent = activeToast - ? TOAST_TYPE_TO_ICON[activeToast.type] + ? TOAST_TYPE_TO_ICON[activeToast.type as keyof typeof TOAST_TYPE_TO_ICON] : TOAST_TYPE_TO_ICON.default const animationStyles = getToastWebAnimationStyles() diff --git a/src/view/screens/Storybook/Toasts.tsx b/src/view/screens/Storybook/Toasts.tsx index 54735f7bbd..4c17f1c332 100644 --- a/src/view/screens/Storybook/Toasts.tsx +++ b/src/view/screens/Storybook/Toasts.tsx @@ -12,8 +12,9 @@ import {H1, Text} from '#/components/Typography' function ToastPreview({message, type}: {message: string; type: ToastType}) { const t = useTheme() const toastStyles = getToastTypeStyles(t) - const colors = toastStyles[type] - const IconComponent = TOAST_TYPE_TO_ICON[type] + const colors = toastStyles[type as keyof typeof toastStyles] + const IconComponent = + TOAST_TYPE_TO_ICON[type as keyof typeof TOAST_TYPE_TO_ICON] return (