Export toast and make toast content vertical aligned (#617)

* Export toast and make toast content vertical aligned

* Fix incorrect props for toast provider

* Add toast container changes

* Remove unwanted debug code

Author: vineethasok

src/App.tsx

@@ -43,6 +43,9 @@ import {
   GridContainer,
   TextField,
   Label,
+  createToast,
+  ToastProvider,
+  Toast,
 } from "@/components";
 import { Dialog } from "@/components/Dialog/Dialog";
 import { ConfirmationDialog } from "@/components/ConfirmationDialog/ConfirmationDialog";
@@ -108,6 +111,78 @@ const App = () => {
       theme={currentTheme}
       config={{ tooltip: { delayDuration: 0 } }}
     >
+      <Button
+        onClick={() => {
+          createToast({
+            title: "Toast Title",
+            description: "This is a toast description",
+            type: "success",
+            actions: [
+              {
+                label: "Action 1",
+                altText: "Action 1 Alt Text",
+                onClick: () => console.log("Action 1 clicked"),
+                type: "secondary",
+              },
+              {
+                label: "Action 2",
+                altText: "Action 2 Alt Text",
+                onClick: () => console.log("Action 2 clicked"),
+                type: "secondary",
+              },
+            ],
+          });
+        }}
+      >
+        Show Normal Toast
+      </Button>
+      <ToastProvider align="start">
+        <Button
+          onClick={() => {
+            createToast({
+              title: "Toast Title with Align Start",
+              description: "This is a toast description   with align start",
+              type: "success",
+              actions: [
+                {
+                  label: "Action 1",
+                  altText: "Action 1 Alt Text",
+                  onClick: () => console.log("Action 1 clicked"),
+                },
+                {
+                  label: "Action 2",
+                  altText: "Action 2 Alt Text",
+                  onClick: () => console.log("Action 2 clicked"),
+                },
+              ],
+              align: "start",
+            });
+          }}
+        >
+          Show Toast with Align Start
+        </Button>
+        <Toast
+          onClose={() => console.log("Toast closed")}
+          title="Toast Title with Align Start without Button"
+          duration={5000}
+          description="This is a toast description   with align start"
+          type="success"
+          actions={[
+            {
+              label: "Action 1",
+              altText: "Action 1 Alt Text",
+              onClick: () => console.log("Action 1 clicked"),
+              type: "primary",
+            },
+            {
+              label: "Action 2",
+              altText: "Action 2 Alt Text",
+              onClick: () => console.log("Action 2 clicked"),
+              type: "secondary",
+            },
+          ]}
+        />
+      </ToastProvider>
       <BackgroundWrapper>
         <ProgressBar
           progress={100}

src/components/Toast/Toast.tsx

@@ -5,12 +5,13 @@ import { keyframes, styled } from "styled-components";
 import { toastsEventEmitter } from "./toastEmitter";
 
 export interface ToastContextProps {
-  createToast: (toast: ToastProps) => void;
+  createToast: (toast: ToastProps, align?: ToastAlignment) => void;
 }
 export const ToastContext = createContext<ToastContextProps>({
   createToast: () => null,
 });
 
+export type ToastAlignment = "start" | "end";
 export type ToastType = "danger" | "warning" | "default" | "success";
 export interface ToastProps {
   id?: string;
@@ -20,6 +21,7 @@ export interface ToastProps {
   /** Time in milliseconds the toast will be visible */
   duration?: number;
   actions?: Array<ButtonProps & { altText: string }>;
+  align?: ToastAlignment;
 }
 
 const ToastIcon = styled(Icon)<{ $type?: ToastType }>`
@@ -99,6 +101,7 @@ const ToastHeader = styled(RadixUIToast.Title)`
 
 const ToastDescriptionContainer = styled.div`
   display: flex;
+  flex-direction: column;
   justify-content: space-between;
   width: 100%;
   align-items: flex-end;
@@ -123,7 +126,7 @@ const Title = styled.div`
   flex: 1;
 `;
 
-const Toast = ({
+export const Toast = ({
   type,
   title,
   description,
@@ -167,8 +170,14 @@ const Toast = ({
           {actions.length > 0 && (
             <ToastDescriptionContent>
               {actions.map(({ altText, ...btnProps }) => (
-                <RadixUIToast.Action altText={altText}>
-                  <Button {...btnProps} />
+                <RadixUIToast.Action
+                  altText={altText}
+                  asChild
+                  key={altText}
+                >
+                  <div>
+                    <Button {...btnProps} />
+                  </div>
                 </RadixUIToast.Action>
               ))}
             </ToastDescriptionContent>
@@ -179,7 +188,7 @@ const Toast = ({
   );
 };
 
-const Viewport = styled(RadixUIToast.Viewport)<{ $align: "start" | "end" }>`
+const Viewport = styled(RadixUIToast.Viewport)<{ $align: ToastAlignment }>`
   --viewport-padding: 25px;
   position: fixed;
   bottom: 0;
@@ -203,23 +212,29 @@ const Viewport = styled(RadixUIToast.Viewport)<{ $align: "start" | "end" }>`
   outline: none;
 `;
 
-export interface ToastProviderProps extends RadixUIToast.ToastProps {
-  align?: "start" | "end";
+export interface ToastProviderProps extends RadixUIToast.ToastProviderProps {
+  align?: ToastAlignment;
 }
 
 export const ToastProvider = ({
   children,
   align = "end",
   ...props
 }: ToastProviderProps) => {
-  const [toasts, setToasts] = useState<Map<string, ToastProps>>(new Map());
+  const [toasts, setToasts] = useState<Record<ToastAlignment, Map<string, ToastProps>>>({
+    start: new Map(),
+    end: new Map(),
+  });
 
   useEffect(() => {
     const listener = (toast: ToastProps) => {
       setToasts(currentToasts => {
-        const newMap = new Map(currentToasts);
-        newMap.set(toast?.id ?? String(Date.now()), toast);
-        return newMap;
+        const alignment = toast.align ?? "end";
+        const newToasts = { ...currentToasts };
+        const map = new Map(newToasts[alignment]);
+        map.set(toast?.id ?? String(Date.now()), toast);
+        newToasts[alignment] = map;
+        return newToasts;
       });
     };
 
@@ -231,30 +246,36 @@ export const ToastProvider = ({
   const onClose = (id: string) => (open: boolean) => {
     if (!open) {
       setToasts(currentToasts => {
-        const newMap = new Map(currentToasts);
-        newMap.delete(id);
-        return newMap;
+        const newToasts = { ...currentToasts };
+        const map = new Map(newToasts[align]);
+        map.delete(id);
+        newToasts[align] = map;
+        return newToasts;
       });
     }
   };
+
   const value = {
-    createToast: (toast: ToastProps) => {
+    createToast: (toast: ToastProps, toastAlign: ToastAlignment = align) => {
       setToasts(currentToasts => {
-        const newMap = new Map(currentToasts);
-        newMap.set(toast?.id ?? String(Date.now()), toast);
-        return newMap;
+        const newToasts = { ...currentToasts };
+        const map = new Map(newToasts[toastAlign]);
+        map.set(toast?.id ?? String(Date.now()), toast);
+        newToasts[toastAlign] = map;
+        return newToasts;
       });
     },
   };
 
   return (
     <RadixUIToast.Provider
       swipeDirection={align === "start" ? "left" : "right"}
+      key={`toast-provider-${align}`}
       {...props}
     >
       <ToastContext.Provider value={value}>
         {children}
-        {Array.from(toasts).map(([id, toast]) => (
+        {Array.from(toasts[align]).map(([id, toast]) => (
           <Toast
             key={id}
             {...toast}

src/components/index.ts

@@ -71,4 +71,4 @@ export { createToast } from "./Toast/toastEmitter";
 export { UserIcon as ProfileIcon } from "./icons/UserIcon";
 export { default as VerticalStepper } from "./VerticalStepper/VerticalStepper";
 export { MultiAccordion } from "./MultiAccordion/MultiAccordion";
-export { ToastProvider } from "./Toast/Toast";
+export { ToastProvider, Toast } from "./Toast/Toast";