feat: rework toasts api and add mini mode support in toasts

packages/components/MiniToast.tsx

@@ -0,0 +1,140 @@
+import React from "react";
+import { View, useWindowDimensions } from "react-native";
+
+import { Spinner } from "./Spinner";
+import { CustomPressable } from "./buttons/CustomPressable";
+
+import checkWhiteSVG from "@/assets/icons/toast/check-circular-white.svg";
+import checkSVG from "@/assets/icons/toast/check-green.svg";
+import crossRedSVG from "@/assets/icons/toast/cross-red.svg";
+import crossWhiteSVG from "@/assets/icons/toast/cross-white.svg";
+import infoBlueSVG from "@/assets/icons/toast/info-circle-blue.svg";
+import infoWhiteSVG from "@/assets/icons/toast/info-circle-white.svg";
+import loaderBlueSVG from "@/assets/icons/toast/loader-blue.svg";
+import loaderWhiteSVG from "@/assets/icons/toast/loader-white.svg";
+import warningOrangeSVG from "@/assets/icons/toast/warning-orange.svg";
+import warningWhiteSVG from "@/assets/icons/toast/warning-white.svg";
+import { BrandText } from "@/components/BrandText";
+import { SVG } from "@/components/SVG";
+import {
+  blueDefault,
+  neutral00,
+  toastGreen,
+  toastOrange,
+  toastRed,
+} from "@/utils/style/colors";
+import { fontSemibold14 } from "@/utils/style/fonts";
+import { layout } from "@/utils/style/layout";
+
+type ToastStatusType = "info" | "success" | "error" | "warning" | "loading";
+type ToastVariantType = "solid" | "outline";
+
+export type MiniToastProps = {
+  status?: ToastStatusType;
+  message: string | null;
+  variant?: ToastVariantType;
+  duration?: number;
+  topOffset?: number;
+  showAlways?: boolean;
+  onPress?: () => void;
+};
+
+const getColors = (status: ToastStatusType) => {
+  switch (status) {
+    case "error":
+      return toastRed;
+    case "success":
+      return toastGreen;
+    case "warning":
+      return toastOrange;
+    case "loading":
+      return blueDefault;
+    default:
+      return blueDefault;
+  }
+};
+
+const getIcons = (status: ToastStatusType, variant: ToastVariantType) => {
+  switch (status) {
+    case "error":
+      return variant === "outline" ? crossRedSVG : crossWhiteSVG;
+    case "success":
+      return variant === "outline" ? checkSVG : checkWhiteSVG;
+    case "warning":
+      return variant === "outline" ? warningOrangeSVG : warningWhiteSVG;
+    case "loading":
+      return variant === "outline" ? loaderBlueSVG : loaderWhiteSVG;
+    default:
+      return variant === "outline" ? infoBlueSVG : infoWhiteSVG;
+  }
+};
+export const MiniToast = ({
+  status = "info",
+  message,
+  variant = "solid",
+  topOffset = 70,
+  onPress,
+}: MiniToastProps) => {
+  const { width: windowWidth } = useWindowDimensions();
+
+  if (!message) {
+    return null;
+  }
+
+  const onToastPress = () => {
+    if (onPress) {
+      onPress();
+    }
+  };
+
+  return (
+    <CustomPressable
+      onPress={onToastPress}
+      style={{
+        position: "absolute",
+        top: topOffset || 70,
+        maxWidth: windowWidth - 40,
+        zIndex: 50000,
+        alignSelf: "center",
+      }}
+    >
+      <View
+        style={{
+          backgroundColor:
+            variant === "outline" ? neutral00 : getColors(status),
+          borderColor: getColors(status),
+          borderWidth: 1,
+          borderStyle: "solid",
+          borderRadius: variant === "outline" ? 32 : 10,
+          paddingHorizontal: layout.spacing_x2,
+          paddingVertical: layout.spacing_x1_5,
+          flexDirection: "row",
+          gap: layout.spacing_x1,
+        }}
+      >
+        {status === "loading" ? (
+          <Spinner svg={getIcons(status, variant)} size={16} />
+        ) : (
+          <SVG
+            source={getIcons(status, variant)}
+            height={16}
+            width={16}
+            style={{ flexShrink: 0 }}
+          />
+        )}
+        <BrandText
+          style={[
+            fontSemibold14,
+            {
+              lineHeight: 16,
+              paddingRight: layout.spacing_x2,
+              maxWidth: "100%",
+            },
+          ]}
+        >
+          {message}
+        </BrandText>
+      </View>
+    </CustomPressable>
+  );
+};

