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

package/src/components/sandbox.tsx

@@ -0,0 +1,191 @@
+import { Copy, Eye, EyeOff } from "lucide-react";
+import type React from "react";
+import { useState } from "react";
+import { toast } from "sonner";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "../shadcn/components/ui/tooltip";
+import { cn } from "../shadcn/lib/utils";
+
+// Base sandbox styles
+const baseSandboxStyles = cn(
+	// Layout
+	"flex",
+	"flex-col",
+	"items-start",
+	"relative",
+	"size-full",
+	// Spacing
+	"gap-2",
+);
+
+// Input container styles
+const inputContainerStyles = cn(
+	// Layout
+	"flex",
+	"items-center",
+	"gap-2",
+	"w-full",
+	// Spacing
+	"px-3",
+	"py-2",
+	// Background & Border
+	"bg-bg-tertiary",
+	"rounded",
+	// Overflow
+	"overflow-hidden",
+);
+
+// Content styles
+const contentStyles = cn(
+	// Layout
+	"flex",
+	"items-center",
+	"gap-2",
+	"flex-1",
+	"min-w-0",
+);
+
+// Text styles
+const textStyles = cn(
+	// Typography
+	"typo-body",
+	"text-text-primary",
+	// Layout
+	"flex-1",
+	"min-w-0",
+	"truncate",
+);
+
+// Copy button styles
+const copyButtonStyles = cn(
+	// Layout
+	"flex",
+	"items-center",
+	"justify-center",
+	"shrink-0",
+	// Sizing
+	"size-4",
+	// Cursor
+	"cursor-pointer",
+	// Hover
+	"hover:opacity-80",
+	"transition-opacity",
+	"duration-200",
+);
+
+// Eye button styles
+const eyeButtonStyles = cn(
+	// Layout
+	"flex",
+	"items-center",
+	"justify-center",
+	"shrink-0",
+	// Sizing
+	"size-4",
+	// Cursor
+	"cursor-pointer",
+	// Hover
+	"hover:opacity-80",
+	"transition-opacity",
+	"duration-200",
+);
+
+export interface SandboxProps
+	extends Omit<React.ComponentProps<"div">, "children" | "onCopy"> {
+	url: string;
+
+	showCopy?: boolean;
+
+	showEye?: boolean;
+
+	copyIcon?: React.ReactNode;
+
+	tooltipText?: string;
+
+	showToast?: boolean;
+
+	onCopy?: (text: string) => void;
+}
+
+function Sandbox({
+	url,
+	showCopy = true,
+	showEye = true,
+	copyIcon = <Copy />,
+	tooltipText = "Copy URL",
+	showToast = true,
+	onCopy,
+	className,
+	...props
+}: SandboxProps) {
+	const [isVisible, setIsVisible] = useState(true);
+
+	return (
+		<div
+			data-slot="sandbox"
+			className={cn(baseSandboxStyles, className)}
+			{...props}
+		>
+			<div className={inputContainerStyles}>
+				<div className={contentStyles}>
+					<span className={textStyles}>
+						{isVisible ? url : "•".repeat(url.length)}
+					</span>
+				</div>
+				{showEye && (
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<button
+								type="button"
+								className={eyeButtonStyles}
+								onClick={() => setIsVisible(!isVisible)}
+							>
+								{isVisible ? <Eye /> : <EyeOff />}
+							</button>
+						</TooltipTrigger>
+						<TooltipContent>
+							<p>{isVisible ? "Hide URL" : "Show URL"}</p>
+						</TooltipContent>
+					</Tooltip>
+				)}
+				{showCopy && (
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<button
+								type="button"
+								className={copyButtonStyles}
+								onClick={async () => {
+									try {
+										await navigator.clipboard.writeText(url);
+
+										if (showToast) {
+											toast("Copied", {
+												description:
+													url.length > 50 ? `${url.slice(0, 50)}...` : url,
+												duration: 2000,
+											});
+										}
+
+										onCopy?.(url);
+									} catch (error) {
+										console.error("Failed to copy to clipboard:", error);
+									}
+								}}
+							>
+								{copyIcon}
+							</button>
+						</TooltipTrigger>
+						<TooltipContent>
+							<p>{tooltipText}</p>
+						</TooltipContent>
+					</Tooltip>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export { Sandbox };

package/src/components/segment-control.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+
+import { SegmentControl } from "./segment-control";
+
+const meta = {
+	title: "Component/SegmentControl",
+	component: SegmentControl,
+	parameters: {
+		layout: "centered",
+	},
+	tags: ["autodocs"],
+} satisfies Meta<typeof SegmentControl>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	args: {
+		value: "yaml",
+		onValueChange: () => {},
+		items: [
+			{ value: "yaml", label: "YAML" },
+			{ value: "json", label: "JSON" },
+		],
+	},
+	render: (args) => {
+		const [value, setValue] = useState(args.value);
+
+		return (
+			<SegmentControl
+				value={value}
+				onValueChange={setValue}
+				items={args.items}
+			/>
+		);
+	},
+};
+
+export const MoreThanTwo: Story = {
+	args: {
+		value: "yaml",
+		onValueChange: () => {},
+		items: [
+			{ value: "yaml", label: "YAML" },
+			{ value: "json", label: "JSON" },
+			{ value: "toml", label: "TOML" },
+		],
+	},
+	render: (args) => {
+		const [value, setValue] = useState(args.value);
+
+		return (
+			<SegmentControl
+				value={value}
+				onValueChange={setValue}
+				items={args.items}
+			/>
+		);
+	},
+};

package/src/components/segment-control.tsx

@@ -0,0 +1,83 @@
+import type { ReactNode } from "react";
+import { cn } from "#shadcn/lib/utils.js";
+
+// Container: h-24px, p-2px, rounded-full, bg-secondary_inverse
+const containerClass = cn(
+	"inline-flex",
+	"h-6",
+	"p-0.5",
+	"bg-bg-secondary_inverse",
+	"rounded-full",
+	"border",
+	"border-transparent",
+	"outline-none",
+	"transition-all",
+	"focus-visible:border-border-link",
+	"focus-visible:ring-4",
+	"focus-visible:ring-ring-blue",
+);
+
+// Item: px-8px py-2px, rounded-full (16px), typo-body
+const itemBaseClass = cn(
+	"flex",
+	"items-center",
+	"justify-center",
+	"px-2",
+	"py-0.5",
+	"typo-body",
+	"leading-4",
+	"cursor-pointer",
+	"rounded-full",
+	"select-none",
+	"transition-colors",
+);
+
+const itemInactiveClass = "text-text-quternary_on-brand";
+const itemActiveClass = "bg-bg-primary text-text-primary";
+
+interface SegmentControlProps<T extends string> {
+	value: T;
+	onValueChange: (value: T) => void;
+	items: { value: T; label: ReactNode }[];
+}
+
+function SegmentControl<T extends string>({
+	value,
+	onValueChange,
+	items,
+}: SegmentControlProps<T>) {
+	const isToggle = items.length === 2;
+
+	return (
+		<div className={containerClass}>
+			{items.map((item) => {
+				const isActive = item.value === value;
+				return (
+					<button
+						key={item.value}
+						type="button"
+						className={cn(
+							itemBaseClass,
+							isActive ? itemActiveClass : itemInactiveClass,
+						)}
+						onClick={() => {
+							if (isToggle) {
+								const other = items.find((i) => i.value !== item.value);
+								onValueChange(
+									isActive ? (other?.value ?? item.value) : item.value,
+								);
+							} else if (!isActive) {
+								onValueChange(item.value);
+							}
+						}}
+					>
+						{item.label}
+					</button>
+				);
+			})}
+		</div>
+	);
+}
+
+export { SegmentControl };
+export type { SegmentControlProps };

package/src/components/split-button.stories.tsx

@@ -0,0 +1,68 @@
+import type { StoryObj } from "@storybook/react-vite";
+import { ChevronDown, Plus, Save } from "lucide-react";
+import { Button } from "#shadcn/components/ui/button.js";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "#shadcn/components/ui/dropdown-menu.js";
+import { SplitButton } from "./split-button";
+
+const meta = {
+	title: "Component/SplitButton",
+	component: SplitButton,
+	parameters: {
+		layout: "centered",
+	},
+	tags: ["autodocs"],
+	argTypes: {
+		size: {
+			control: "select",
+			options: ["regular", "small"],
+			description: "Size of the split button",
+		},
+		disabled: {
+			control: "boolean",
+			description: "Disabled state of the split button",
+		},
+	},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SplitButton>;
+
+export const Default: Story = {
+	args: {
+		size: "regular",
+		disabled: false,
+	},
+	render: (args) => (
+		<SplitButton {...args}>
+			<Button variant="secondary" disabled={args.disabled ?? false}>
+				<Save />
+				Save
+			</Button>
+			<DropdownMenu>
+				<DropdownMenuTrigger asChild>
+					<Button variant="secondary" disabled={args.disabled ?? false}>
+						<ChevronDown />
+					</Button>
+				</DropdownMenuTrigger>
+				<DropdownMenuContent>
+					<DropdownMenuLabel>Save to collection:</DropdownMenuLabel>
+					<DropdownMenuSeparator />
+					<DropdownMenuItem disabled>No collections</DropdownMenuItem>
+					<DropdownMenuSeparator />
+					<DropdownMenuItem>
+						<Plus className="text-fg-link" />
+						New collection
+					</DropdownMenuItem>
+				</DropdownMenuContent>
+			</DropdownMenu>
+		</SplitButton>
+	),
+};

package/src/components/split-button.tsx

@@ -0,0 +1,74 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type React from "react";
+import { cn } from "#shadcn/lib/utils";
+
+const splitButtonBaseStyles = cn(
+	"flex",
+	"*:data-[slot=button]:rounded-r-none",
+	"*:data-[slot=dropdown-menu-trigger]:rounded-l-none",
+	"*:data-[slot=dropdown-menu-trigger]:border-l-0",
+);
+
+const splitButtonVariants = cva(splitButtonBaseStyles, {
+	variants: {
+		size: {
+			regular: cn(
+				"*:data-[slot=button]:h-9",
+				"*:data-[slot=button]:px-4",
+				"*:data-[slot=button]:typo-label",
+				"*:data-[slot=dropdown-menu-trigger]:h-9",
+				"*:data-[slot=dropdown-menu-trigger]:px-1",
+				"*:data-[slot=dropdown-menu-trigger]:py-2",
+			),
+			small: cn(
+				"*:data-[slot=button]:h-6",
+				"*:data-[slot=button]:px-2",
+				"*:data-[slot=button]:gap-1",
+				"*:data-[slot=button]:typo-button-label-xs",
+				"*:data-[slot=dropdown-menu-trigger]:h-6",
+				"*:data-[slot=dropdown-menu-trigger]:px-1",
+				"*:data-[slot=dropdown-menu-trigger]:py-1",
+			),
+		},
+		disabled: {
+			true: cn(
+				"*:data-[slot=button]:disabled:bg-bg-primary",
+				"*:data-[slot=button]:disabled:text-text-disabled",
+				"*:data-[slot=button]:disabled:border-border-disabled",
+				"*:data-[slot=dropdown-menu-trigger]:disabled:bg-bg-primary",
+				"*:data-[slot=dropdown-menu-trigger]:disabled:text-text-disabled",
+				"*:data-[slot=dropdown-menu-trigger]:disabled:border-border-disabled",
+			),
+			false: "",
+		},
+	},
+	defaultVariants: {
+		size: "regular",
+		disabled: false,
+	},
+});
+
+export interface SplitButtonProps
+	extends Omit<React.ComponentProps<"div">, "children">,
+		VariantProps<typeof splitButtonVariants> {
+	children: React.ReactNode;
+}
+
+function SplitButton({
+	children,
+	size,
+	disabled,
+	className,
+	...props
+}: SplitButtonProps) {
+	return (
+		<div
+			className={cn(splitButtonVariants({ size, disabled }), className)}
+			{...props}
+		>
+			{children}
+		</div>
+	);
+}
+
+export { SplitButton };