feat(toast): introduce Toast component

.changeset/shaggy-beers-breathe.md

@@ -0,0 +1,7 @@
+---
+"@nextui-org/shared-icons": patch
+"@nextui-org/toast": patch
+"@nextui-org/theme": patch
+---
+
+Introducing the toast component(#2560)

apps/docs/config/routes.json

@@ -436,7 +436,7 @@
           "title": "Toast",
           "keywords": "toast, notification, message",
           "path": "/docs/components/toast.mdx",
-          "comingSoon": true
+          "newPost": true
         },
         {
           "key": "textarea",

apps/docs/content/components/toast/color.raw.jsx

@@ -0,0 +1,28 @@
+import {addToast, Button} from "@heroui/react";
+
+export default function App() {
+  return (
+    <>
+      <div className="flex flex-wrap gap-x-2">
+        {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
+          <Button
+            key={color}
+            // @ts-ignore
+            color={color}
+            variant={"solid"}
+            onPress={() =>
+              addToast({
+                title: "Toast title",
+                description: "Toast displayed successfully",
+                // @ts-ignore
+                color: color,
+              })
+            }
+          >
+            {color}
+          </Button>
+        ))}
+      </div>
+    </>
+  );
+}

apps/docs/content/components/toast/color.ts

@@ -0,0 +1,9 @@
+import Color from "./color.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": Color,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/toast/custom-styles.raw.jsx

@@ -0,0 +1,54 @@
+import {addToast, Button, cn} from "@heroui/react";
+
+const CustomToastComponent = () => {
+  return (
+    <>
+      <Button
+        variant="solid"
+        onPress={() => {
+          addToast({
+            title: "Sucessful!",
+            description: "Document uploaded to cloud successful.",
+            classNames: {
+              base: cn([
+                "bg-default-50 dark:bg-background shadow-sm",
+                "border-1",
+                "relative before:content-[''] before:absolute before:z-10",
+                "before:left-0 before:top-[-1px] before:bottom-[-1px] before:w-1",
+                "rounded-l-none border-l-0",
+                "min-w-[350px]",
+                "rounded-md",
+                "flex flex-col items-start",
+                "before:bg-primary border-primary-200 dark:border-primary-100",
+                ,
+              ]),
+              icon: "w-6 h-6 fill-current",
+            },
+            endContent: (
+              <div className="ms-11 my-2 flex gap-x-2">
+                <Button color={"primary"} size="sm" variant="bordered">
+                  View Document
+                </Button>
+                <Button className="underline-offset-2" color={"primary"} size="sm" variant="light">
+                  Maybe Later
+                </Button>
+              </div>
+            ),
+          });
+        }}
+      >
+        Show Toast
+      </Button>
+    </>
+  );
+};
+
+export default function App() {
+  return (
+    <>
+      <div className="flex gap-2">
+        <CustomToastComponent />
+      </div>
+    </>
+  );
+}

apps/docs/content/components/toast/custom-styles.ts

@@ -0,0 +1,9 @@
+import CustomStyles from "./custom-styles.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": CustomStyles,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/toast/index.ts

@@ -0,0 +1,17 @@
+import color from "./color";
+import variants from "./variants";
+import customStyles from "./custom-styles";
+import radius from "./radius";
+import placement from "./placement";
+import provider from "./provider";
+import types from "./types";
+
+export const toastContent = {
+  color,
+  variants,
+  customStyles,
+  radius,
+  placement,
+  provider,
+  types,
+};

apps/docs/content/components/toast/placement.raw.jsx

@@ -0,0 +1,36 @@
+import {addToast, Button, ToastProvider} from "@heroui/react";
+import React from "react";
+
+export default function App() {
+  const [placement, setPlacement] = React.useState("right-bottom");
+
+  return (
+    <>
+      <ToastProvider placement={placement} toastOffset={placement.includes("top") ? 60 : 0} />
+      <div className="flex flex-wrap gap-x-2">
+        {[
+          "left-top",
+          "right-top",
+          "center-top",
+          "left-bottom",
+          "right-bottom",
+          "center-bottom",
+        ].map((position) => (
+          <Button
+            key={position}
+            variant={"solid"}
+            onPress={() => {
+              setPlacement(position);
+              addToast({
+                title: "Toast title",
+                description: "Toast displayed successfully",
+              });
+            }}
+          >
+            {position}
+          </Button>
+        ))}
+      </div>
+    </>
+  );
+}

apps/docs/content/components/toast/placement.ts

@@ -0,0 +1,9 @@
+import Position from "./placement.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": Position,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/toast/provider.raw.jsx

