✨(toast) add new Toast component

package.json

@@ -61,6 +61,7 @@
     "react-aria-components": "1.16.0",
     "react-resizable-panels": "2.1.7",
     "react-stately": "3.37.0",
+    "react-toastify": "^11.1.0",
     "react-virtualized": "9.22.6",
     "react-pdf": "10.1.0"
   },

src/components/toast/ToastContent.tsx

@@ -0,0 +1,49 @@
+import { ReactNode } from "react";
+import clsx from "clsx";
+import { ToastAction, ToastType } from "./types";
+
+type ToastContentProps = {
+  message: ReactNode;
+  icon?: ReactNode;
+  type?: ToastType;
+  actions?: ToastAction[];
+  progress?: number;
+};
+
+export const ToastContent = ({
+  message,
+  icon,
+  actions,
+  progress,
+}: ToastContentProps) => {
+  const hasActions = actions && actions.length > 0;
+
+  return (
+    <div className="c__toast-content">
+      {icon && <span className="c__toast-content__icon">{icon}</span>}
+      <span className="c__toast-content__message">
+        <span className="c__toast-content__text">{message}</span>
+        {progress !== undefined && (
+          <span className="c__toast-content__progress">{progress}%</span>
+        )}
+      </span>
+      {hasActions && (
+        <div className="c__toast-content__actions">
+          {actions.map((action) => (
+            <button
+              key={action.label}
+              className={clsx("c__toast-content__action")}
+              onClick={(e) => {
+                e.stopPropagation();
+                action.onClick();
+              }}
+              type="button"
+            >
+              {action.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

src/components/toast/ToastExtendedContent.tsx

@@ -0,0 +1,123 @@
+import { useState } from "react";
+import clsx from "clsx";
+import { FileIcon } from ":/components/preview/icons/FileIcon";
+import { CircleCheckFilled } from "../icon/icons/CircleCheckFilled";
+import { Loader } from "../icon/icons/Loader";
+import { Info } from "../icon/icons/Info";
+import { ChevronDown } from "../icon/icons/ChevronDown";
+import { XMark } from "../icon/icons/XMark";
+import { ToastExtendedItem, ToastExtendedOptions } from "./types";
+
+type ToastExtendedContentProps = Omit<
+  ToastExtendedOptions,
+  "autoClose" | "containerId"
+>;
+
+const ToastExtendedItemRow = ({ item }: { item: ToastExtendedItem }) => {
+  return (
+    <li className="c__toast-extended__item">
+      <span className="c__toast-extended__item-icon">
+        {item.icon ?? (
+          <FileIcon
+            file={{ title: item.title, mimetype: item.mimetype ?? "" }}
+            type="mini"
+            size={24}
+          />
+        )}
+      </span>
+      <span className="c__toast-extended__item-content">
+        <span className="c__toast-extended__item-title">{item.title}</span>
+        {item.size && (
+          <span className="c__toast-extended__item-size">{item.size}</span>
+        )}
+      </span>
+      <span className="c__toast-extended__item-status">
+        {item.status === "completed" ? (
+          <CircleCheckFilled size={16} />
+        ) : (
+          <Loader size={16} className="c__toast-extended__item-loader" />
+        )}
+      </span>
+    </li>
+  );
+};
+
+export const ToastExtendedContent = ({
+  items,
+  summary,
+  progress,
+  onClose,
+  onInfoClick,
+}: ToastExtendedContentProps) => {
+  const [expanded, setExpanded] = useState(true);
+
+  return (
+    <div
+      className={clsx(
+        "c__toast-extended",
+        expanded && "c__toast-extended--expanded",
+      )}
+    >
+      <div
+        className={clsx(
+          "c__toast-extended__list-wrapper",
+          expanded && "c__toast-extended__list-wrapper--expanded",
+        )}
+      >
+        <div className="c__toast-extended__list-inner">
+          <ul className="c__toast-extended__list" aria-hidden={!expanded}>
+            {items.map((item) => (
+              <ToastExtendedItemRow key={item.id ?? item.title} item={item} />
+            ))}
+          </ul>
+        </div>
+      </div>
+      <div className="c__toast-extended__footer">
+        <div className="c__toast-extended__summary">
+          <span className="c__toast-extended__summary-text">{summary}</span>
+          {progress !== undefined && (
+            <span className="c__toast-extended__summary-progress">
+              {progress}%
+            </span>
+          )}
+          <button
+            type="button"
+            className="c__toast-extended__summary-info"
+            onClick={(e) => {
+              e.stopPropagation();
+              onInfoClick?.();
+            }}
+            aria-label="More information"
+          >
+            <Info size={16} />
+          </button>
+        </div>
+        <div className="c__toast-extended__footer-actions">
+          <button
+            type="button"
+            className="c__toast-extended__footer-action c__toast-extended__footer-action--toggle"
+            onClick={(e) => {
+              e.stopPropagation();
+              setExpanded((prev) => !prev);
+            }}
+            aria-label={expanded ? "Collapse" : "Expand"}
+            aria-expanded={expanded}
+          >
+            <ChevronDown size={24} />
+          </button>
+          <button
+            type="button"
+            className="c__toast-extended__footer-action c__toast-extended__footer-action--close"
+            onClick={(e) => {
+              e.stopPropagation();
+              onClose?.();
+            }}
+            aria-label="Close"
+          >
+            <XMark size={24} />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/toast/ToastProvider.tsx

@@ -0,0 +1,36 @@
+import { ToastContainer, Slide } from "react-toastify";
+
+export type ToastProviderProps = {
+  position?:
+    | "top-right"
+    | "top-center"
+    | "top-left"
+    | "bottom-right"
+    | "bottom-center"
+    | "bottom-left";
+  stacked?: boolean;
+  containerId?: string;
+};
+
+export const ToastProvider = ({
+  position = "bottom-left",
+  stacked = true,
+  containerId,
+}: ToastProviderProps) => {
+  return (
+    <ToastContainer
+      className="c__toast-container"
+      toastClassName="c__toast"
+      position={position}
+      autoClose={5000}
+      hideProgressBar
+      newestOnTop
+      closeOnClick={false}
+      closeButton={false}
+      draggable={false}
+      transition={Slide}
+      stacked={stacked}
+      containerId={containerId}
+    />
+  );
+};