@health-samurai/react-components 0.0.0-alpha.4 → 0.0.0-alpha.6

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

@@ -0,0 +1,231 @@
+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;
+	max?: string;
+	lastNode?: boolean;
+	isSummary?: boolean;
+	isModifier?: boolean;
+	mustSupport?: boolean;
+	datatype?: string;
+	short?: string;
+	desc?: string;
+	extensionUrl?: string;
+	extensionCoordinate?: Coordinate;
+	binding?: {
+		valueSet: string;
+	};
+	vsCoordinate?: Coordinate;
+};
+
+const FiledIcon = (item: ItemInstance<TreeViewItem<FhirStructure>>) => {
+	const filedType = item.getItemData()?.meta?.type;
+
+	switch (filedType) {
+		case "Resource":
+			return <CustomIcon.ResourceIcon />;
+		case "BackboneElement":
+			return <CustomIcon.BackoneElementIcon />;
+		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))]",
+);
+
+const 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">
+			<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>
+	);
+};
+
+const FhirStructureView = ({
+	tree,
+}: {
+	tree: Record<string, TreeViewItem<FhirStructure>>;
+}) => {
+	const expandedItemIds = React.useMemo(() => {
+		return Object.keys(tree ?? {});
+	}, [tree]);
+
+	return (
+		<div className="flex flex-col h-full">
+			<div className="flex items-center gap-2 font-semibold text-text-secondary border-b pb-2 bg-bg-primary sticky top-0 z-10">
+				<div className="min-w-[260px] w-[260px] ml-9">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="min-w-[200px] w-[200px]">Description</div>
+			</div>
+			<div className="flex-1 overflow-auto">
+				<TreeView
+					hideChevron={true}
+					horizontalLines={true}
+					disableHover={true}
+					zebra={true}
+					rootItemId="root"
+					items={tree}
+					customItemView={customItemView}
+					expandedItemIds={expandedItemIds}
+				/>
+			</div>
+		</div>
+	);
+};
+
+export { FhirStructureView, type FhirStructure };

package/src/components/patient-table.stories.tsx

@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { PatientTable, type PatientTableProps } from "./patient-table";
+
+// Интерфейс для Storybook контролов (расширяем основные пропсы)
+interface PatientTableStoryProps extends PatientTableProps {
+	// Добавляем дополнительные контролы если нужно
+}
+
+// Компонент обертка для Stories (аналогично InputWithLabel)
+function PatientTableWithStory({
+	page = 1,
+	count = 10,
+	showFilters = true,
+	showSorting = true,
+	enableColumnResizing = false,
+	enableColumnReordering = false,
+	enableColumnPinning = false,
+	showPinningMenu = true,
+	columnWidths,
+	columnConfigs,
+}: PatientTableStoryProps) {
+	return (
+		<PatientTable
+			page={page}
+			count={count}
+			showFilters={showFilters}
+			showSorting={showSorting}
+			enableColumnResizing={enableColumnResizing}
+			enableColumnReordering={enableColumnReordering}
+			enableColumnPinning={enableColumnPinning}
+			showPinningMenu={showPinningMenu}
+			{...(columnWidths && { columnWidths })}
+			{...(columnConfigs && { columnConfigs })}
+		/>
+	);
+}
+
+const meta = {
+	title: "Component/PatientTable",
+	component: PatientTableWithStory,
+	parameters: {
+		layout: "padded",
+	},
+	tags: ["autodocs"],
+	argTypes: {
+		page: { control: { type: "number", min: 1 } },
+		count: { control: { type: "number", min: 1, max: 100 } },
+		showFilters: { control: "boolean" },
+		showSorting: { control: "boolean" },
+		enableColumnResizing: { control: "boolean" },
+		enableColumnReordering: { control: "boolean" },
+		enableColumnPinning: { control: "boolean" },
+		showPinningMenu: { control: "boolean" },
+		columnWidths: { control: "object" },
+		columnConfigs: { control: "object" },
+	},
+} satisfies Meta<typeof PatientTableWithStory>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default = {
+	args: {
+		page: 1,
+		count: 10,
+		showFilters: true,
+		showSorting: true,
+		enableColumnResizing: true,
+	},
+} satisfies Story;
+
+export const Aidbox = {
+	args: {
+		page: 1,
+		count: 10,
+		showFilters: true,
+		showSorting: true,
+		enableColumnResizing: true,
+		enableColumnReordering: true,
+		enableColumnPinning: true,
+		showPinningMenu: true,
+		columnConfigs: [
+			{ key: "firstName", label: "First Name", width: "160px" },
+			{ key: "lastName", label: "Last Name", width: "150px" },
+			{ key: "id", label: "Patient ID", width: "160px", type: "code" },
+			{ key: "birthDate", label: "Birth Date", width: "150px" },
+			{ key: "phoneNumber", label: "Phone Number", width: "200px" },
+			{ key: "email", label: "Email Address", width: "250px" },
+			{ key: "gender", label: "Gender", width: "120px" },
+			{ key: "street", label: "Street", width: "200px" },
+			{ key: "city", label: "City", width: "120px" },
+			{ key: "state", label: "State", width: "120px" },
+			{ key: "zip", label: "ZIP", width: "120px" },
+			{ key: "encounters", label: "Visits", width: "110px", rightAlign: true },
+			{
+				key: "actions",
+				label: "Actions",
+				width: "90px",
+				fixed: true,
+				type: "button",
+				actions: [
+					{
+						label: "Match",
+						onClick: (id) => console.log("Match patient:", id),
+						variant: "secondary",
+					},
+				],
+			},
+		],
+	},
+} satisfies Story;