[WEB-5119] chore: remove any deprecated toast instances from the plane/ui page (#7943)

* [WEB-5119] chore: remove deprecated toast implementation from @plane/ui

* fix: build

---------

Co-authored-by: sriramveeraghanta <veeraghanta.sriram@gmail.com>

apps/web/core/components/core/description-versions/modal.tsx

@@ -5,9 +5,10 @@ import { ChevronLeft, ChevronRight, Copy } from "lucide-react";
 import type { EditorRefApi } from "@plane/editor";
 import { useTranslation } from "@plane/i18n";
 import { Button, getButtonStyling } from "@plane/propel/button";
+import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import { TDescriptionVersion } from "@plane/types";
-import { Avatar, EModalPosition, EModalWidth, Loader, ModalCore, setToast, TOAST_TYPE } from "@plane/ui";
+import { Avatar, EModalPosition, EModalWidth, Loader, ModalCore } from "@plane/ui";
 import { calculateTimeAgo, cn, copyTextToClipboard, getFileURL } from "@plane/utils";
 // components
 import { RichTextEditor } from "@/components/editor/rich-text";

apps/web/core/components/project/card.tsx

@@ -9,18 +9,10 @@ import { ArchiveRestoreIcon, Check, ExternalLink, LinkIcon, Lock, Settings, Tras
 import { EUserPermissions, EUserPermissionsLevel, IS_FAVORITE_MENU_OPEN } from "@plane/constants";
 import { useLocalStorage } from "@plane/hooks";
 import { Button } from "@plane/propel/button";
+import { setPromiseToast, setToast, TOAST_TYPE } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { IProject } from "@plane/types";
-import {
-  Avatar,
-  AvatarGroup,
-  TOAST_TYPE,
-  setToast,
-  setPromiseToast,
-  ContextMenu,
-  TContextMenuItem,
-  FavoriteStar,
-} from "@plane/ui";
+import { Avatar, AvatarGroup, ContextMenu, TContextMenuItem, FavoriteStar } from "@plane/ui";
 import { copyUrlToClipboard, cn, getFileURL, renderFormattedDate } from "@plane/utils";
 // components
 import { Logo } from "@/components/common/logo";

apps/web/core/components/rich-filters/add-filters-button.tsx

@@ -3,9 +3,10 @@ import { observer } from "mobx-react";
 import { ListFilter } from "lucide-react";
 // plane imports
 import { getButtonStyling } from "@plane/propel/button";
+import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import { IFilterInstance } from "@plane/shared-state";
 import { LOGICAL_OPERATOR, TExternalFilter, TFilterProperty } from "@plane/types";
-import { CustomSearchSelect, setToast, TButtonVariant, TOAST_TYPE } from "@plane/ui";
+import { CustomSearchSelect, TButtonVariant } from "@plane/ui";
 import { cn, getOperatorForPayload } from "@plane/utils";
 
 export type TAddFilterButtonProps<P extends TFilterProperty, E extends TExternalFilter> = {

apps/web/core/components/work-item-filters/filters-hoc/project-level.tsx

@@ -3,9 +3,9 @@ import { isEqual, cloneDeep } from "lodash-es";
 import { observer } from "mobx-react";
 // plane imports
 import { EUserPermissionsLevel, PROJECT_VIEW_TRACKER_EVENTS } from "@plane/constants";
+import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import { EUserProjectRoles, EViewAccess, IProjectView, TWorkItemFilterExpression } from "@plane/types";
 // components
-import { setToast, TOAST_TYPE } from "@plane/ui";
 import { removeNillKeys } from "@/components/issues/issue-layouts/utils";
 import { CreateUpdateProjectViewModal } from "@/components/views/modal";
 // hooks

apps/web/core/components/work-item-filters/filters-hoc/workspace-level.tsx

@@ -3,9 +3,9 @@ import { isEqual, cloneDeep } from "lodash-es";
 import { observer } from "mobx-react";
 // plane imports
 import { DEFAULT_GLOBAL_VIEWS_LIST, EUserPermissionsLevel, GLOBAL_VIEW_TRACKER_EVENTS } from "@plane/constants";
+import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import { EUserProjectRoles, EViewAccess, IWorkspaceView, TWorkItemFilterExpression } from "@plane/types";
 // components
-import { setToast, TOAST_TYPE } from "@plane/ui";
 import { removeNillKeys } from "@/components/issues/issue-layouts/utils";
 import { CreateUpdateWorkspaceViewModal } from "@/components/workspace/views/modal";
 // hooks

packages/ui/package.json

@@ -53,7 +53,6 @@
     "react-color": "^2.19.3",
     "react-day-picker": "9.5.0",
     "react-popper": "^2.3.0",
-    "sonner": "^1.4.41",
     "tailwind-merge": "^2.0.0",
     "use-font-face-observer": "^1.2.2"
   },

packages/ui/src/index.ts

@@ -28,7 +28,6 @@ export * from "./spinners";
 export * from "./tables";
 export * from "./tabs";
 export * from "./tag";
-export * from "./toast";
 export * from "./tooltip";
 export * from "./typography";
 export * from "./utils";

packages/ui/src/toast/index.tsx

@@ -1,217 +0,0 @@
-import { AlertTriangle, CheckCircle2, X, XCircle } from "lucide-react";
-import * as React from "react";
-import { Toaster, toast } from "sonner";
-// icons
-// spinner
-import { CircularBarSpinner } from "../spinners";
-// helper
-import { cn } from "../utils";
-
-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;
-      actionItems?: React.ReactNode;
-    };
-
-type PromiseToastCallback<ToastData> = (data: ToastData) => string;
-type ActionItemsPromiseToastCallback<ToastData> = (data: ToastData) => React.ReactNode;
-
-type PromiseToastData<ToastData> = {
-  title: string;
-  message?: PromiseToastCallback<ToastData>;
-  actionItems?: ActionItemsPromiseToastCallback<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={16} theme={theme} />;
-};
-
-export const setToast = (props: SetToastProps) => {
-  const renderToastContent = ({
-    toastId,
-    icon,
-    textColorClassName,
-    backgroundColorClassName,
-    borderColorClassName,
-  }: ToastContentProps) =>
-    props.type === TOAST_TYPE.LOADING ? (
-      <div className="flex items-center h-[98px] w-[350px]" data-prevent-outside-click>
-        <div
-          onMouseDown={(e) => {
-            e.stopPropagation();
-            e.preventDefault();
-          }}
-          className={cn("w-full 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>
-    ) : (
-      <div
-        data-prevent-outside-click
-        onMouseDown={(e) => {
-          e.stopPropagation();
-          e.preventDefault();
-        }}
-        className={cn(
-          "relative group flex flex-col w-[350px] rounded-lg border shadow-sm p-2",
-          backgroundColorClassName,
-          borderColorClassName
-        )}
-      >
-        <X
-          className="absolute 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 flex-col gap-2 p-2">
-          <div className="flex items-center w-full">
-            {icon && <div className="flex items-center justify-center">{icon}</div>}
-            <div className={cn("flex flex-col gap-0.5 pr-1", icon ? "pl-4" : "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>
-          {props.actionItems && <div className="flex items-center pl-[32px]">{props.actionItems}</div>}
-        </div>
-      </div>
-    );
-
-  switch (props.type) {
-    case TOAST_TYPE.SUCCESS:
-      return toast.custom(
-        (toastId) =>
-          renderToastContent({
-            toastId,
-            icon: <CheckCircle2 width={24} height={24} 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={24} height={24} 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={24} height={24} 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),
-        actionItems: options.success.actionItems?.(data),
-      });
-    })
-    .catch((data: ToastData) => {
-      setToast({
-        type: TOAST_TYPE.ERROR,
-        id: tId,
-        title: options.error.title,
-        message: options.error.message?.(data),
-        actionItems: options.error.actionItems?.(data),
-      });
-    });
-};