chore: updated story to cover all caases

packages/propel/src/toast/index.stories.tsx

@@ -1,8 +1,26 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
-import { TOAST_TYPE, Toast, setToast, ToastProps } from "./index";
+import { TOAST_TYPE, Toast, setPromiseToast, setToast, ToastProps } from "./index";
 import React from "react";
 
+const Button = ({ children, onClick }: { children: React.ReactNode; onClick: () => void }) => (
+  <button
+    onClick={onClick}
+    className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium 
+    bg-white
+     text-custom-text-200 
+    rounded-[30px] 
+    shadow-[-20px_-20px_60px_#ffffff]
+    hover:text-custom-text-100
+    active:shadow-[inset_20px_20px_60px_#bebebe,inset_-20px_-20px_60px_#ffffff]
+    transition-all duration-300 focus:outline-none
+    border
+    "
+  >
+    {children}
+  </button>
+);
+
 const meta = {
   title: "Components/Toast",
   component: Toast,
@@ -36,74 +54,116 @@ export const Default: Story = {
     const activeTheme = theme as ToastProps["theme"];
     return (
       <GlobalToast theme={activeTheme}>
-        <div className="flex gap-2">
+        <div className="flex flex-wrap gap-5">
           {/* Success Toast */}
-          <button
+          <Button
             onClick={() => {
               setToast({
                 type: TOAST_TYPE.SUCCESS,
-                title: "Success",
+                title: "Saved",
-                message: "This is a success message",
+                message: "Your changes were saved successfully.",
               });
             }}
-            className="bg-custom-background-100 border border-custom-border-200 rounded-md px-4 py-2"
           >
-            Success
+            ✅ Success
-          </button>
+          </Button>
           {/* Error Toast */}
-          <button
+          <Button
             onClick={() => {
               setToast({
                 type: TOAST_TYPE.ERROR,
-                title: "Error",
+                title: "Action failed",
-                message: "This is an error message",
+                message: "We couldn't complete that action. Please try again.",
               });
             }}
-            className="bg-custom-background-100 border border-custom-border-200 rounded-md px-4 py-2"
           >
-            Error
+            ❌ Error
-          </button>
+          </Button>
           {/* Toast with action items */}
-          <button
+          <Button
             onClick={() => {
               setToast({
                 type: TOAST_TYPE.SUCCESS,
-                title: "Action Items",
+                title: "Next steps",
-                message: "This is an action items message",
+                message: "Pick an option to continue.",
                 actionItems: (
                   <div className="flex items-center gap-1 text-xs text-custom-text-200">
                     <a
-                      href="https://www.google.com"
+                      href="https://plane.so"
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="text-custom-primary px-2 py-1 hover:bg-custom-background-90 font-bold rounded"
+                      className="text-custom-primary px-2 py-1 hover:bg-custom-background-90 font-semibold rounded"
                     >
-                      Action 1
+                      View docs
                     </a>
 
-                    <button className="cursor-pointer group-hover:flex px-2 py-1 text-custom-text-300 hover:text-custom-text-200 hover:bg-custom-background-90 rounded">
+                    <button
-                      Action 2
+                      className="cursor-pointer px-2 py-1 text-custom-text-300 hover:text-custom-text-100 hover:bg-custom-background-90 rounded"
+                      onClick={() =>
+                        setToast({
+                          type: TOAST_TYPE.SUCCESS,
+                          title: "Retried",
+                          message: "We ran that action again.",
+                        })
+                      }
+                    >
+                      Retry
                     </button>
                   </div>
                 ),
               });
             }}
-            className="bg-custom-background-100 border border-custom-border-200 rounded-md px-4 py-2"
           >
-            Action Items
+            🧭 Action items
-          </button>
+          </Button>
+          {/* Promise Toast */}
+          <Button
+            onClick={() => {
+              const promise = new Promise((resolve, reject) => {
+                setTimeout(() => {
+                  resolve("Success");
+                }, 1000);
+              });
+              setPromiseToast(promise, {
+                loading: "Working on it...",
+                success: {
+                  title: "All set",
+                  message: () => "Operation completed successfully.",
+                },
+                error: {
+                  title: "Request failed",
+                  message: () => "Something went wrong. Please try again.",
+                },
+              });
+            }}
+          >
+            ⏳→✅ Promise success
+          </Button>
+          {/* Promise Error Toast */}
+          <Button
+            onClick={() => {
+              const promise = new Promise((resolve, reject) => {
+                setTimeout(() => {
+                  reject("Error");
+                }, 1000);
+              });
+              setPromiseToast(promise, {
+                loading: "Working on it...",
+                success: {
+                  title: "All set",
+                  message: () => "Operation completed successfully.",
+                },
+                error: {
+                  title: "Request failed",
+                  message: () => "Something went wrong. Please try again.",
+                },
+              });
+            }}
+          >
+            ⏳→❌ Promise error
+          </Button>
         </div>
       </GlobalToast>
     );
   },
 };
-
-export const PromiseToast: Story = {
-  args: {
-    theme: "light",
-  },
-  render: ({ theme }) => {
-    const activeTheme = theme as ToastProps["theme"];
-    return <></>;
-  },
-};

packages/propel/src/toast/index.tsx

@@ -113,7 +113,7 @@ const ToastRender = ({ id, toast }: { id: string; toast: BaseToast.Root.ToastObj
       toast={toast}
       key={id}
       className={cn(
-        "flex items-center rounded-lg border shadow-sm p-2 w-[350px] absolute right-3 bottom-3 z-[calc(1000-var(--toast-index))] mr-0 [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+calc(min(var(--toast-index),10)*-10px)))_scale(calc(max(0,1-(var(--toast-index)*0.1))))] transition-all [transition-property:opacity,transform] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] select-none after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[ending-style]:[&:not([data-limited])]:[transform:translateY(150%)]",
+        "flex items-center rounded-lg border shadow-sm p-2 w-[350px] absolute right-3 bottom-3 z-[calc(1000-var(--toast-index))] [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+calc(min(var(--toast-index),10)*-10px)))_scale(calc(max(0,1-(var(--toast-index)*0.1))))] transition-[opacity,transform] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] select-none after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[ending-style]:[&:not([data-limited])]:[transform:translateY(150%)]",
         data.backgroundColorClassName,
         data.borderColorClassName
       )}
@@ -189,24 +189,30 @@ export const setPromiseToast = <ToastData,>(
   toastManager.promise(promise, {
     loading: {
       data: {
-        title: options.loading,
+        title: options.loading ?? "Loading...",
         type: TOAST_TYPE.LOADING,
+        message: undefined,
+        actionItems: undefined,
       },
     },
     success: (data) => {
       return {
-        type: TOAST_TYPE.SUCCESS,
+        data: {
-        title: options.success.title,
+          type: TOAST_TYPE.SUCCESS,
-        message: options.success.message?.(data),
+          title: options.success.title,
-        actionItems: options.success.actionItems?.(data),
+          message: options.success.message?.(data),
+          actionItems: options.success.actionItems?.(data),
+        },
       };
     },
     error: (data) => {
       return {
-        type: TOAST_TYPE.ERROR,
+        data: {
-        title: options.error.title,
+          type: TOAST_TYPE.ERROR,
-        message: options.error.message?.(data),
+          title: options.error.title,
-        actionItems: options.error.actionItems?.(data),
+          message: options.error.message?.(data),
+          actionItems: options.error.actionItems?.(data),
+        },
       };
     },
   });