[WEB-570] chore: toast refactor

packages/tailwind-config-custom/tailwind.config.js

@@ -198,6 +198,31 @@ module.exports = {
             300: convertToRGB("--color-onboarding-border-300"),
           },
         },
+        toast: {
+          text: {
+            success: convertToRGB("--color-toast-success-text"),
+            error: convertToRGB("--color-toast-error-text"),
+            warning: convertToRGB("--color-toast-warning-text"),
+            info: convertToRGB("--color-toast-info-text"),
+            loading: convertToRGB("--color-toast-loading-text"),
+            secondary: convertToRGB("--color-toast-secondary-text"),
+            tertiary: convertToRGB("--color-toast-tertiary-text"),
+          },
+          background: {
+            success: convertToRGB("--color-toast-success-background"),
+            error: convertToRGB("--color-toast-error-background"),
+            warning: convertToRGB("--color-toast-warning-background"),
+            info: convertToRGB("--color-toast-info-background"),
+            loading: convertToRGB("--color-toast-loading-background"),
+          },
+          border: {
+            success: convertToRGB("--color-toast-success-border"),
+            error: convertToRGB("--color-toast-error-border"),
+            warning: convertToRGB("--color-toast-warning-border"),
+            info: convertToRGB("--color-toast-info-border"),
+            loading: convertToRGB("--color-toast-loading-border"),
+          },
+        },
       },
       keyframes: {
         leftToaster: {

packages/ui/package.json

@@ -26,6 +26,7 @@
     "react-color": "^2.19.3",
     "react-dom": "^18.2.0",
     "react-popper": "^2.3.0",
+    "sonner": "^1.4.2",
     "tailwind-merge": "^2.0.0"
   },
   "devDependencies": {

packages/ui/src/index.ts

@@ -10,3 +10,4 @@ export * from "./spinners";
 export * from "./tooltip";
 export * from "./loader";
 export * from "./control-link";
+export * from "./toast";

packages/ui/src/spinners/circular-bar-spinner.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+
+interface ICircularBarSpinner extends React.SVGAttributes<SVGElement> {
+  height?: string;
+  width?: string;
+  className?: string | undefined;
+}
+
+export const CircularBarSpinner: React.FC<ICircularBarSpinner> = ({
+  height = "16px",
+  width = "16px",
+  className = "",
+}) => (
+  <div role="status">
+    <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" className={className}>
+      <g>
+        <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.14} />
+        <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.29} transform="rotate(30 12 12)" />
+        <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.43} transform="rotate(60 12 12)" />
+        <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.57} transform="rotate(90 12 12)" />
+        <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.71} transform="rotate(120 12 12)" />
+        <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.86} transform="rotate(150 12 12)" />
+        <rect width={2} height={5} x={11} y={1} fill="currentColor" transform="rotate(180 12 12)" />
+        <animateTransform
+          attributeName="transform"
+          calcMode="discrete"
+          dur="0.75s"
+          repeatCount="indefinite"
+          type="rotate"
+          values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12"
+        />
+      </g>
+    </svg>
+  </div>
+);

packages/ui/src/spinners/index.ts

@@ -1 +1,2 @@
 export * from "./circular-spinner";
+export * from "./circular-bar-spinner";

packages/ui/src/toast/index.tsx