packages/components/Spinner.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { View } from "react-native";
 import Animated, {
   Easing,
@@ -7,23 +7,30 @@ import Animated, {
   withRepeat,
   withTiming,
 } from "react-native-reanimated";
+import { SvgProps } from "react-native-svg";
 
 import { SVG } from "./SVG";
 
 import refreshSVG from "@/assets/icons/refresh-white.svg";
 
 const SVG_SIZE = 20;
-
-export const Spinner = () => {
+type SpinnerProps = {
+  svg?: React.FC<SvgProps>;
+  size?: number;
+};
+export const Spinner = ({ size, svg }: SpinnerProps) => {
   const rotate = useSharedValue(0);
 
-  rotate.value = withRepeat(
-    withTiming(360, {
-      duration: 1000,
-      easing: Easing.linear,
-    }),
-    -1,
-  );
+  useEffect(() => {
+    rotate.value = withRepeat(
+      withTiming(360, {
+        duration: 1000,
+        easing: Easing.linear,
+      }),
+      -1,
+    );
+  }, [rotate]);
+
   const animatedStyle = useAnimatedStyle(() => {
     return {
       transform: [{ rotate: `${rotate.value}deg` }],
@@ -32,9 +39,16 @@ export const Spinner = () => {
   return (
     <View>
       <Animated.View
-        style={[animatedStyle, { height: SVG_SIZE, width: SVG_SIZE }]}
+        style={[
+          animatedStyle,
+          { height: size || SVG_SIZE, width: size || SVG_SIZE },
+        ]}
       >
-        <SVG source={refreshSVG} width={SVG_SIZE} height={SVG_SIZE} />
+        <SVG
+          source={svg || refreshSVG}
+          width={size || SVG_SIZE}
+          height={size || SVG_SIZE}
+        />
       </Animated.View>
     </View>
   );

packages/context/FeedbacksProvider.tsx

@@ -11,6 +11,8 @@ import { LoaderFullScreen } from "../components/loaders/LoaderFullScreen";
 import { ToastError } from "../components/toasts/ToastError";
 import { ToastSuccess } from "../components/toasts/ToastSuccess";
 
+import { MiniToast, MiniToastProps } from "@/components/MiniToast";
+
 interface ToastMessage {
   title: string;
   message: string;
@@ -40,6 +42,8 @@ interface FeedbacksProviderValue {
     success?: { title: string; message?: string },
     errorTransform?: (err: unknown) => { title: string; message?: string },
   ) => () => Promise<void>;
+  miniToast: MiniToastProps;
+  setMiniToast: (data: MiniToastProps) => void;
 }
 const defaultValue: FeedbacksProviderValue = {
   toastError: initialToastError,
@@ -49,6 +53,8 @@ const defaultValue: FeedbacksProviderValue = {
   loadingFullScreen: false,
   setLoadingFullScreen: () => {},
   wrapWithFeedback: () => async () => {},
+  miniToast: { message: "" },
+  setMiniToast: () => {},
 };
 
 const FeedbacksContext = createContext(defaultValue);
@@ -59,18 +65,31 @@ export const FeedbacksContextProvider: React.FC<{ children: ReactNode }> = ({
   const [loadingFullScreen, setLoadingFullScreen] = useState(false);
   const [toastError, setToastError] = useState(initialToastError);
   const [toastSuccess, setToastSuccess] = useState(initialToastSuccess);
+  const [miniToast, setMiniToast] = useState<MiniToastProps>(
+    defaultValue.miniToast,
+  );
+  const { onPress, ...miniToastRestProps } = miniToast;
 
   useEffect(() => {
-    const timeoutID = setTimeout(
-      () => {
-        setToastError(initialToastError);
-        setToastSuccess(initialToastSuccess);
-      },
-      toastError.duration || toastSuccess.duration || 8000,
-    );
+    const toastDuration =
+      miniToast.duration ||
+      toastError.duration ||
+      toastSuccess.duration ||
+      miniToast.duration ||
+      8000;
+
+    const timeoutID = setTimeout(() => {
+      setToastError(initialToastError);
+      setToastSuccess(initialToastSuccess);
+
+      //always show mini toast when showAlways flag is enabled or status is loading
+      if (!miniToast.showAlways && miniToast.status !== "loading") {
+        setMiniToast(defaultValue.miniToast);
+      }
+    }, toastDuration);
 
     return () => clearTimeout(timeoutID);
-  }, [toastError, toastSuccess]);
+  }, [toastError, toastSuccess, miniToast]);
 
   const wrapWithFeedback: FeedbacksProviderValue["wrapWithFeedback"] =
     useCallback(
@@ -97,6 +116,13 @@ export const FeedbacksContextProvider: React.FC<{ children: ReactNode }> = ({
       [],
     );
 
+  const tapToClear = () => {
+    setMiniToast(defaultValue.miniToast);
+    if (miniToast.onPress) {
+      miniToast.onPress();
+    }
+  };
+
   return (
     <FeedbacksContext.Provider
       value={{
@@ -107,6 +133,8 @@ export const FeedbacksContextProvider: React.FC<{ children: ReactNode }> = ({
         toastSuccess,
         setToastSuccess,
         wrapWithFeedback,
+        miniToast,
+        setMiniToast,
       }}
     >
       {/*==== Loader full screen*/}
@@ -130,6 +158,12 @@ export const FeedbacksContextProvider: React.FC<{ children: ReactNode }> = ({
           message={toastSuccess.message}
         />
       ) : null}
+
+      {/* Mini Toast */}
+      {miniToast && miniToast.message && (
+        <MiniToast onPress={tapToClear} {...miniToastRestProps} />
+      )}
+
       {/*==== Page content*/}
       {children}
     </FeedbacksContext.Provider>