@a2v2ai/uikit 0.0.37 → 0.0.38

package/Toast/Toast.stories.tsx

@@ -0,0 +1,285 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Toaster, toast } from "./Toast"
+import { Button } from "../Button/Button"
+import { Flex } from "../Flex/Flex"
+import { Typography } from "../Typography/Typography"
+
+const meta: Meta<typeof Toaster> = {
+  title: "Components/Toast",
+  component: Toaster,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    theme: {
+      control: "select",
+      options: ["light", "dark", "system"],
+      description: "Theme for the toaster",
+    },
+    position: {
+      control: "select",
+      options: [
+        "top-left",
+        "top-center",
+        "top-right",
+        "bottom-left",
+        "bottom-center",
+        "bottom-right",
+      ],
+      description: "Position of the toast notifications",
+    },
+    richColors: {
+      control: "boolean",
+      description: "Enable rich colors for different toast types",
+    },
+    expand: {
+      control: "boolean",
+      description: "Expand toasts by default",
+    },
+    closeButton: {
+      control: "boolean",
+      description: "Show close button on toasts",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Toaster>
+
+const ToastDemo = () => {
+  return (
+    <Flex  gap={4} style={{ width: "400px" }}>
+      <Typography variant="subtitle1" color="main-900">
+        Toast Examples
+      </Typography>
+
+      <Flex direction="row" wrap="wrap" gap={2}>
+        <Button
+          variant="outline"
+          onClick={() => toast("Event has been created")}
+        >
+          Default
+        </Button>
+
+        <Button
+          variant="outline"
+          onClick={() =>
+            toast("Event has been created", {
+              description: "Sunday, December 03, 2023 at 9:00 AM",
+            })
+          }
+        >
+          With Description
+        </Button>
+
+        <Button
+          variant="outline"
+          onClick={() => toast.success("Successfully saved!")}
+        >
+          Success
+        </Button>
+
+        <Button
+          variant="outline"
+          onClick={() => toast.error("Something went wrong")}
+        >
+          Error
+        </Button>
+
+        <Button
+          variant="outline"
+          onClick={() => toast.warning("Please check your input")}
+        >
+          Warning
+        </Button>
+
+        <Button
+          variant="outline"
+          onClick={() => toast.info("New update available")}
+        >
+          Info
+        </Button>
+
+        <Button
+          variant="outline"
+          onClick={() =>
+            toast("Event has been created", {
+              action: {
+                label: "Undo",
+                onClick: () => console.log("Undo"),
+              },
+            })
+          }
+        >
+          With Action
+        </Button>
+
+        <Button
+          variant="outline"
+          onClick={() => {
+            const toastId = toast.loading("Loading...")
+            setTimeout(() => {
+              toast.success("Completed!", { id: toastId })
+            }, 2000)
+          }}
+        >
+          Loading
+        </Button>
+
+        <Button
+          variant="outline"
+          onClick={() =>
+            toast.promise(
+              new Promise((resolve) => setTimeout(resolve, 2000)),
+              {
+                loading: "Loading...",
+                success: "Data fetched successfully!",
+                error: "Failed to fetch data",
+              }
+            )
+          }
+        >
+          Promise
+        </Button>
+      </Flex>
+
+      <Toaster />
+    </Flex>
+  )
+}
+
+export const Default: Story = {
+  render: () => <ToastDemo />,
+}
+
+const PositionDemo = () => {
+  return (
+    <Flex  gap={4} style={{ width: "500px" }}>
+      <Typography variant="subtitle1" color="main-900">
+        Toast Positions
+      </Typography>
+
+      <Flex direction="row" wrap="wrap" gap={2}>
+        <Button
+          variant="outline"
+          size="small"
+          onClick={() => toast("Top Left", { position: "top-left" })}
+        >
+          Top Left
+        </Button>
+        <Button
+          variant="outline"
+          size="small"
+          onClick={() => toast("Top Center", { position: "top-center" })}
+        >
+          Top Center
+        </Button>
+        <Button
+          variant="outline"
+          size="small"
+          onClick={() => toast("Top Right", { position: "top-right" })}
+        >
+          Top Right
+        </Button>
+        <Button
+          variant="outline"
+          size="small"
+          onClick={() => toast("Bottom Left", { position: "bottom-left" })}
+        >
+          Bottom Left
+        </Button>
+        <Button
+          variant="outline"
+          size="small"
+          onClick={() => toast("Bottom Center", { position: "bottom-center" })}
+        >
+          Bottom Center
+        </Button>
+        <Button
+          variant="outline"
+          size="small"
+          onClick={() => toast("Bottom Right", { position: "bottom-right" })}
+        >
+          Bottom Right
+        </Button>
+      </Flex>
+
+      <Toaster />
+    </Flex>
+  )
+}
+
+export const Positions: Story = {
+  render: () => <PositionDemo />,
+}
+
+const RichColorsDemo = () => {
+  return (
+    <Flex  gap={4} style={{ width: "400px" }}>
+      <Typography variant="subtitle1" color="main-900">
+        Rich Colors
+      </Typography>
+
+      <Flex direction="row" wrap="wrap" gap={2}>
+        <Button
+          variant="outline"
+          onClick={() => toast.success("Successfully saved!")}
+        >
+          Success
+        </Button>
+        <Button
+          variant="outline"
+          onClick={() => toast.error("Something went wrong")}
+        >
+          Error
+        </Button>
+        <Button
+          variant="outline"
+          onClick={() => toast.warning("Please check your input")}
+        >
+          Warning
+        </Button>
+        <Button
+          variant="outline"
+          onClick={() => toast.info("New update available")}
+        >
+          Info
+        </Button>
+      </Flex>
+
+      <Toaster richColors />
+    </Flex>
+  )
+}
+
+export const RichColors: Story = {
+  render: () => <RichColorsDemo />,
+}
+
+const CloseButtonDemo = () => {
+  return (
+    <Flex  gap={4} style={{ width: "400px" }}>
+      <Typography variant="subtitle1" color="main-900">
+        With Close Button
+      </Typography>
+
+      <Button
+        variant="outline"
+        onClick={() =>
+          toast("Event has been created", {
+            description: "Click the X to dismiss",
+          })
+        }
+      >
+        Show Toast
+      </Button>
+
+      <Toaster closeButton />
+    </Flex>
+  )
+}
+
+export const WithCloseButton: Story = {
+  render: () => <CloseButtonDemo />,
+}

package/Toast/Toast.tsx

@@ -0,0 +1,59 @@
+"use client"
+
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
+import { Toaster as Sonner, toast, type ToasterProps } from "sonner"
+
+type ToastTheme = "light" | "dark" | "system"
+
+export interface ToastProps extends ToasterProps {
+  /**
+   * Theme for the toaster
+   * @default "light"
+   */
+  theme?: ToastTheme
+}
+
+const Toaster = ({ theme = "light", ...props }: ToastProps) => {
+  return (
+    <Sonner
+      theme={theme}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-white group-[.toaster]:text-main-950 group-[.toaster]:border-grey-200 group-[.toaster]:shadow-lg group-[.toaster]:rounded-lg",
+          description: "group-[.toast]:text-main-500",
+          actionButton:
+            "group-[.toast]:bg-main-900 group-[.toast]:text-white",
+          cancelButton:
+            "group-[.toast]:bg-grey-100 group-[.toast]:text-main-500",
+          success:
+            "group-[.toaster]:border-success-200 group-[.toaster]:bg-success-50 group-[.toaster]:text-success-900 [&_svg]:text-success-600",
+          error:
+            "group-[.toaster]:border-error-200 group-[.toaster]:bg-error-50 group-[.toaster]:text-error-900 [&_svg]:text-error-600",
+          warning:
+            "group-[.toaster]:border-warning-200 group-[.toaster]:bg-warning-50 group-[.toaster]:text-warning-900 [&_svg]:text-warning-600",
+          info:
+            "group-[.toaster]:border-accent-200 group-[.toaster]:bg-accent-50 group-[.toaster]:text-accent-900 [&_svg]:text-accent-600",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster, toast }
+export type { ToastTheme }