Export ToastContainer and allow left alignment for toasts (#616)

* Export ToastContainer and allow left alignment for toasts

* Make align as optional for toast

* Fix incorrect toastProvider props in clickuiprovider

Author: vineethasok

src/components/ClickUIProvider/ClickUIProvider.tsx

@@ -2,16 +2,15 @@ import {
   Provider as TooltipProvider,
   TooltipProviderProps,
 } from "@radix-ui/react-tooltip";
-import { ToastProps } from "@radix-ui/react-toast";
-import { ToastProvider } from "@/components/Toast/Toast";
+import { ToastProvider, ToastProviderProps } from "@/components/Toast/Toast";
 import { ThemeName } from "@/theme";
 import { ThemeProvider } from "@/theme/theme";
 import { ReactNode } from "react";
 
 interface Props {
   config?: {
     tooltip?: Omit<TooltipProviderProps, "children">;
-    toast?: Omit<ToastProps, "children">;
+    toast?: Omit<ToastProviderProps, "children">;
   };
   theme: ThemeName;
   children: ReactNode;

src/components/Toast/Toast.tsx

@@ -179,11 +179,18 @@ const Toast = ({
   );
 };
 
-const Viewport = styled(RadixUIToast.Viewport)`
+const Viewport = styled(RadixUIToast.Viewport)<{ $align: "start" | "end" }>`
   --viewport-padding: 25px;
   position: fixed;
   bottom: 0;
-  right: 0;
+  ${({ $align }) => {
+    if ($align === "start") {
+      return "left: 0";
+    }
+    return `
+      right: 0;
+  `;
+  }};
   display: flex;
   flex-direction: column;
   padding: var(--viewport-padding);
@@ -196,7 +203,15 @@ const Viewport = styled(RadixUIToast.Viewport)`
   outline: none;
 `;
 
-export const ToastProvider = ({ children, ...props }: RadixUIToast.ToastProps) => {
+export interface ToastProviderProps extends RadixUIToast.ToastProps {
+  align?: "start" | "end";
+}
+
+export const ToastProvider = ({
+  children,
+  align = "end",
+  ...props
+}: ToastProviderProps) => {
   const [toasts, setToasts] = useState<Map<string, ToastProps>>(new Map());
 
   useEffect(() => {
@@ -234,7 +249,7 @@ export const ToastProvider = ({ children, ...props }: RadixUIToast.ToastProps) =
 
   return (
     <RadixUIToast.Provider
-      swipeDirection="right"
+      swipeDirection={align === "start" ? "left" : "right"}
       {...props}
     >
       <ToastContext.Provider value={value}>
@@ -247,7 +262,7 @@ export const ToastProvider = ({ children, ...props }: RadixUIToast.ToastProps) =
           />
         ))}
       </ToastContext.Provider>
-      <Viewport />
+      <Viewport $align={align} />
     </RadixUIToast.Provider>
   );
 };

src/components/index.ts

@@ -71,3 +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";