@@ -0,0 +1,206 @@
+import * as React from "react";
+import { Toaster, toast } from "sonner";
+// icons
+import { AlertTriangle, CheckCircle2, X, XCircle } from "lucide-react";
+// spinner
+import { CircularBarSpinner } from "../spinners";
+// helper
+import { cn } from "../../helpers";
+
+export enum TOAST_TYPE {
+  SUCCESS = "success",
+  ERROR = "error",
+  INFO = "info",
+  WARNING = "warning",
+  LOADING = "loading",
+}
+
+type SetToastProps =
+  | {
+      type: TOAST_TYPE.LOADING;
+      title?: string;
+    }
+  | {
+      id?: string | number;
+      type: Exclude<TOAST_TYPE, TOAST_TYPE.LOADING>;
+      title: string;
+      message?: string;
+    };
+
+type PromiseToastCallback<ToastData> = (data: ToastData) => string;
+
+type PromiseToastData<ToastData> = {
+  title: string;
+  message?: PromiseToastCallback<ToastData>;
+};
+
+type PromiseToastOptions<ToastData> = {
+  loading?: string;
+  success: PromiseToastData<ToastData>;
+  error: PromiseToastData<ToastData>;
+};
+
+type ToastContentProps = {
+  toastId: string | number;
+  icon?: React.ReactNode;
+  textColorClassName: string;
+  backgroundColorClassName: string;
+  borderColorClassName: string;
+};
+
+type ToastProps = {
+  theme: "light" | "dark" | "system";
+};
+
+export const Toast = (props: ToastProps) => {
+  const { theme } = props;
+  return <Toaster visibleToasts={5} gap={20} theme={theme} />;
+};
+
+export const setToast = (props: SetToastProps) => {
+  const renderToastContent = ({
+    toastId,
+    icon,
+    textColorClassName,
+    backgroundColorClassName,
+    borderColorClassName,
+  }: ToastContentProps) =>
+    props.type === TOAST_TYPE.LOADING ? (
+      <div
+        onMouseDown={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+        }}
+        className={cn("w-[350px] h-[67.3px] rounded-lg border shadow-sm p-2", backgroundColorClassName, borderColorClassName)}
+      >
+        <div className="w-full h-full flex items-center justify-center px-4 py-2">
+          {icon && <div className="flex items-center justify-center">{icon}</div>}
+          <div className={cn("w-full flex items-center gap-0.5 pr-1", icon ? "pl-4" : "pl-1")}>
+            <div className={cn("grow text-sm font-semibold", textColorClassName)}>{props.title ?? "Loading..."}</div>
+            <div className="flex-shrink-0">
+              <X
+                className="text-toast-text-secondary hover:text-toast-text-tertiary cursor-pointer"
+                strokeWidth={1.5}
+                width={14}
+                height={14}
+                onClick={() => toast.dismiss(toastId)}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    ) : (
+      <div
+        onMouseDown={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+        }}
+        className={cn(
+          "relative flex flex-col w-[350px] rounded-lg border shadow-sm p-2",
+          backgroundColorClassName,
+          borderColorClassName
+        )}
+      >
+        <X
+          className="fixed top-2 right-2.5 text-toast-text-secondary hover:text-toast-text-tertiary cursor-pointer"
+          strokeWidth={1.5}
+          width={14}
+          height={14}
+          onClick={() => toast.dismiss(toastId)}
+        />
+        <div className="w-full flex items-center px-4 py-2">
+          {icon && <div className="flex items-center justify-center">{icon}</div>}
+          <div className={cn("flex flex-col gap-0.5 pr-1", icon ? "pl-6" : "pl-1")}>
+            <div className={cn("text-sm font-semibold", textColorClassName)}>{props.title}</div>
+            {props.message && <div className="text-toast-text-secondary text-xs font-medium">{props.message}</div>}
+          </div>
+        </div>
+      </div>
+    );
+
+  switch (props.type) {
+    case TOAST_TYPE.SUCCESS:
+      return toast.custom(
+        (toastId) =>
+          renderToastContent({
+            toastId,
+            icon: <CheckCircle2 width={28} height={28} strokeWidth={1.5} className="text-toast-text-success" />,
+            textColorClassName: "text-toast-text-success",
+            backgroundColorClassName: "bg-toast-background-success",
+            borderColorClassName: "border-toast-border-success",
+          }),
+        props.id ? { id: props.id } : {}
+      );
+    case TOAST_TYPE.ERROR:
+      return toast.custom(
+        (toastId) =>
+          renderToastContent({
+            toastId,
+            icon: <XCircle width={28} height={28} strokeWidth={1.5} className="text-toast-text-error" />,
+            textColorClassName: "text-toast-text-error",
+            backgroundColorClassName: "bg-toast-background-error",
+            borderColorClassName: "border-toast-border-error",
+          }),
+        props.id ? { id: props.id } : {}
+      );
+    case TOAST_TYPE.WARNING:
+      return toast.custom(
+        (toastId) =>
+          renderToastContent({
+            toastId,
+            icon: <AlertTriangle width={28} height={28} strokeWidth={1.5} className="text-toast-text-warning" />,
+            textColorClassName: "text-toast-text-warning",
+            backgroundColorClassName: "bg-toast-background-warning",
+            borderColorClassName: "border-toast-border-warning",
+          }),
+        props.id ? { id: props.id } : {}
+      );
+    case TOAST_TYPE.INFO:
+      return toast.custom(
+        (toastId) =>
+          renderToastContent({
+            toastId,
+            textColorClassName: "text-toast-text-info",
+            backgroundColorClassName: "bg-toast-background-info",
+            borderColorClassName: "border-toast-border-info",
+          }),
+        props.id ? { id: props.id } : {}
+      );
+
+    case TOAST_TYPE.LOADING:
+      return toast.custom((toastId) =>
+        renderToastContent({
+          toastId,
+          icon: <CircularBarSpinner className="text-toast-text-tertiary" />,
+          textColorClassName: "text-toast-text-loading",
+          backgroundColorClassName: "bg-toast-background-loading",
+          borderColorClassName: "border-toast-border-loading",
+        })
+      );
+  }
+};
+
+export const setPromiseToast = <ToastData,>(
+  promise: Promise<ToastData>,
+  options: PromiseToastOptions<ToastData>
+): void => {
+  const tId = setToast({ type: TOAST_TYPE.LOADING, title: options.loading });
+
+  promise
+    .then((data: ToastData) => {
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        id: tId,
+        title: options.success.title,
+        message: options.success.message?.(data),
+      });
+    })
+    .catch((data: ToastData) => {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        id: tId,
+        title: options.error.title,
+        message: options.error.message?.(data),
+      });
+    });
+};

