@health-samurai/react-components 0.0.0-alpha.2 → 0.0.0-alpha.21

package/src/shadcn/components/ui/skeleton.tsx

@@ -1,10 +1,13 @@
 import { cn } from "#shadcn/lib/utils";
 
+// Skeleton styles
+const skeletonStyles = cn("bg-bg-tertiary", "animate-pulse", "rounded-md");
+
 function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
 	return (
 		<div
 			data-slot="skeleton"
-			className={cn("bg-accent animate-pulse rounded-md", className)}
+			className={cn(skeletonStyles, className)}
 			{...props}
 		/>
 	);

package/src/shadcn/components/ui/slider.tsx

@@ -1,8 +1,87 @@
+"use client";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
+// Slider root styles
+const sliderRootStyles = cn(
+	// Layout
+	"relative",
+	"flex",
+	"w-full",
+	"items-center",
+	// Interaction
+	"touch-none",
+	"select-none",
+	// Disabled
+	"data-[disabled]:opacity-50",
+	// Vertical orientation
+	"data-[orientation=vertical]:h-full",
+	"data-[orientation=vertical]:min-h-44",
+	"data-[orientation=vertical]:w-auto",
+	"data-[orientation=vertical]:flex-col",
+);
+
+// Slider track styles
+const sliderTrackStyles = cn(
+	// Background
+	"bg-bg-quaternary",
+	// Layout
+	"relative",
+	"grow",
+	"overflow-hidden",
+	// Shape
+	"rounded-full",
+	// Horizontal orientation
+	"data-[orientation=horizontal]:h-1.5",
+	"data-[orientation=horizontal]:w-full",
+	// Vertical orientation
+	"data-[orientation=vertical]:h-full",
+	"data-[orientation=vertical]:w-1.5",
+);
+
+// Slider range styles
+const sliderRangeStyles = cn(
+	// Background
+	"bg-bg-link",
+	// Layout
+	"absolute",
+	// Horizontal orientation
+	"data-[orientation=horizontal]:h-full",
+	// Vertical orientation
+	"data-[orientation=vertical]:w-full",
+);
+
+// Slider thumb styles
+const sliderThumbStyles = cn(
+	// Layout
+	"block",
+	"size-4",
+	"shrink-0",
+	// Shape
+	"rounded-full",
+	// Borders
+	"border",
+	"border-border-link",
+	// Background
+	"bg-bg-primary",
+	// Shadow
+	"shadow-sm",
+	// Transitions
+	"transition-[color,box-shadow]",
+	// Hover
+	"hover:ring-4",
+	"hover:ring-utility-blue/70",
+	// Focus
+	"focus-visible:ring-4",
+	"focus-visible:ring-utility-blue/70",
+	"focus-visible:outline-hidden",
+	// Disabled
+	"disabled:pointer-events-none",
+	"disabled:opacity-50",
+);
+
 function Slider({
 	className,
 	defaultValue,
@@ -28,23 +107,16 @@ function Slider({
 			{...(value !== undefined ? { value } : {})}
 			min={min}
 			max={max}
-			className={cn(
-				"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
-				className,
-			)}
+			className={cn(sliderRootStyles, className)}
 			{...props}
 		>
 			<SliderPrimitive.Track
 				data-slot="slider-track"
-				className={cn(
-					"bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
-				)}
+				className={sliderTrackStyles}
 			>
 				<SliderPrimitive.Range
 					data-slot="slider-range"
-					className={cn(
-						"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
-					)}
+					className={sliderRangeStyles}
 				/>
 			</SliderPrimitive.Track>
 			{Array.from({ length: _values.length }, (_, index) => (
@@ -52,7 +124,7 @@ function Slider({
 					data-slot="slider-thumb"
 					// biome-ignore lint/suspicious/noArrayIndexKey: FIXME: unchanged shadcn
 					key={index}
-					className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+					className={sliderThumbStyles}
 				/>
 			))}
 		</SliderPrimitive.Root>

package/src/shadcn/components/ui/sonner.stories.tsx

@@ -1,29 +1,250 @@
+import { Controls, Primary, Title } from "@storybook/addon-docs/blocks";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { toast } from "sonner";
+import { Bug, Play } from "lucide-react";
+import { useEffect } from "react";
 import { Button } from "#shadcn/components/ui/button";
+import { Toaster, toast } from "#shadcn/components/ui/sonner";
+
+interface ToastWrapperProps {
+	variant?: "info" | "error";
+	closeButton?: boolean;
+	hasAction?: boolean;
+	hasSecondaryAction?: boolean;
+}
+
+function ToastWrapper({
+	variant = "info",
+	closeButton = false,
+	hasAction = false,
+	hasSecondaryAction = false,
+}: ToastWrapperProps) {
+	const isError = variant === "error";
+
+	const showToast = () => {
+		const toastFn = isError ? toast.error : toast.info;
+		toastFn(isError ? "Error notification" : "Info notification", {
+			description: "This is a toast message with description.",
+			closeButton,
+			actionSlot: hasAction ? (
+				<Button variant="primary" size="small" danger={isError}>
+					<Play className="size-4" />
+					Action
+				</Button>
+			) : undefined,
+			secondaryActionSlot: hasSecondaryAction ? (
+				<Button variant="ghost" size="small" danger={isError}>
+					<Bug className="size-4" />
+					Report
+				</Button>
+			) : undefined,
+		});
+	};
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: trigger on prop change
+	useEffect(() => {
+		showToast();
+	}, [variant, closeButton, hasAction, hasSecondaryAction]);
+
+	return (
+		<div className="flex flex-col items-center gap-4">
+			<Button variant="secondary" onClick={showToast}>
+				Show Toast
+			</Button>
+			<Toaster position="top-center" />
+		</div>
+	);
+}
 
 const meta = {
 	title: "Component/Sonner",
-} satisfies Meta;
-export default meta;
+	component: ToastWrapper,
+	parameters: {
+		layout: "centered",
+		docs: {
+			page: () => (
+				<>
+					<Title />
+					<Primary />
+					<Controls />
+				</>
+			),
+		},
+	},
+	argTypes: {
+		variant: {
+			control: "select",
+			options: ["info", "error"],
+		},
+		closeButton: {
+			control: "boolean",
+		},
+		hasAction: {
+			control: "boolean",
+		},
+		hasSecondaryAction: {
+			control: "boolean",
+		},
+	},
+	args: {
+		variant: "info",
+		closeButton: false,
+		hasAction: false,
+		hasSecondaryAction: false,
+	},
+} satisfies Meta<typeof ToastWrapper>;
 
+export default meta;
 type Story = StoryObj<typeof meta>;
 
+export const Default = {
+	tags: ["!dev"],
+	render: ({
+		variant = "info",
+		closeButton = false,
+		hasAction = false,
+		hasSecondaryAction = false,
+	}) => (
+		<ToastWrapper
+			variant={variant}
+			closeButton={closeButton}
+			hasAction={hasAction}
+			hasSecondaryAction={hasSecondaryAction}
+		/>
+	),
+} satisfies Story;
+
 export const Demo = {
+	tags: ["!autodocs"],
 	render: () => (
-		<Button
-			variant="secondary"
-			onClick={() =>
-				toast("Event has been created", {
-					description: "Sunday, December 03, 2023 at 9:00 AM",
-					action: {
-						label: "Undo",
-						onClick: () => console.log("Undo"),
-					},
-				})
-			}
-		>
-			Show Toast
-		</Button>
+		<div className="flex flex-col gap-4">
+			<div className="flex gap-2 flex-wrap">
+				<Button
+					variant="secondary"
+					onClick={() => {
+						toast.info("Info notification", {
+							description: "This is an informational message.",
+						});
+					}}
+				>
+					Info
+				</Button>
+
+				<Button
+					variant="secondary"
+					onClick={() => {
+						toast.info("Info with close", {
+							description: "This toast has a close button.",
+							closeButton: true,
+						});
+					}}
+				>
+					Info + Close
+				</Button>
+
+				<Button
+					variant="secondary"
+					onClick={() => {
+						toast.info("Info with action", {
+							description: "Click the button to perform action.",
+							actionSlot: (
+								<Button variant="primary" size="small">
+									<Play className="size-4" />
+									Action
+								</Button>
+							),
+						});
+					}}
+				>
+					Info + Action
+				</Button>
+
+				<Button
+					variant="secondary"
+					onClick={() => {
+						toast.info("Info with actions", {
+							description: "Multiple actions available.",
+							actionSlot: (
+								<Button variant="primary" size="small">
+									<Play className="size-4" />
+									Action
+								</Button>
+							),
+							secondaryActionSlot: (
+								<Button variant="ghost" size="small">
+									<Bug className="size-4" />
+									Report
+								</Button>
+							),
+							closeButton: true,
+						});
+					}}
+				>
+					Info + All
+				</Button>
+
+				<Button
+					variant="secondary"
+					onClick={() => {
+						toast.error("Error notification", {
+							description: "Something went wrong.",
+						});
+					}}
+				>
+					Error
+				</Button>
+
+				<Button
+					variant="secondary"
+					onClick={() => {
+						toast.error("Error with close", {
+							description: "This error has a close button.",
+							closeButton: true,
+						});
+					}}
+				>
+					Error + Close
+				</Button>
+
+				<Button
+					variant="secondary"
+					onClick={() => {
+						toast.error("Error with action", {
+							description: "Click to retry the operation.",
+							actionSlot: (
+								<Button variant="primary" size="small" danger>
+									Retry
+								</Button>
+							),
+						});
+					}}
+				>
+					Error + Action
+				</Button>
+
+				<Button
+					variant="secondary"
+					onClick={() => {
+						toast.error("Error with actions", {
+							description: "Multiple actions available.",
+							actionSlot: (
+								<Button variant="primary" size="small" danger>
+									Retry
+								</Button>
+							),
+							secondaryActionSlot: (
+								<Button variant="ghost" size="small" danger>
+									<Bug className="size-4" />
+									Report
+								</Button>
+							),
+							closeButton: true,
+						});
+					}}
+				>
+					Error + All
+				</Button>
+			</div>
+			<Toaster position="top-center" />
+		</div>
 	),
 } satisfies Story;

package/src/shadcn/components/ui/sonner.tsx

@@ -1,23 +1,266 @@
+"use client";
+
+import { Info, TriangleAlert, X } from "lucide-react";
 import { useTheme } from "next-themes";
-import { Toaster as Sonner, type ToasterProps } from "sonner";
+import type * as React from "react";
+import {
+	Toaster as Sonner,
+	toast as sonnerToast,
+	type ToasterProps,
+} from "sonner";
+import { cn } from "#shadcn/lib/utils";
+
+/* ==========================================================================
+   Styles
+   ========================================================================== */
+
+const toastBaseStyles = cn(
+	// Layout
+	"flex",
+	"items-start",
+	"gap-[var(--spacing-x1point5,12px)]",
+	// Shape
+	"rounded-[var(--corner-corner-m,6px)]",
+	// Spacing
+	"p-[var(--spacing-x2,16px)]",
+	// Border
+	"border",
+);
+
+const toastDefaultStyles = cn(
+	toastBaseStyles,
+	// Background
+	"bg-bg-primary",
+	// Border
+	"border-border-separator",
+);
+
+const toastErrorStyles = cn(
+	toastBaseStyles,
+	// Background
+	"bg-bg-error-secondary",
+	// Border
+	"border-border-error_inverse",
+);
+
+const iconContainerStyles = cn(
+	// Layout
+	"shrink-0",
+	"size-5",
+);
+
+const contentContainerStyles = cn(
+	// Layout
+	"flex",
+	"flex-col",
+	"gap-[var(--spacing-x1,8px)]",
+	"flex-1",
+	"min-w-0",
+);
+
+const titleDefaultStyles = cn(
+	// Typography
+	"body14bold",
+	"text-text-primary",
+);
+
+const titleErrorStyles = cn(
+	// Typography
+	"body14bold",
+	"text-text-error-primary",
+);
+
+const descriptionDefaultStyles = cn(
+	// Typography
+	"body14",
+	"text-text-secondary_hover",
+);
+
+const descriptionErrorStyles = cn(
+	// Typography
+	"body14",
+	"text-[var(--color-red-800)]",
+);
+
+const closeButtonStyles = cn(
+	// Layout
+	"shrink-0",
+	"size-5",
+	// Interaction
+	"cursor-pointer",
+	"hover:opacity-70",
+	"transition-opacity",
+);
+
+const closeButtonDefaultStyles = cn(
+	closeButtonStyles,
+	// Typography
+	"text-text-primary",
+);
+
+const closeButtonErrorStyles = cn(
+	closeButtonStyles,
+	// Typography
+	"text-[var(--color-red-800)]",
+);
+
+/* ==========================================================================
+   Components
+   ========================================================================== */
+
+type ToastVariant = "default" | "error";
+
+interface ToastContentProps {
+	id: string | number;
+	title: string;
+	description?: string | undefined;
+	variant?: ToastVariant;
+	showCloseButton?: boolean;
+	actionSlot?: React.ReactNode;
+	secondaryActionSlot?: React.ReactNode;
+}
+
+function ToastContent({
+	id,
+	title,
+	description,
+	variant = "default",
+	showCloseButton = false,
+	actionSlot,
+	secondaryActionSlot,
+}: ToastContentProps) {
+	const isError = variant === "error";
+
+	const Icon = isError ? TriangleAlert : Info;
+	const iconColor = isError ? "text-text-error-primary" : "text-text-primary";
 
-const Toaster = ({ ...props }: ToasterProps) => {
+	const hasActions = actionSlot || secondaryActionSlot;
+
+	return (
+		<div className={isError ? toastErrorStyles : toastDefaultStyles}>
+			{/* Icon */}
+			<div className={cn(iconContainerStyles, iconColor)}>
+				<Icon className="size-5" />
+			</div>
+
+			{/* Content */}
+			<div className={contentContainerStyles}>
+				<div className={isError ? titleErrorStyles : titleDefaultStyles}>
+					{title}
+				</div>
+				{description && (
+					<div
+						className={
+							isError ? descriptionErrorStyles : descriptionDefaultStyles
+						}
+					>
+						{description}
+					</div>
+				)}
+				{hasActions && (
+					<div className="mt-1 flex items-center gap-2 flex-wrap">
+						{actionSlot && <div>{actionSlot}</div>}
+						{secondaryActionSlot && <div>{secondaryActionSlot}</div>}
+					</div>
+				)}
+			</div>
+
+			{/* Close button - always shown if showCloseButton is true */}
+			{showCloseButton && (
+				<button
+					type="button"
+					onClick={() => sonnerToast.dismiss(id)}
+					className={
+						isError ? closeButtonErrorStyles : closeButtonDefaultStyles
+					}
+					aria-label="Close"
+				>
+					<X className="size-5" />
+				</button>
+			)}
+		</div>
+	);
+}
+
+/* ==========================================================================
+   Toaster
+   ========================================================================== */
+
+function Toaster({ ...props }: ToasterProps) {
 	const { theme = "system" } = useTheme();
 
 	return (
 		<Sonner
-			theme={theme as ToasterProps["theme"] & {}}
-			className="toaster group"
-			style={
-				{
-					"--normal-bg": "var(--popover)",
-					"--normal-text": "var(--popover-foreground)",
-					"--normal-border": "var(--border)",
-				} as React.CSSProperties
+			theme={
+				theme === "system" ? "system" : theme === "dark" ? "dark" : "light"
 			}
+			className="toaster group"
+			toastOptions={{
+				unstyled: true,
+				classNames: {
+					toast: "w-full max-w-[588px]",
+				},
+			}}
 			{...props}
 		/>
 	);
+}
+
+/* ==========================================================================
+   Toast API
+   ========================================================================== */
+
+interface ToastOptions {
+	description?: string;
+	actionSlot?: React.ReactNode;
+	secondaryActionSlot?: React.ReactNode;
+	closeButton?: boolean;
+	duration?: number;
+}
+
+function createToast(
+	title: string,
+	variant: ToastVariant,
+	options?: ToastOptions,
+) {
+	const showCloseButton = options?.closeButton ?? false;
+
+	return sonnerToast.custom(
+		(id) => {
+			const contentProps: Omit<ToastContentProps, "id"> = {
+				title,
+				description: options?.description,
+				variant,
+				showCloseButton,
+				actionSlot: options?.actionSlot,
+				secondaryActionSlot: options?.secondaryActionSlot,
+			};
+
+			return <ToastContent id={id} {...contentProps} />;
+		},
+		options?.duration !== undefined
+			? { duration: options.duration }
+			: undefined,
+	);
+}
+
+const toast = {
+	/**
+	 * Default info toast
+	 */
+	info: (title: string, options?: ToastOptions) =>
+		createToast(title, "default", options),
+
+	/**
+	 * Error/alert toast
+	 */
+	error: (title: string, options?: ToastOptions) =>
+		createToast(title, "error", options),
+
+	/**
+	 * Dismiss a toast by id
+	 */
+	dismiss: sonnerToast.dismiss,
 };
 
-export { Toaster };
+export { Toaster, toast };