feat: toast component (#65)

Author: Cahllagerfeld

.changeset/calm-ties-brush.md

@@ -0,0 +1,5 @@
+---
+"@zenml-io/react-component-library": minor
+---
+
+add toast

.eslintrc.json

@@ -1,29 +1,27 @@
 {
- "env": {
-  "browser": true,
-  "es2021": true
- },
- "extends": [
-  "eslint:recommended",
-  "plugin:@typescript-eslint/recommended",
-  "plugin:react/recommended",
-  "plugin:storybook/recommended"
- ],
- "parser": "@typescript-eslint/parser",
- "parserOptions": {
-  "ecmaVersion": "latest",
-  "sourceType": "module"
- },
- "plugins": [
-  "@typescript-eslint",
-  "react"
- ],
- "settings": {
-  "react": {
-   "version": "detect"
-  }
- },
- "rules": {
-    "react/prop-types": "off"
-  }  
+	"env": {
+		"browser": true,
+		"es2021": true
+	},
+	"extends": [
+		"eslint:recommended",
+		"plugin:@typescript-eslint/recommended",
+		"plugin:react/recommended",
+		"plugin:storybook/recommended"
+	],
+	"parser": "@typescript-eslint/parser",
+	"parserOptions": {
+		"ecmaVersion": "latest",
+		"sourceType": "module"
+	},
+	"plugins": ["@typescript-eslint", "react"],
+	"settings": {
+		"react": {
+			"version": "detect"
+		}
+	},
+	"rules": {
+		"react/prop-types": "off",
+		"no-mixed-spaces-and-tabs": "off"
+	}
 }

package.json

@@ -91,6 +91,7 @@
 		"@radix-ui/react-dropdown-menu": "^2.0.6",
 		"@radix-ui/react-slot": "^1.0.2",
 		"@radix-ui/react-tabs": "^1.0.4",
+		"@radix-ui/react-toast": "^1.1.5",
 		"@radix-ui/react-tooltip": "^1.0.7",
 		"@tanstack/react-table": "^8.15.3",
 		"class-variance-authority": "^0.7.0",

pnpm-lock.yaml

@@ -149,8 +149,8 @@ export function SidebarItemContent({
 					? "stroke-primary-400"
 					: "stroke-theme-text-tertiary"
 				: isActive
-				? "fill-primary-400"
-				: "fill-theme-text-tertiary"
+					? "fill-primary-400"
+					: "fill-theme-text-tertiary"
 		}	`
 	);
 	return (

src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,73 @@
+import { Meta } from "@storybook/react";
+import React from "react";
+import { Toaster, Toast, toast } from "./index";
+import { StoryObj } from "@storybook/react";
+import { Button } from "../Button";
+
+const meta = {
+	title: "Elements/Toast",
+	component: Toast,
+	argTypes: {
+		emphasis: {
+			description: "Emphasis of the toast",
+			control: "select",
+			defaultValue: "subtle",
+			options: ["subtle", "bold"]
+		},
+		status: {
+			description: "Status of the toast",
+			control: "select",
+			defaultValue: "default",
+			options: ["default", "error", "success", "warning"]
+		},
+		rounded: {
+			control: "boolean",
+			defaultValue: true
+		}
+	},
+	parameters: {
+		layout: "centered"
+	},
+	decorators: [
+		(Story) => (
+			<div className="min-w-[800px] flex items-center justify-center min-h-[1000px]">
+				<Story />
+			</div>
+		)
+	],
+
+	tags: ["autodocs"]
+} satisfies Meta<typeof Toast>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DefaultVariant: Story = {
+	name: "Toast",
+	argTypes: {
+		// @ts-expect-error for some reason a wrong type is picked up there
+		emphasis: "subtle",
+		// @ts-expect-error for some reason a wrong type is picked up there
+		status: "error",
+		// @ts-expect-error for some reason a wrong type is picked up there
+		rounded: "true"
+	},
+	render: ({ emphasis, status, rounded }) => (
+		<div>
+			<Button
+				onClick={() => {
+					toast({
+						status,
+						emphasis,
+						description: "This is a toast message",
+						rounded
+					});
+				}}
+			>
+				Add Toast
+			</Button>
+			<Toaster />
+		</div>
+	)
+};

src/components/Toast/Toast.stories.tsx

@@ -0,0 +1,182 @@
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "../../utilities";
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+	React.ElementRef<typeof ToastPrimitives.Viewport>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+	<ToastPrimitives.Viewport
+		ref={ref}
+		className={cn(
+			"fixed top-0 z-[9999] flex max-h-screen w-full flex-col-reverse gap-1 p-4 sm:right-0 sm:top-7 sm:flex-col md:max-w-[480px]",
+			className
+		)}
+		{...props}
+	/>
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+export const toastVariants = cva(
+	"group pointer-events-auto pl-4 pr-6 py-3 relative flex w-full items-center justify-between overflow-hidden border transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+	{
+		variants: {
+			rounded: {
+				true: "rounded-md",
+				false: ""
+			},
+			status: {
+				default: "",
+				error: "",
+				success: "",
+				warning: ""
+			},
+			emphasis: {
+				subtle: "border",
+				bold: ""
+			}
+		},
+		compoundVariants: [
+			{
+				emphasis: "bold",
+				status: "default",
+				className: "white-close bg-theme-surface-strong text-theme-text-negative"
+			},
+			{
+				emphasis: "subtle",
+				status: "default",
+				class: "bg-primary-25 border-primary-400 text-theme-text-primary"
+			},
+			{
+				emphasis: "bold",
+				status: "error",
+				className: "white-close bg-error-600 text-theme-text-negative"
+			},
+			{
+				emphasis: "subtle",
+				status: "error",
+				className: "bg-error-50 border-error-300 text-error-900"
+			},
+			{
+				emphasis: "bold",
+				status: "success",
+				className: "white-close bg-success-700 text-theme-text-negative"
+			},
+			{
+				emphasis: "subtle",
+				status: "success",
+				className: "bg-success-50 border-success-300 text-success-900"
+			},
+			{
+				emphasis: "bold",
+				status: "warning",
+				className: "bg-warning-400"
+			},
+			{
+				emphasis: "subtle",
+				status: "warning",
+				className: "bg-warning-50 border-warning-300 text-warning-900"
+			}
+		],
+		defaultVariants: {
+			status: "default"
+		}
+	}
+);
+
+const Toast = React.forwardRef<
+	React.ElementRef<typeof ToastPrimitives.Root>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
+>(({ className, status, rounded, emphasis, ...props }, ref) => {
+	return (
+		<ToastPrimitives.Root
+			ref={ref}
+			className={cn(toastVariants({ status, rounded, emphasis }), className)}
+			{...props}
+		/>
+	);
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<
+	React.ElementRef<typeof ToastPrimitives.Action>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+	<ToastPrimitives.Action
+		ref={ref}
+		className={cn(
+			"text-sm ring-offset-background hover:bg-secondary focus:ring-ring inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+			className
+		)}
+		{...props}
+	/>
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+	React.ElementRef<typeof ToastPrimitives.Close>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+	<ToastPrimitives.Close
+		ref={ref}
+		className={cn(
+			"absolute right-2 top-2 rounded-md p-0.5 group-[.white-close]:text-theme-text-negative",
+			className
+		)}
+		toast-close=""
+		{...props}
+	>
+		<svg
+			className="h-4 w-4 group-[.white-close]:fill-white"
+			viewBox="0 0 24 24"
+			fill="black"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z"
+			/>
+		</svg>
+	</ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<
+	React.ElementRef<typeof ToastPrimitives.Title>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+	<ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold", className)} {...props} />
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+	React.ElementRef<typeof ToastPrimitives.Description>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+	<ToastPrimitives.Description
+		ref={ref}
+		className={cn("text-sm opacity-90", className)}
+		{...props}
+	/>
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+
+export {
+	Toast,
+	ToastAction,
+	ToastClose,
+	ToastDescription,
+	ToastProvider,
+	ToastTitle,
+	ToastViewport,
+	type ToastActionElement,
+	type ToastProps
+};