web/components/account/deactivate-account-modal.tsx

@@ -7,9 +7,7 @@ import { mutate } from "swr";
 // hooks
 import { useUser } from "hooks/store";
 // ui
-import { Button } from "@plane/ui";
-// hooks
-import useToast from "hooks/use-toast";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 
 type Props = {
   isOpen: boolean;
@@ -26,7 +24,6 @@ export const DeactivateAccountModal: React.FC<Props> = (props) => {
 
   const router = useRouter();
 
-  const { setToastAlert } = useToast();
   const { setTheme } = useTheme();
 
   const handleClose = () => {
@@ -39,8 +36,8 @@ export const DeactivateAccountModal: React.FC<Props> = (props) => {
 
     await deactivateAccount()
       .then(() => {
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "Account deactivated successfully.",
         });
@@ -50,8 +47,8 @@ export const DeactivateAccountModal: React.FC<Props> = (props) => {
         handleClose();
       })
       .catch((err) =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: err?.error,
         })
@@ -90,7 +87,10 @@ export const DeactivateAccountModal: React.FC<Props> = (props) => {
                   <div className="">
                     <div className="flex items-start gap-x-4">
                       <div className="grid place-items-center rounded-full bg-red-500/20 p-2 sm:p-2 md:p-4 lg:p-4 mt-3 sm:mt-3 md:mt-0 lg:mt-0 ">
-                        <Trash2 className="h-4 w-4 sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6 text-red-600" aria-hidden="true" />
+                        <Trash2
+                          className="h-4 w-4 sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6 text-red-600"
+                          aria-hidden="true"
+                        />
                       </div>
                       <div>
                         <Dialog.Title as="h3" className="my-4 text-2xl font-medium leading-6 text-custom-text-100">

web/components/account/o-auth/o-auth-options.tsx

@@ -3,7 +3,8 @@ import { observer } from "mobx-react-lite";
 import { AuthService } from "services/auth.service";
 // hooks
 import { useApplication } from "hooks/store";
-import useToast from "hooks/use-toast";
+// ui
+import { TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { GitHubSignInButton, GoogleSignInButton } from "components/account";
 
@@ -17,8 +18,6 @@ const authService = new AuthService();
 
 export const OAuthOptions: React.FC<Props> = observer((props) => {
   const { handleSignInRedirection, type } = props;
-  // toast alert
-  const { setToastAlert } = useToast();
   // mobx store
   const {
     config: { envConfig },
@@ -39,9 +38,9 @@ export const OAuthOptions: React.FC<Props> = observer((props) => {
         if (response) handleSignInRedirection();
       } else throw Error("Cant find credentials");
     } catch (err: any) {
-      setToastAlert({
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error signing in!",
-        type: "error",
         message: err?.error || "Something went wrong. Please try again later or contact the support team.",
       });
     }
@@ -60,9 +59,9 @@ export const OAuthOptions: React.FC<Props> = observer((props) => {
         if (response) handleSignInRedirection();
       } else throw Error("Cant find credentials");
     } catch (err: any) {
-      setToastAlert({
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error signing in!",
-        type: "error",
         message: err?.error || "Something went wrong. Please try again later or contact the support team.",
       });
     }