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

package/src/components/fhir-structure-view.tsx

@@ -0,0 +1,233 @@
+import type { ItemInstance } from "@headless-tree/core";
+import React from "react";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "#shadcn/components/ui/tooltip";
+import { cn } from "#shadcn/lib/utils.js";
+import * as CustomIcon from "../icons";
+import { TreeView, type TreeViewItem } from "./tree-view";
+
+type PackageSpec = {
+	name: string;
+	version: string;
+};
+
+type Coordinate = {
+	id?: string;
+	packageSpec?: PackageSpec;
+	"package-spec"?: PackageSpec;
+	label?: string;
+};
+
+type FhirStructure = {
+	type?: string;
+	min?: string | number;
+	max?: string | number;
+	lastNode?: boolean;
+	isSummary?: boolean;
+	isModifier?: boolean;
+	mustSupport?: boolean;
+	datatype?: string;
+	short?: string;
+	desc?: string;
+	extensionUrl?: string;
+	extensionCoordinate?: Coordinate;
+	binding?: {
+		valueSet: string;
+	};
+	vsCoordinate?: Coordinate;
+};
+
+function FiledIcon(item: ItemInstance<TreeViewItem<FhirStructure>>) {
+	const filedType = item.getItemData()?.meta?.type;
+
+	switch (filedType) {
+		case "Resource":
+			return <CustomIcon.ResourceIcon />;
+		case "BackboneElement":
+			return <CustomIcon.BackboneElementIcon />;
+		case "Extension":
+			return <CustomIcon.ExtensionIcon />;
+		case "Reference":
+			return <CustomIcon.ReferenceIcon />;
+		case "union":
+			return <CustomIcon.UnionIcon />;
+		case "instant":
+		case "time":
+		case "date":
+		case "dateTime":
+		case "decimal":
+		case "boolean":
+		case "integer":
+		case "string":
+		case "uri":
+		case "base64Binary":
+		case "code":
+		case "id":
+		case "oid":
+		case "unsignedInt":
+		case "positiveInt":
+		case "markdown":
+		case "url":
+		case "canonical":
+		case "uuid":
+		case "integer64":
+			return <CustomIcon.TypCodeIcon />;
+		default:
+			return <CustomIcon.ComplexTypeIcon />;
+	}
+}
+
+const customItemFieldNameClass = cn(
+	"flex",
+	"items-center",
+	"truncate",
+	"gap-2",
+	"min-w-[calc(260px-var(--tree-padding))]",
+	"w-[calc(260px-var(--tree-padding))]",
+	"in-data-[folder=true]:w-[calc(260px-var(--tree-padding))]",
+	"in-data-[folder=true]:min-w-[calc(260px-var(--tree-padding))]",
+);
+
+function customItemView(item: ItemInstance<TreeViewItem<FhirStructure>>) {
+	const fieldName = item.getItemData()?.name;
+	const cardinalityMin = item.getItemData()?.meta?.min;
+	const cardinalityMax = item.getItemData()?.meta?.max;
+	const isSummary = item.getItemData()?.meta?.isSummary;
+	const isModifier = item.getItemData()?.meta?.isModifier;
+	const mustSupport = item.getItemData()?.meta?.mustSupport;
+	const datatype = item.getItemData()?.meta?.type;
+	const short = item.getItemData()?.meta?.short;
+	const desc = item.getItemData()?.meta?.desc;
+	const extensionUrl = item.getItemData()?.meta?.extensionUrl;
+	const extensionCoordinate = item.getItemData()?.meta?.extensionCoordinate;
+	const binding = item.getItemData()?.meta?.binding;
+	const vsCoordinate = item.getItemData()?.meta?.vsCoordinate;
+	return (
+		<div className="flex items-start gap-2 text-xs">
+			<div className={customItemFieldNameClass}>
+				{FiledIcon(item)}
+				{fieldName}
+			</div>
+
+			<div className="flex items-center gap-1 min-w-[60px] w-[60px]">
+				{mustSupport && (
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<span className="px-[2px] max-h-[20px] text-white bg-red-600 rounded cursor-help">
+								S
+							</span>
+						</TooltipTrigger>
+						<TooltipContent>
+							<p>Must be supported</p>
+						</TooltipContent>
+					</Tooltip>
+				)}
+				{isSummary && (
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<span className="px-[2px] max-h-[20px] cursor-help">Σ</span>
+						</TooltipTrigger>
+						<TooltipContent>
+							<p>Part of the summary set</p>
+						</TooltipContent>
+					</Tooltip>
+				)}
+				{isModifier && (
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<span className="px-[2px] max-h-[20px] cursor-help">!?</span>
+						</TooltipTrigger>
+						<TooltipContent>
+							<p>Modifying element</p>
+						</TooltipContent>
+					</Tooltip>
+				)}
+			</div>
+			<div className="flex items-center gap-1 min-w-[50px] w-[50px] typo-code">
+				{cardinalityMin && cardinalityMax
+					? `${cardinalityMin}..${cardinalityMax}`
+					: ""}
+			</div>
+			<div className="flex gap-1 w-[200px] min-w-[200px]">
+				{datatype !== "union" && datatype}
+			</div>
+			<div className="text-left overflow-hidden">
+				{short && <div className="line-clamp-2">{short}</div>}
+				{!short && desc && <div className="line-clamp-2">{desc}</div>}
+				{extensionUrl && (
+					<div className="flex items-center gap-1">
+						<span>URL:</span>
+						{extensionCoordinate?.id ? (
+							<a
+								href={`#/ig/${extensionCoordinate?.["package-spec"]?.name || extensionCoordinate?.packageSpec?.name}#${extensionCoordinate?.["package-spec"]?.version || extensionCoordinate?.packageSpec?.version}/sd/${extensionCoordinate?.id}`}
+								className="font-medium hover:underline"
+							>
+								{extensionCoordinate?.label || extensionUrl}
+							</a>
+						) : (
+							<span className="font-medium">
+								{extensionCoordinate?.label || extensionUrl}
+							</span>
+						)}
+					</div>
+				)}
+				{binding && (
+					<div className="flex items-center gap-1">
+						<span>Binding:</span>
+						{vsCoordinate?.id ? (
+							<a
+								href={`#/ig/${vsCoordinate?.["package-spec"]?.name || vsCoordinate?.packageSpec?.name}#${vsCoordinate?.["package-spec"]?.version || vsCoordinate?.packageSpec?.version}/vs/${vsCoordinate?.id}`}
+								className="font-medium hover:underline"
+							>
+								{vsCoordinate?.label || binding?.valueSet || "Binding"}
+							</a>
+						) : (
+							<span className="font-medium">
+								{vsCoordinate?.label || binding?.valueSet || "Binding"}
+							</span>
+						)}
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
+
+function FhirStructureView({
+	tree,
+}: {
+	tree: Record<string, TreeViewItem<FhirStructure>>;
+}) {
+	const expandedItemIds = React.useMemo(() => {
+		return Object.keys(tree ?? {});
+	}, [tree]);
+
+	return (
+		<div className="min-h-0 min-w-0">
+			<div className="flex items-center gap-2 font-semibold text-xs text-text-secondary border-b py-2 pl-[34px] bg-bg-primary sticky top-0 z-20">
+				<div className="min-w-[260px] w-[260px]">Name</div>
+				<div className="min-w-[60px] w-[60px]">Flags</div>
+				<div className="min-w-[50px] w-[50px]">Card.</div>
+				<div className="min-w-[200px] w-[200px]">Type</div>
+				<div className="flex-1">Description</div>
+			</div>
+			<TreeView
+				focusedItem={null}
+				onFocusedItemChange={() => {}}
+				hideChevron={false}
+				horizontalLines={true}
+				disableHover={true}
+				zebra={true}
+				rootItemId="root"
+				items={tree}
+				customItemView={customItemView}
+				defaultExpandedItems={expandedItemIds}
+			/>
+		</div>
+	);
+}
+
+export { FhirStructureView, type FhirStructure };

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

@@ -0,0 +1,86 @@
+import { Controls, Primary, Title } from "@storybook/addon-docs/blocks";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+	AlignLeft,
+	Copy,
+	Download,
+	Edit,
+	Settings,
+	Trash2,
+} from "lucide-react";
+import { IconButton } from "./icon-button";
+
+const meta = {
+	title: "Component/IconButton",
+	component: IconButton,
+	parameters: {
+		docs: {
+			page: () => (
+				<>
+					<Title />
+					<Primary />
+					<Controls />
+				</>
+			),
+		},
+	},
+	argTypes: {
+		variant: {
+			control: "select",
+			options: ["ghost", "link"],
+		},
+		disabled: {
+			control: "boolean",
+		},
+	},
+	args: {
+		icon: <Copy />,
+		"aria-label": "Copy",
+		variant: "ghost",
+		disabled: false,
+	},
+} satisfies Meta<typeof IconButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	tags: ["!dev"],
+	render: (args) => <IconButton {...args} />,
+};
+
+export const Demo: Story = {
+	tags: ["!autodocs"],
+	render: () => (
+		<div className="flex flex-col gap-4">
+			<div className="flex items-center gap-4">
+				<span className="w-16 typo-body text-text-secondary">Ghost:</span>
+				<IconButton icon={<Copy />} aria-label="Copy" variant="ghost" />
+				<IconButton icon={<Edit />} aria-label="Edit" variant="ghost" />
+				<IconButton icon={<Trash2 />} aria-label="Delete" variant="ghost" />
+				<IconButton icon={<Download />} aria-label="Download" variant="ghost" />
+				<IconButton icon={<Settings />} aria-label="Settings" variant="ghost" />
+				<IconButton icon={<AlignLeft />} aria-label="Align" variant="ghost" />
+			</div>
+			<div className="flex items-center gap-4">
+				<span className="w-16 typo-body text-text-secondary">Link:</span>
+				<IconButton icon={<Copy />} aria-label="Copy" variant="link" />
+				<IconButton icon={<Edit />} aria-label="Edit" variant="link" />
+				<IconButton icon={<Trash2 />} aria-label="Delete" variant="link" />
+				<IconButton icon={<Download />} aria-label="Download" variant="link" />
+				<IconButton icon={<Settings />} aria-label="Settings" variant="link" />
+				<IconButton icon={<AlignLeft />} aria-label="Align" variant="link" />
+			</div>
+			<div className="flex items-center gap-4">
+				<span className="w-16 typo-body text-text-secondary">Disabled:</span>
+				<IconButton
+					icon={<Copy />}
+					aria-label="Copy"
+					variant="ghost"
+					disabled
+				/>
+				<IconButton icon={<Copy />} aria-label="Copy" variant="link" disabled />
+			</div>
+		</div>
+	),
+};

package/src/components/icon-button.tsx

@@ -0,0 +1,57 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type React from "react";
+import { buttonVariants } from "#shadcn/components/ui/button";
+import { cn } from "#shadcn/lib/utils";
+
+// Styles
+const iconButtonBaseStyles = cn(
+	// Size
+	"size-6",
+	// Spacing
+	"p-0",
+	// SVG
+	"[&>svg]:size-4",
+	"[&>svg]:pointer-events-none",
+	"[&>svg]:shrink-0",
+);
+
+const iconButtonVariants = cva(iconButtonBaseStyles, {
+	variants: {
+		variant: {
+			ghost: buttonVariants({ variant: "ghost", size: "small" }),
+			link: buttonVariants({ variant: "link", size: "small" }),
+		},
+	},
+	defaultVariants: {
+		variant: "ghost",
+	},
+});
+
+// Interface
+export interface IconButtonProps
+	extends Omit<React.ComponentProps<"button">, "children">,
+		VariantProps<typeof iconButtonVariants> {
+	icon: React.ReactNode;
+	"aria-label": string;
+}
+
+// Component
+function IconButton({
+	icon,
+	className,
+	variant = "ghost",
+	...props
+}: IconButtonProps) {
+	return (
+		<button
+			type="button"
+			data-slot="icon-button"
+			className={cn(iconButtonVariants({ variant }), className)}
+			{...props}
+		>
+			{icon}
+		</button>
+	);
+}
+
+export { IconButton, iconButtonVariants };

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

@@ -0,0 +1,163 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { OperationOutcomeView } from "./operation-outcome-view";
+
+const meta = {
+	title: "Component/OperationOutcomeView",
+	component: OperationOutcomeView,
+	parameters: {
+		layout: "padded",
+	},
+} satisfies Meta<typeof OperationOutcomeView>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	args: {
+		resource: {
+			resourceType: "OperationOutcome",
+			issue: [
+				{
+					code: "invalid",
+					severity: "error",
+					diagnostics: "Unknown key:",
+					expression: ['"communication"'],
+				},
+				{
+					code: "invalid",
+					severity: "error",
+					diagnostics: "Unknown key:",
+					expression: ['"address"'],
+				},
+				{
+					code: "invalid",
+					severity: "error",
+					diagnostics: "Unknown key:",
+					expression: ['"temp1"'],
+				},
+				{
+					code: "invalid",
+					severity: "error",
+					diagnostics: "Unknown key:",
+					expression: ['"temp2"'],
+				},
+			],
+		},
+	},
+};
+
+export const Demo: Story = {
+	tags: ["!autodocs"],
+	args: Default.args,
+	render: () => (
+		<div className="flex flex-col gap-6">
+			<div>
+				<h3 className="typo-h4 mb-2">Errors only</h3>
+				<OperationOutcomeView
+					resource={{
+						resourceType: "OperationOutcome",
+						issue: [
+							{
+								code: "invalid",
+								severity: "error",
+								diagnostics: "Unknown key:",
+								expression: ['"communication"'],
+							},
+							{
+								code: "invalid",
+								severity: "error",
+								diagnostics: "Unknown key:",
+								expression: ['"address"'],
+							},
+						],
+					}}
+				/>
+			</div>
+
+			<div>
+				<h3 className="typo-h4 mb-2">Warnings only</h3>
+				<OperationOutcomeView
+					resource={{
+						resourceType: "OperationOutcome",
+						issue: [
+							{
+								code: "business-rule",
+								severity: "warning",
+								diagnostics: "Resource has no narrative text",
+								expression: ["Patient.text"],
+							},
+							{
+								code: "informational",
+								severity: "warning",
+								diagnostics: "Best practice violation",
+								expression: ["Patient.contact"],
+							},
+						],
+					}}
+				/>
+			</div>
+
+			<div>
+				<h3 className="typo-h4 mb-2">Mixed severities</h3>
+				<OperationOutcomeView
+					resource={{
+						resourceType: "OperationOutcome",
+						issue: [
+							{
+								code: "structure",
+								severity: "fatal",
+								diagnostics: "Invalid JSON",
+							},
+							{
+								code: "invalid",
+								severity: "error",
+								diagnostics: "Unknown key:",
+								expression: ['"temp1"'],
+							},
+							{
+								code: "invalid",
+								severity: "error",
+								diagnostics: "Unknown key:",
+								expression: ['"temp2"'],
+							},
+							{
+								code: "business-rule",
+								severity: "warning",
+								diagnostics: "Missing preferred field",
+								expression: ["Patient.name.given"],
+							},
+							{
+								code: "informational",
+								severity: "information",
+								diagnostics: "Validation completed with issues",
+							},
+						],
+					}}
+				/>
+			</div>
+
+			<div>
+				<h3 className="typo-h4 mb-2">With multiple expressions</h3>
+				<OperationOutcomeView
+					resource={{
+						resourceType: "OperationOutcome",
+						issue: [
+							{
+								code: "required",
+								severity: "error",
+								diagnostics: "Missing required element",
+								expression: ["Patient.identifier", "Patient.name"],
+							},
+							{
+								code: "value",
+								severity: "error",
+								diagnostics: "Invalid date format",
+								expression: ["Patient.birthDate"],
+							},
+						],
+					}}
+				/>
+			</div>
+		</div>
+	),
+};