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

package/src/components/tile.stories.tsx

@@ -0,0 +1,149 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Activity, BarChart3, Settings, Users } from "lucide-react";
+import { Tile } from "./tile";
+
+const meta: Meta<typeof Tile> = {
+	title: "Component/Tile",
+	component: Tile,
+	parameters: {
+		layout: "centered",
+	},
+	tags: ["autodocs"],
+	argTypes: {
+		size: {
+			control: { type: "select" },
+			options: ["auto", "free"],
+		},
+		showIcon: {
+			control: { type: "boolean" },
+		},
+		icon: {
+			control: { type: "select" },
+			options: ["Activity", "Users", "Settings", "BarChart"],
+			mapping: {
+				Activity: <Activity />,
+				Users: <Users />,
+				Settings: <Settings />,
+				BarChart: <BarChart3 />,
+			},
+		},
+		width: {
+			control: { type: "text" },
+		},
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const ActivityIcon = () => <Activity />;
+const UsersIcon = () => <Users />;
+const SettingsIcon = () => <Settings />;
+const BarChartIcon = () => <BarChart3 />;
+
+export const Default: Story = {
+	args: {
+		label: "Active Apps",
+		value: "0",
+		icon: <ActivityIcon />,
+		showIcon: true,
+	},
+};
+
+export const WithIcon: Story = {
+	args: {
+		label: "Active Apps",
+		value: "0",
+		icon: <ActivityIcon />,
+		showIcon: true,
+	},
+};
+
+export const AutoSize: Story = {
+	args: {
+		label: "Users",
+		value: "1,234",
+		icon: <UsersIcon />,
+		showIcon: true,
+		size: "auto",
+	},
+};
+
+export const FreeSize: Story = {
+	args: {
+		label: "Total Revenue",
+		value: "$12,345",
+		icon: <BarChartIcon />,
+		showIcon: true,
+		size: "free",
+	},
+};
+
+export const CustomWidth: Story = {
+	args: {
+		label: "Settings",
+		value: "Configured",
+		icon: <SettingsIcon />,
+		showIcon: true,
+		width: "200px",
+	},
+};
+
+export const WithoutIcon: Story = {
+	args: {
+		label: "Simple Tile",
+		value: "No Icon",
+		showIcon: false,
+	},
+};
+
+export const OnlyLabel: Story = {
+	args: {
+		label: "Status",
+		showIcon: false,
+	},
+};
+
+export const OnlyValue: Story = {
+	args: {
+		value: "42",
+		showIcon: false,
+	},
+};
+
+export const Grid: Story = {
+	render: () => (
+		<div className="grid grid-cols-3 gap-4 w-full max-w-4xl">
+			<Tile
+				label="Active Apps"
+				value="0"
+				icon={<ActivityIcon />}
+				showIcon={true}
+				size="free"
+			/>
+			<Tile
+				label="Users"
+				value="1,234"
+				icon={<UsersIcon />}
+				showIcon={true}
+				size="free"
+			/>
+			<Tile
+				label="Revenue"
+				value="$12,345"
+				icon={<BarChartIcon />}
+				showIcon={true}
+				size="free"
+			/>
+			<Tile
+				label="Settings"
+				value="Configured"
+				icon={<SettingsIcon />}
+				showIcon={true}
+				size="free"
+			/>
+			<Tile label="Simple" value="No Icon" showIcon={false} size="free" />
+			<Tile label="Status" value="Online" showIcon={false} size="free" />
+		</div>
+	),
+};

package/src/components/tile.tsx

@@ -0,0 +1,105 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type React from "react";
+import { cn } from "../shadcn/lib/utils";
+
+const baseTileStyles = cn(
+	"flex",
+	"flex-col",
+	"items-start",
+	"gap-2",
+	"p-6",
+	"bg-bg-primary",
+	"rounded-lg",
+	"border",
+	"border-border-default",
+	"transition-colors",
+	"duration-200",
+);
+
+const tileSizeVariants = cva("", {
+	variants: {
+		size: {
+			auto: "w-auto",
+			free: "w-full",
+		},
+	},
+	defaultVariants: {
+		size: "auto",
+	},
+});
+
+const contentStyles = cn("flex", "flex-col", "items-start", "w-full");
+
+const labelStyles = cn("typo-body", "text-text-secondary");
+
+const valueStyles = cn("typo-page-header", "text-text-primary");
+
+const iconStyles = cn(
+	"flex",
+	"items-center",
+	"justify-center",
+	"size-12",
+	"shrink-0",
+	"rounded-full",
+	"bg-bg-tertiary",
+	"text-fg-secondary",
+	"[&>svg]:size-6",
+	"[&>svg]:pointer-events-none",
+	"[&>svg]:shrink-0",
+);
+
+const iconContainerStyles = cn("flex", "items-center", "gap-3", "w-full");
+
+export type TileProps = {
+	label?: string;
+	value?: string | number;
+	icon?: React.ReactNode;
+	showIcon?: boolean;
+	width?: string | number;
+} & Omit<React.ComponentProps<"div">, "size"> &
+	VariantProps<typeof tileSizeVariants>;
+
+export function Tile({
+	children,
+	label,
+	value,
+	icon,
+	showIcon = false,
+	size = "auto",
+	width,
+	className,
+	style,
+	...props
+}: TileProps) {
+	const shouldShowIcon = showIcon && icon;
+	const tileStyle = width ? { ...style, width } : style;
+
+	return (
+		<div
+			data-slot="tile"
+			className={cn(baseTileStyles, tileSizeVariants({ size }), className)}
+			style={tileStyle}
+			{...props}
+		>
+			<div className={contentStyles}>
+				{shouldShowIcon ? (
+					<div className={iconContainerStyles}>
+						<div className={iconStyles}>{icon}</div>
+						<div className="flex flex-col items-start w-full">
+							{label && <div className={labelStyles}>{label}</div>}
+							{value !== undefined && (
+								<div className={valueStyles}>{value}</div>
+							)}
+						</div>
+					</div>
+				) : (
+					<>
+						{label && <div className={labelStyles}>{label}</div>}
+						{value !== undefined && <div className={valueStyles}>{value}</div>}
+					</>
+				)}
+				{children}
+			</div>
+		</div>
+	);
+}

package/src/components/toolbar.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { Toolbar } from "./toolbar";
+
+const meta = {
+	title: "Component/Toolbar",
+	component: Toolbar,
+	parameters: {
+		layout: "centered",
+	},
+	tags: ["autodocs"],
+} satisfies Meta<typeof Toolbar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	args: {
+		segmentControlValue: "json",
+		onSegmentControlChange: () => {},
+		segmentControlItems: [
+			{ value: "json", label: "JSON" },
+			{ value: "yaml", label: "YAML" },
+		],
+		showCopy: true,
+		showAlignLeft: true,
+		showDownload: true,
+	},
+	render: (args) => {
+		const [value, setValue] = useState(args.segmentControlValue || "json");
+
+		return (
+			<Toolbar
+				{...args}
+				segmentControlValue={value}
+				onSegmentControlChange={setValue}
+			/>
+		);
+	},
+};
+
+export const WithCustomActions: Story = {
+	args: {
+		segmentControlValue: "json",
+		segmentControlItems: [
+			{ value: "json", label: "JSON" },
+			{ value: "yaml", label: "YAML" },
+		],
+		showCopy: true,
+		showAlignLeft: false,
+		showDownload: true,
+	},
+	render: (args) => {
+		const [value, setValue] = useState(args.segmentControlValue || "json");
+
+		return (
+			<Toolbar
+				{...args}
+				segmentControlValue={value}
+				onSegmentControlChange={setValue}
+			/>
+		);
+	},
+};

package/src/components/toolbar.tsx

@@ -0,0 +1,98 @@
+import { AlignLeft, Copy, Download } from "lucide-react";
+import type React from "react";
+import { cn } from "#shadcn/lib/utils";
+import { IconButton } from "./icon-button";
+import { SegmentControl } from "./segment-control";
+
+// Styles
+const toolbarContainerStyles = cn(
+	// Layout
+	"inline-flex",
+	"items-center",
+	"gap-2",
+	// Spacing
+	"pl-[9px]",
+	"pr-2",
+	"py-2",
+	// Background
+	"bg-bg-primary",
+	// Border
+	"border",
+	"border-border-secondary",
+	// Shape
+	"rounded-full",
+	// Shadow
+	"toolbar-shadow",
+);
+
+const iconsContainerStyles = cn(
+	// Layout
+	"flex",
+	"items-center",
+	"gap-0",
+);
+
+export interface ToolbarProps
+	extends Omit<React.ComponentProps<"div">, "children"> {
+	segmentControlValue?: string;
+	onSegmentControlChange?: (value: string) => void;
+	segmentControlItems?: { value: string; label: React.ReactNode }[];
+	onCopyClick?: () => void;
+	onAlignLeftClick?: () => void;
+	onDownloadClick?: () => void;
+	showCopy?: boolean;
+	showAlignLeft?: boolean;
+	showDownload?: boolean;
+}
+
+function Toolbar({
+	segmentControlValue = "json",
+	onSegmentControlChange,
+	segmentControlItems = [
+		{ value: "json", label: "JSON" },
+		{ value: "yaml", label: "YAML" },
+	],
+	onCopyClick,
+	onAlignLeftClick,
+	onDownloadClick,
+	showCopy = true,
+	showAlignLeft = true,
+	showDownload = true,
+	className,
+	...props
+}: ToolbarProps) {
+	return (
+		<div
+			data-slot="toolbar"
+			className={cn(toolbarContainerStyles, className)}
+			{...props}
+		>
+			<SegmentControl
+				value={segmentControlValue}
+				onValueChange={onSegmentControlChange || (() => {})}
+				items={segmentControlItems}
+			/>
+			<div className={iconsContainerStyles}>
+				{showCopy && (
+					<IconButton icon={<Copy />} aria-label="Copy" onClick={onCopyClick} />
+				)}
+				{showAlignLeft && (
+					<IconButton
+						icon={<AlignLeft />}
+						aria-label="Align left"
+						onClick={onAlignLeftClick}
+					/>
+				)}
+				{showDownload && (
+					<IconButton
+						icon={<Download />}
+						aria-label="Download"
+						onClick={onDownloadClick}
+					/>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export { Toolbar };

package/src/components/tree-view.stories.tsx

@@ -0,0 +1,265 @@
+import type { ItemInstance } from "@headless-tree/core";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Ellipsis, Pin, Plus } from "lucide-react";
+import React from "react";
+import { action } from "storybook/actions";
+import { Button } from "#shadcn/components/ui/button.js";
+import { PinIcon } from "../icons";
+import type { TreeViewItem } from "./tree-view";
+import { TreeView } from "./tree-view";
+
+const meta: Meta<typeof TreeView> = {
+	title: "Component/Tree view",
+	component: TreeView,
+	parameters: {
+		layout: "fullscreen",
+	},
+	tags: ["autodocs"],
+};
+type ItemMeta = {
+	pinned?: boolean;
+	method?: "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
+	path?: string;
+};
+
+export default meta;
+type Story = StoryObj<typeof TreeView<ItemMeta>>;
+
+const items: Record<string, TreeViewItem<ItemMeta>> = {
+	root: {
+		name: "Root",
+		children: ["collection1", "collection2", "collection3"],
+	},
+	collection1: {
+		name: "Collection 1",
+		children: ["request1", "request2", "request3"],
+		meta: {
+			pinned: true,
+		},
+	},
+	collection2: {
+		name: "Collection 2",
+		children: ["request4", "request5", "request6"],
+	},
+	collection3: {
+		name: "New Collection",
+		children: [
+			"request7",
+			"request8",
+			"request9",
+			"request10",
+			"request11",
+			"collection4",
+		],
+	},
+	collection4: {
+		name: "New Collection",
+		children: ["request12", "request13", "request14"],
+	},
+	request1: {
+		meta: {
+			method: "GET",
+			path: "/request1",
+		},
+		name: "Request 1",
+	},
+	request2: {
+		meta: {
+			method: "POST",
+			path: "/request2",
+		},
+		name: "Request 2",
+	},
+	request3: {
+		meta: {
+			method: "PUT",
+			path: "/request3",
+		},
+		name: "Request 3",
+	},
+	request4: {
+		meta: {
+			method: "DELETE",
+			path: "/request4",
+		},
+		name: "Request 4",
+	},
+	request5: {
+		meta: {
+			method: "PATCH",
+			path: "/request5",
+		},
+		name: "Request 5",
+	},
+	request6: {
+		meta: {
+			method: "GET",
+			path: "/request6",
+		},
+		name: "Request 6",
+	},
+	request7: {
+		meta: {
+			method: "PATCH",
+			path: "/fhir/Patient/123",
+		},
+		name: "Request 7",
+	},
+	request8: {
+		meta: {
+			method: "DELETE",
+			path: "/fhir/Patient/123",
+		},
+		name: "Request 8",
+	},
+	request9: {
+		meta: {
+			method: "PUT",
+			path: "/fhir/Patient/123",
+		},
+		name: "Request 9",
+	},
+	request10: {
+		meta: {
+			method: "POST",
+			path: "/fhir/Patient/123",
+		},
+		name: "Request 10",
+	},
+	request11: {
+		meta: {
+			method: "GET",
+			path: "/fhir/Patient/123",
+		},
+		name: "Request 11",
+	},
+	request12: {
+		meta: {
+			method: "PUT",
+			path: "/fhir/Patient/123",
+		},
+		name: "Request 12",
+	},
+	request13: {
+		meta: {
+			method: "PUT",
+			path: "/fhir/Patient/123",
+		},
+		name: "Request 13",
+	},
+	request14: {
+		meta: {
+			method: "PUT",
+			path: "/fhir/Patient/123",
+		},
+		name: "Request 14",
+	},
+};
+
+export const Default: Story = {
+	args: {
+		items: items,
+		rootItemId: "root",
+		focusedItem: "request9",
+		defaultExpandedItems: ["collection3"],
+		onFocusedItemChange: (a) => action("onSelectItem")(a),
+	},
+	render: (args) => <TreeView {...args} />,
+};
+
+function customItemView(item: ItemInstance<TreeViewItem<ItemMeta>>) {
+	const isRootLevel = item.getItemMeta().level === 0;
+	const hasChildren = item.getItemData()?.children !== undefined;
+	const requestMethhod = item.getItemData()?.meta?.method;
+	const requestPath = item.getItemData()?.meta?.path;
+	const itemName = item.getItemData()?.name;
+
+	const requestMethodView = () => {
+		switch (requestMethhod) {
+			case "GET":
+				return (
+					<div className="opacity-50 group-hover/tree-item-label:opacity-100 in-data-[selected=true]:opacity-100 font-medium min-w-13 w-13 text-utility-green text-left">
+						GET
+					</div>
+				);
+			case "POST":
+				return (
+					<div className="opacity-50 group-hover/tree-item-label:opacity-100 in-data-[selected=true]:opacity-100 font-medium min-w-13 w-13 text-utility-yellow text-left">
+						POST
+					</div>
+				);
+			case "PUT":
+				return (
+					<div className="opacity-50 group-hover/tree-item-label:opacity-100 in-data-[selected=true]:opacity-100 font-medium min-w-13 w-13 text-utility-blue text-left">
+						PUT
+					</div>
+				);
+			case "PATCH":
+				return (
+					<div className="opacity-50 group-hover/tree-item-label:opacity-100 in-data-[selected=true]:opacity-100 font-medium min-w-13 w-13 text-utility-violet text-left">
+						PATCH
+					</div>
+				);
+			case "DELETE":
+				return (
+					<div className="opacity-50 group-hover/tree-item-label:opacity-100 in-data-[selected=true]:opacity-100 font-medium min-w-13 w-13 text-utility-red text-left">
+						DELETE
+					</div>
+				);
+			default:
+				return (
+					<div className="opacity-50 group-hover/tree-item-label:opacity-100 in-data-[selected=true]:opacity-100 font-medium min-w-13 w-13 text-utility-gray text-left">
+						Unknown
+					</div>
+				);
+		}
+	};
+
+	return (
+		<div className="w-full flex justify-between gap-2">
+			<div className="flex items-center gap-2 truncate">
+				{hasChildren ? (
+					itemName
+				) : (
+					<React.Fragment>
+						{requestMethodView()}
+						{requestPath}
+					</React.Fragment>
+				)}
+			</div>
+			<div className="gap-2 hidden group-hover/tree-item-label:flex items-center">
+				{isRootLevel && (
+					<Button variant="link" size="small" className="p-0 h-4" asChild>
+						<span>
+							{item.getItemData()?.meta?.pinned ? <PinIcon /> : <Pin />}
+						</span>
+					</Button>
+				)}
+				{hasChildren && (
+					<Button variant="link" size="small" className="p-0 h-4" asChild>
+						<span>
+							<Plus />
+						</span>
+					</Button>
+				)}
+				<Button variant="link" size="small" className="p-0 h-4" asChild>
+					<span>
+						<Ellipsis />
+					</span>
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+export const CustomItemView: Story = {
+	args: {
+		items: items,
+		rootItemId: "root",
+		focusedItem: "request11",
+		defaultExpandedItems: ["collection3", "collection4"],
+		onFocusedItemChange: (a) => action("onSelectItem")(a ? items[a]?.name : a),
+		customItemView: customItemView,
+	},
+	render: (args) => <TreeView {...args} />,
+};