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

package/src/components/operation-outcome-view.tsx

@@ -0,0 +1,254 @@
+import { Check, Copy, Info, TriangleAlert } from "lucide-react";
+import React from "react";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "../shadcn/components/ui/tooltip";
+import { cn } from "../shadcn/lib/utils";
+
+type OperationOutcomeSeverity = "fatal" | "error" | "warning" | "information";
+
+export interface OperationOutcomeIssue {
+	code: string;
+	severity: OperationOutcomeSeverity;
+	diagnostics?: string;
+	expression?: string[];
+	details?: {
+		coding?: { system?: string; code?: string; display?: string }[];
+		text?: string;
+	};
+}
+
+export interface OperationOutcome {
+	resourceType: "OperationOutcome";
+	issue: OperationOutcomeIssue[];
+}
+
+export type OperationOutcomeViewProps = {
+	resource: OperationOutcome;
+	onIssueClick?: (issue: OperationOutcomeIssue) => void;
+} & Omit<React.ComponentProps<"div">, "resource">;
+
+const severityOrder: OperationOutcomeSeverity[] = [
+	"fatal",
+	"error",
+	"warning",
+	"information",
+];
+
+const severityConfig = {
+	fatal: {
+		header: cn("bg-bg-error-primary_inverse", "text-text-primary_on-brand"),
+		text: "text-text-error-primary",
+		icon: TriangleAlert,
+		label: "fatal",
+	},
+	error: {
+		header: cn("bg-bg-error-primary_inverse", "text-text-primary_on-brand"),
+		text: "text-text-error-primary",
+		icon: TriangleAlert,
+		label: "error",
+	},
+	warning: {
+		header: cn("bg-bg-warning-primary_inverse", "text-text-warning-primary"),
+		text: "text-text-warning-primary",
+		icon: TriangleAlert,
+		label: "warning",
+	},
+	information: {
+		header: cn("bg-bg-info-primary_inverse", "text-text-primary_on-brand"),
+		text: "text-text-info-primary",
+		icon: Info,
+		label: "info",
+	},
+} as const;
+
+const issueCodeLabels: Record<string, string> = {
+	"constraint-error": "Constraint violation",
+	"constraint-exception": "Constraint exception",
+	"empty-value": "Empty value",
+	"expected-array": "Expected array",
+	"extension-for-repeated-primitive-types-must-be-an-array":
+		"Extension must be array",
+	"extension-for-scalar-primitive-types-must-be-an-object":
+		"Extension must be object",
+	"internal-validator-error": "Internal validator error",
+	"invalid-cardinality": "Invalid cardinality",
+	"invalid-constant": "Invalid constant",
+	"invalid-extension-cardinality": "Invalid extension cardinality",
+	"invalid-slice-cardinality": "Invalid slice cardinality",
+	"invalid-slice-default": "Invalid slice default",
+	"invalid-slicing-ordrer": "Invalid slicing order",
+	"invalid-target-profile": "Invalid target profile",
+	"invalid-type": "Invalid type",
+	"non-existent-resource": "Resource not found",
+	"required-key": "Required field",
+	"terminology-binding-error": "Terminology binding error",
+	"terminology-binding-check": "Terminology binding check",
+	"too-many-union-subtypes": "Too many union subtypes",
+	"underscore-keys-should-be-element-type": "Invalid underscore key",
+	"underscore-property-on-complex-type": "Invalid underscore property",
+	"unexpected-array": "Unexpected array",
+	"unexpected-object": "Unexpected object",
+	"unknown-extension": "Unknown extension",
+	"unknown-key": "Unknown property",
+	"unknown-profile": "Unknown profile",
+	"unknown-resource-type": "Unknown resource type",
+	"unmatched-element-in-closed-slicing": "Unmatched element in slicing",
+	"unmathced-resource": "Unmatched resource",
+	"wrong-union-type": "Wrong union type",
+	processing: "Processing error",
+	invalid: "Invalid",
+	structure: "Structure error",
+	required: "Required",
+	value: "Invalid value",
+	invariant: "Invariant violation",
+	"not-found": "Not found",
+	"not-supported": "Not supported",
+	duplicate: "Duplicate",
+	"business-rule": "Business rule violation",
+	conflict: "Conflict",
+	transient: "Transient error",
+	exception: "Exception",
+};
+
+function getIssueCode(issue: OperationOutcomeIssue): string {
+	return issue.details?.coding?.[0]?.code ?? issue.code;
+}
+
+function getIssueCodeLabel(code: string): string {
+	return issueCodeLabels[code] ?? code;
+}
+
+function groupIssuesBySeverity(issues: OperationOutcomeIssue[]) {
+	const groups = new Map<OperationOutcomeSeverity, OperationOutcomeIssue[]>();
+	for (const issue of issues) {
+		const existing = groups.get(issue.severity) ?? [];
+		existing.push(issue);
+		groups.set(issue.severity, existing);
+	}
+	return severityOrder
+		.filter((s) => groups.has(s))
+		.map((s) => ({
+			severity: s,
+			issues: groups.get(s) as OperationOutcomeIssue[],
+		}));
+}
+
+function CopyButton({ resource }: { resource: OperationOutcome }) {
+	const [copied, setCopied] = React.useState(false);
+
+	const handleCopy = (e: React.MouseEvent) => {
+		e.stopPropagation();
+		navigator.clipboard.writeText(JSON.stringify(resource, null, 2));
+		setCopied(true);
+		setTimeout(() => setCopied(false), 2000);
+	};
+
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<button
+					type="button"
+					className="p-1 rounded hover:bg-white/20 transition-colors [&>svg]:size-3.5"
+					onClick={handleCopy}
+				>
+					{copied ? <Check /> : <Copy />}
+				</button>
+			</TooltipTrigger>
+			<TooltipContent side="bottom">
+				{copied ? "Copied" : "Copy OperationOutcome"}
+			</TooltipContent>
+		</Tooltip>
+	);
+}
+
+export function OperationOutcomeView({
+	resource,
+	onIssueClick,
+	className,
+	...props
+}: OperationOutcomeViewProps) {
+	const groups = groupIssuesBySeverity(resource.issue);
+
+	return (
+		<div
+			data-slot="operation-outcome-view"
+			className={cn("flex flex-col", className)}
+			{...props}
+		>
+			{groups.map(({ severity, issues }) => {
+				const config = severityConfig[severity];
+				const Icon = config.icon;
+				const count = issues.length;
+				const label = `${count} ${config.label}${count !== 1 ? "s" : ""}`;
+
+				return (
+					<div key={severity}>
+						<div
+							className={cn(
+								"flex items-center gap-2 px-4 h-8",
+								"[&>svg]:size-4 [&>svg]:shrink-0",
+								"typo-body",
+								"sticky top-0 z-10",
+								config.header,
+							)}
+						>
+							<Icon />
+							<span className="grow">{label}</span>
+							<CopyButton resource={resource} />
+						</div>
+						<div className="flex flex-col py-1 bg-bg-primary">
+							{issues.map((issue) => {
+								const expressionText = issue.expression?.join(", ");
+								const codeLabel = getIssueCodeLabel(getIssueCode(issue));
+								const key = `${issue.severity}-${getIssueCode(issue)}-${expressionText ?? ""}`;
+
+								const row = (
+									<button
+										type="button"
+										key={key}
+										className={cn(
+											"flex cursor-pointer hover:bg-bg-secondary w-full text-left",
+										)}
+										onClick={
+											onIssueClick ? () => onIssueClick(issue) : undefined
+										}
+									>
+										<span
+											className={cn(
+												"px-4 py-1 typo-body font-medium whitespace-nowrap",
+												config.text,
+											)}
+										>
+											{codeLabel}
+										</span>
+										<span className="pr-4 py-1 typo-body text-text-primary whitespace-nowrap">
+											{expressionText ?? ""}
+										</span>
+									</button>
+								);
+
+								if (!issue.diagnostics) return row;
+
+								return (
+									<Tooltip key={key}>
+										<TooltipTrigger asChild>{row}</TooltipTrigger>
+										<TooltipContent
+											side="bottom"
+											align="start"
+											className="max-w-lg whitespace-pre-wrap"
+										>
+											{issue.diagnostics}
+										</TooltipContent>
+									</Tooltip>
+								);
+							})}
+						</div>
+					</div>
+				);
+			})}
+		</div>
+	);
+}

