@a2v2ai/uikit 0.0.38 → 0.0.39

package/Toast/Toast.stories.tsx

@@ -1,285 +0,0 @@
-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

@@ -1,59 +0,0 @@
-"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 }