@@ -0,0 +1,5 @@
+import {ToastProvider} from "@heroui/toast";
+
+export default function App({children}) {
+  return <ToastProvider>{children}</ToastProvider>;
+}

apps/docs/content/components/toast/provider.ts

@@ -0,0 +1,9 @@
+import Provider from "./provider.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": Provider,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/toast/radius.raw.jsx

@@ -0,0 +1,27 @@
+import {addToast, Button} from "@heroui/react";
+
+export default function App() {
+  return (
+    <>
+      <div className="flex flex-wrap gap-x-2">
+        {["none", "sm", "md", "lg", "full"].map((radius) => (
+          <Button
+            key={radius}
+            radius={radius}
+            variant={"solid"}
+            onPress={() =>
+              addToast({
+                title: "Toast title",
+                description: "Toast displayed successfully",
+                // @ts-ignore
+                radius: radius,
+              })
+            }
+          >
+            {radius}
+          </Button>
+        ))}
+      </div>
+    </>
+  );
+}

apps/docs/content/components/toast/radius.ts

@@ -0,0 +1,9 @@
+import Radius from "./radius.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": Radius,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/toast/types.raw.jsx

@@ -0,0 +1,114 @@
+import {addToast, Button} from "@heroui/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Button
+        variant="solid"
+        onPress={() => {
+          addToast({
+            title: "Toast Title",
+          });
+        }}
+      >
+        Default
+      </Button>
+
+      <Button
+        variant="solid"
+        onPress={() => {
+          addToast({
+            title: "Toast Title",
+            description: "Toast Description",
+          });
+        }}
+      >
+        With Description
+      </Button>
+
+      <Button
+        variant="solid"
+        onPress={() => {
+          addToast({
+            title: "Toast Title",
+            description: "Toast Description",
+            hideIcon: true,
+          });
+        }}
+      >
+        Hidden Icon
+      </Button>
+
+      <Button
+        variant="solid"
+        onPress={() => {
+          addToast({
+            title: "Toast Title",
+            description: "Toast Description",
+            promise: new Promise((resolve) => setTimeout(resolve, 4000)),
+          });
+        }}
+      >
+        Promise
+      </Button>
+
+      <Button
+        onPress={() => {
+          addToast({
+            title: "Toast Title",
+            description: "Toast Description",
+            endContent: (
+              <Button size="sm" variant="flat">
+                Upgrade
+              </Button>
+            ),
+            variant: "faded",
+          });
+        }}
+      >
+        With Action
+      </Button>
+
+      <Button
+        onPress={() => {
+          addToast({
+            title: "Toast Title",
+            description: "Toast Description",
+            timeout: 3000,
+          });
+        }}
+      >
+        With Timeout
+      </Button>
+
+      <Button
+        onPress={() =>
+          addToast({
+            title: "Toast title",
+            description: "Toast displayed successfully",
+            icon: (
+              <svg height={24} viewBox="0 0 24 24" width={24}>
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeMiterlimit={10}
+                  strokeWidth={1.5}
+                >
+                  <path
+                    d="M11.845 21.662C8.153 21.662 5 21.088 5 18.787s3.133-4.425 6.845-4.425c3.692 0 6.845 2.1 6.845 4.4s-3.134 2.9-6.845 2.9z"
+                    data-name="Stroke 1"
+                  />
+                  <path d="M11.837 11.174a4.372 4.372 0 10-.031 0z" data-name="Stroke 3" />
+                </g>
+              </svg>
+            ),
+          })
+        }
+      >
+        Custom Icon
+      </Button>
+    </div>
+  );
+}

apps/docs/content/components/toast/types.ts

@@ -0,0 +1,9 @@
+import Types from "./types.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": Types,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/toast/variants.raw.jsx

@@ -0,0 +1,32 @@
+import {addToast, Button} from "@heroui/react";
+
+export default function App() {
+  return (
+    <>
+      <div className="flex flex-wrap gap-x-2">
+        {[
+          ["solid", "solid"],
+          ["bordered", "bordered"],
+          ["flat", "faded"],
+        ].map((variant) => (
+          <Button
+            key={variant[0]}
+            // @ts-ignore
+            variant={variant[1]}
+            onPress={() =>
+              addToast({
+                title: "Toast title",
+                description: "Toast displayed successfully",
+                // @ts-ignore
+                variant: variant[0],
+                color: "secondary",
+              })
+            }
+          >
+            {variant[0]}
+          </Button>
+        ))}
+      </div>
+    </>
+  );
+}