package/src/components/request-line-editor.stories.tsx

@@ -18,13 +18,9 @@ const meta: Meta<typeof RequestLineEditor> = {
 export default meta;
 type Story = StoryObj<typeof RequestLineEditor>;
 
-function RequestLineEditorWrapper({
-	selectedMethod,
-	methods,
-	inputValue,
-}: RequestLineEditorProps) {
-	const [currentSelectedMethod, setMethod] = React.useState(selectedMethod);
-	const [currentInputValue, setInputValue] = React.useState(inputValue);
+function RequestLineEditorWrapper({ method, path }: RequestLineEditorProps) {
+	const [currentSelectedMethod, setMethod] = React.useState(method);
+	const [currentInputValue, setInputValue] = React.useState(path);
 	const actionSetMethod = (method: string) => {
 		action("setMethod")(method);
 		setMethod(method);
@@ -35,56 +31,50 @@ function RequestLineEditorWrapper({
 	};
 	return (
 		<RequestLineEditor
-			methods={methods}
-			selectedMethod={currentSelectedMethod}
-			setMethod={actionSetMethod}
-			inputValue={currentInputValue}
-			onInputChange={actionSetInputValue}
+			method={currentSelectedMethod}
+			onMethodChange={actionSetMethod}
+			path={currentInputValue}
+			onPathChange={actionSetInputValue}
 		/>
 	);
 }
 
 export const GET: Story = {
 	args: {
-		selectedMethod: "GET",
-		methods: ["GET", "POST", "PUT", "PATCH", "DELETE"],
-		inputValue: "/fhir/Patient",
+		method: "GET",
+		path: "/fhir/Patient",
 	},
 	render: (args) => <RequestLineEditorWrapper {...args} />,
 };
 
 export const POST: Story = {
 	args: {
-		selectedMethod: "POST",
-		methods: ["GET", "POST", "PUT", "PATCH", "DELETE"],
-		inputValue: "/fhir/Patient",
+		method: "POST",
+		path: "/fhir/Patient",
 	},
 	render: (args) => <RequestLineEditorWrapper {...args} />,
 };
 
 export const PUT: Story = {
 	args: {
-		selectedMethod: "PUT",
-		methods: ["GET", "POST", "PUT", "PATCH", "DELETE"],
-		inputValue: "/fhir/Patient",
+		method: "PUT",
+		path: "/fhir/Patient",
 	},
 	render: (args) => <RequestLineEditorWrapper {...args} />,
 };
 
 export const PATCH: Story = {
 	args: {
-		selectedMethod: "PATCH",
-		methods: ["GET", "POST", "PUT", "PATCH", "DELETE"],
-		inputValue: "/fhir/Patient",
+		method: "PATCH",
+		path: "/fhir/Patient",
 	},
 	render: (args) => <RequestLineEditorWrapper {...args} />,
 };
 
 export const DELETE: Story = {
 	args: {
-		selectedMethod: "DELETE",
-		methods: ["GET", "POST", "PUT", "PATCH", "DELETE"],
-		inputValue: "/fhir/Patient",
+		method: "DELETE",
+		path: "/fhir/Patient",
 	},
 	render: (args) => <RequestLineEditorWrapper {...args} />,
 };

package/src/components/request-line-editor.tsx

@@ -1,4 +1,6 @@
+import { cva } from "class-variance-authority";
 import type * as React from "react";
+import { toast } from "sonner";
 import { Input } from "#shadcn/components/ui/input";
 import {
 	Select,
@@ -10,63 +12,68 @@ import {
 import { cn } from "#shadcn/lib/utils";
 import { CopyIcon } from "./copy-icon";
 
-interface RequestLineEditorProps extends React.ComponentProps<"div"> {
-	selectedMethod: string;
-	setMethod: (value: string) => void;
-	methods: string[];
-	inputValue?: string | undefined;
-	onInputChange?: React.ChangeEventHandler<HTMLInputElement>;
-}
+const METHODS = ["GET", "POST", "PUT", "PATCH", "DELETE"] as const;
+type RequestMethod = (typeof METHODS)[number];
 
-const METHOD_COLORS = {
-	GET: {
-		text: "text-[#6D9F0F] [&_svg]:text-[#6D9F0F]!",
-		background: "bg-green-200",
-		border:
-			"border-fg-success-secondary! hover:border-fg-success-secondary ring-green-200!",
-	},
-	POST: {
-		text: "text-yellow-600 [&_svg]:text-yellow-600!",
-		background: "bg-yellow-200",
-		border: "border-[#F4CB00]! hover:border-[#F4CB00] ring-yellow-200!",
-	},
-	PUT: {
-		text: "text-blue-500 [&_svg]:text-blue-500!",
-		background: "bg-blue-200",
-		border: "border-blue-400! hover:border-blue-400 ring-blue-200!",
-	},
-	PATCH: {
-		text: "text-violet-600 [&_svg]:text-violet-600",
-		background: "bg-violet-200",
-		border: "border-violet-400! hover:border-violet-400 ring-violet-200!",
-	},
-	DELETE: {
-		text: "text-red-600 [&_svg]:text-red-600!",
-		background: "bg-red-200",
-		border: "border-red-300! hover:border-red-300 ring-red-200!",
+const requestMethodVariants = cva<{ method: { [K in RequestMethod]: string } }>(
+	cn(
+		"cursor-pointer",
+		"border-r-0",
+		"rounded-r-none",
+		"shadow-none",
+		"typo-label",
+		"text-left",
+		"items-center",
+		"w-26",
+		// Focus states
+		"focus-visible:ring-3",
+		"focus-visible:ring-ring-blue",
+		"focus-visible:border-border-link",
+	),
+	{
+		variants: {
+			method: {
+				GET: "text-utility-green [&_svg]:text-utility-green",
+				POST: "text-utility-yellow [&_svg]:text-utility-yellow",
+				PUT: "text-utility-blue [&_svg]:text-utility-blue ",
+				PATCH: "text-utility-violet [&_svg]:text-utility-violet",
+				DELETE: "text-utility-red [&_svg]:text-utility-red",
+			},
+		},
 	},
+);
+
+type RequestMethodSelectorProps = {
+	value: string;
+	onValueChange?: (newMethod: string) => void;
 };
 
+function isKnownMethod(candidate: string): candidate is RequestMethod {
+	const methods: readonly string[] = METHODS;
+	return methods.includes(candidate);
+}
+
 function RequestMethodSelector({
-	selectedMethod,
-	setMethod,
-	methods,
-}: RequestLineEditorProps) {
+	value,
+	onValueChange,
+}: RequestMethodSelectorProps) {
 	return (
-		<Select value={selectedMethod} onValueChange={setMethod}>
+		<Select
+			value={value}
+			{...(onValueChange ? { onValueChange: onValueChange } : {})}
+		>
 			<SelectTrigger
-				className={`min-w-26 border-r-0 rounded-r-none shadow-none ${METHOD_COLORS[selectedMethod as keyof typeof METHOD_COLORS].text} ${METHOD_COLORS[selectedMethod as keyof typeof METHOD_COLORS].background} ${METHOD_COLORS[selectedMethod as keyof typeof METHOD_COLORS].border}`}
+				className={requestMethodVariants(
+					isKnownMethod(value) ? { method: value } : undefined,
+				)}
 			>
-				<SelectValue />
+				<SelectValue>{value}</SelectValue>
 			</SelectTrigger>
 			<SelectContent>
-				{methods.map((method) => (
+				{METHODS.map((method) => (
 					<SelectItem key={method} value={method}>
-						<span
-							className={`${METHOD_COLORS[method as keyof typeof METHOD_COLORS].text}`}
-						>
-							{" "}
-							{method}{" "}
+						<span className={requestMethodVariants({ method: method })}>
+							{method}
 						</span>
 					</SelectItem>
 				))}
@@ -75,29 +82,64 @@ function RequestMethodSelector({
 	);
 }
 
+type RequestLineEditorProps = {
+	method: string;
+	placeholder?: string;
+	autoFocus?: boolean;
+	onMethodChange: (newMethod: string) => void;
+	path?: string | undefined;
+	onPathChange?: React.ChangeEventHandler<HTMLInputElement>;
+	className?: string;
+};
+
 function RequestLineEditor({
 	className,
-	selectedMethod,
-	setMethod,
-	methods,
-	inputValue,
-	onInputChange,
+	method,
+	onMethodChange,
+	path,
+	placeholder,
+	autoFocus,
+	onPathChange,
 }: RequestLineEditorProps) {
 	return (
 		<div className={cn("flex", className)}>
-			<RequestMethodSelector
-				selectedMethod={selectedMethod}
-				setMethod={setMethod}
-				methods={methods}
-			/>
+			<RequestMethodSelector value={method} onValueChange={onMethodChange} />
 			<Input
-				className={`rounded-l-none ${METHOD_COLORS[selectedMethod as keyof typeof METHOD_COLORS].border}`}
-				value={inputValue}
-				rightSlot={<CopyIcon text={`${selectedMethod} ${inputValue}`} />}
-				{...(onInputChange !== undefined ? { onChange: onInputChange } : {})}
+				className="rounded-l-none"
+				value={path}
+				autoFocus={autoFocus}
+				placeholder={placeholder}
+				rightSlot={
+					<CopyIcon
+						text={`${method} ${path}`}
+						tooltipText="Copy request line"
+						showToast={false}
+						onCopy={(text) => {
+							// Custom toast for request line
+							const truncatedText =
+								text.length > 30 ? `${text.slice(0, 30)}...` : text;
+							toast(
+								<div className="flex flex-col gap-1">
+									<span className="typo-body">Request line copied</span>
+									<span className="typo-code text-text-secondary">
+										{truncatedText}
+									</span>
+								</div>,
+								{
+									duration: 2000,
+								},
+							);
+						}}
+					/>
+				}
+				{...(onPathChange !== undefined ? { onChange: onPathChange } : {})}
 			/>
 		</div>
 	);
 }
 
-export { RequestLineEditor, type RequestLineEditorProps, METHOD_COLORS };
+export {
+	RequestLineEditor,
+	type RequestLineEditorProps,
+	requestMethodVariants,
+};

package/src/components/sandbox.stories.tsx

@@ -0,0 +1,131 @@
+import { Check, Copy } from "lucide-react";
+import { Sandbox } from "./sandbox";
+
+const meta = {
+	title: "Component/Sandbox",
+	component: Sandbox,
+	parameters: {
+		layout: "centered",
+	},
+	tags: ["autodocs"],
+	argTypes: {
+		url: {
+			control: "text",
+			description: "Display url",
+		},
+		showCopy: {
+			control: "boolean",
+			description: "Show the copy button",
+		},
+		showEye: {
+			control: "boolean",
+			description: "Show the eye button",
+		},
+		copyIcon: {
+			control: false,
+			description: "Show the copy icon",
+		},
+		tooltipText: {
+			control: "text",
+			description: "Copy button tooltip text",
+		},
+		showToast: {
+			control: "boolean",
+			description: "Show toast on copy",
+		},
+		onCopy: {
+			action: "copied",
+			description: "Successful copy callback",
+		},
+	},
+};
+
+export default meta;
+
+export const Default = {
+	args: {
+		url: "http://localhost:8080/fhir",
+		showCopy: true,
+		showEye: true,
+		copyIcon: <Copy />,
+		tooltipText: "Copy URL",
+		showToast: true,
+	},
+};
+
+export const LongUrl = {
+	args: {
+		url: "https://very-long-domain-name-that-should-be-truncated.example.com/api/v1/very-long-endpoint-name",
+		showCopy: true,
+		showEye: true,
+		copyIcon: <Copy />,
+		tooltipText: "Copy URL",
+		showToast: true,
+	},
+};
+
+export const WithoutCopy = {
+	args: {
+		url: "http://localhost:8080/fhir",
+		showCopy: false,
+		showEye: true,
+	},
+};
+
+export const CustomIcon = {
+	args: {
+		url: "http://localhost:8080/fhir",
+		showCopy: true,
+		showEye: true,
+		copyIcon: <Check />,
+		tooltipText: "Copy URL",
+		showToast: true,
+	},
+};
+
+export const CustomTooltip = {
+	args: {
+		url: "http://localhost:8080/fhir",
+		showCopy: true,
+		showEye: true,
+		copyIcon: <Copy />,
+		tooltipText: "Copy link",
+		showToast: true,
+	},
+};
+
+export const WithoutToast = {
+	args: {
+		url: "http://localhost:8080/fhir",
+		showCopy: true,
+		showEye: true,
+		copyIcon: <Copy />,
+		tooltipText: "Copy URL",
+		showToast: false,
+	},
+};
+
+export const WithCallback = {
+	args: {
+		url: "http://localhost:8080/fhir",
+		showCopy: true,
+		showEye: true,
+		copyIcon: <Copy />,
+		tooltipText: "Copy URL",
+		showToast: true,
+		onCopy: (text: string) => {
+			console.log("Copied:", text);
+		},
+	},
+};
+
+export const WithoutEye = {
+	args: {
+		url: "http://localhost:8080/fhir",
+		showCopy: true,
+		showEye: false,
+		copyIcon: <Copy />,
+		tooltipText: "Copy URL",
+		showToast: true,
+	},
+};