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

package/src/components/copy-icon.tsx

@@ -1,17 +1,53 @@
 import { Check, Copy } from "lucide-react";
 import * as React from "react";
+import { toast } from "sonner";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "#shadcn/components/ui/tooltip";
 
 interface CopyIconProps {
 	text: string;
+	showTooltip?: boolean;
+	tooltipText?: string;
+	showToast?: boolean;
+	onCopy?: (text: string) => void;
 }
 
-function CopyIcon({ text }: CopyIconProps) {
+function CopyIcon({
+	text,
+	showTooltip = true,
+	tooltipText = "Copy",
+	showToast = true,
+	onCopy,
+	...props
+}: CopyIconProps) {
 	const [isActive, setIsActive] = React.useState(false);
 
 	async function handleClick() {
 		try {
 			await navigator.clipboard.writeText(text);
 			setIsActive(true);
+
+			if (showToast) {
+				const truncatedText =
+					text.length > 30 ? `${text.slice(0, 30)}...` : text;
+				toast(
+					<div className="flex flex-col gap-1">
+						<span className="typo-body">Successfully copied</span>
+						<span className="typo-code text-text-secondary">
+							{truncatedText}
+						</span>
+					</div>,
+					{
+						duration: 2000,
+					},
+				);
+			}
+
+			onCopy?.(text);
+
 			setTimeout(() => {
 				setIsActive(false);
 			}, 1000);
@@ -20,11 +56,29 @@ function CopyIcon({ text }: CopyIconProps) {
 		}
 	}
 
-	return (
-		<button type="button" onClick={handleClick} style={{ cursor: "pointer" }}>
+	const button = (
+		<button
+			{...props}
+			type="button"
+			onClick={handleClick}
+			style={{ cursor: "pointer" }}
+		>
 			{isActive ? <Check /> : <Copy />}
 		</button>
 	);
+
+	if (!showTooltip) {
+		return button;
+	}
+
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>{button}</TooltipTrigger>
+			<TooltipContent>
+				<p>{tooltipText}</p>
+			</TooltipContent>
+		</Tooltip>
+	);
 }
 
 export { CopyIcon };

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

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { DataTable, type DataTableProps } from "./data-table";
+
+const meta: Meta<typeof DataTable> = {
+	title: "Component/Data table",
+	component: DataTable,
+	tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof DataTable>;
+
+function DataTableWrapper<TData, TValue>({
+	columns,
+	data,
+}: DataTableProps<TData, TValue>) {
+	return <DataTable columns={columns} data={data} />;
+}
+
+export const Default: Story = {
+	args: {
+		columns: [
+			{
+				header: "Name",
+				accessorKey: "name",
+			},
+			{
+				header: "Age",
+				accessorKey: "age",
+			},
+		],
+		data: [{ name: "John Doe", age: 30 }],
+	},
+	parameters: {
+		layout: "fullscreen",
+	},
+	render: (args) => <DataTableWrapper {...args} />,
+};

package/src/components/data-table.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import {
+	type ColumnDef,
+	flexRender,
+	getCoreRowModel,
+	useReactTable,
+} from "@tanstack/react-table";
+
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "../shadcn/components/ui/table";
+
+export interface DataTableProps<TData, TValue> {
+	columns: ColumnDef<TData, TValue>[];
+	data: TData[];
+}
+
+export function DataTable<TData, TValue>({
+	columns,
+	data,
+}: DataTableProps<TData, TValue>) {
+	const table = useReactTable({
+		data,
+		columns,
+		getCoreRowModel: getCoreRowModel(),
+		columnResizeMode: "onChange",
+		enableColumnResizing: true,
+	});
+
+	return (
+		<div className="overflow-hidden w-full">
+			<Table className="w-full">
+				<TableHeader>
+					{table.getHeaderGroups().map((headerGroup) => (
+						<TableRow key={headerGroup.id}>
+							{headerGroup.headers.map((header) => {
+								return (
+									<TableHead
+										key={header.id}
+										className="relative group border"
+										style={{
+											width:
+												header.column.getIndex() ===
+												headerGroup.headers.length - 1
+													? "w-full"
+													: header.getSize(),
+										}}
+									>
+										{header.isPlaceholder
+											? null
+											: flexRender(
+													header.column.columnDef.header,
+													header.getContext(),
+												)}
+										{header.column.getCanResize() && (
+											<div
+												{...{
+													onMouseDown: header.getResizeHandler(),
+													onTouchStart: header.getResizeHandler(),
+													className: `hidden group-hover:block absolute top-0 right-0 h-full w-1 bg-border-secondary cursor-col-resize hover:bg-border-secondary`,
+													style: {
+														userSelect: "none",
+														touchAction: "none",
+													},
+												}}
+											/>
+										)}
+									</TableHead>
+								);
+							})}
+						</TableRow>
+					))}
+				</TableHeader>
+				<TableBody>
+					{table.getRowModel().rows?.length ? (
+						table.getRowModel().rows.map((row) => (
+							<TableRow
+								key={row.id}
+								data-state={row.getIsSelected() && "selected"}
+							>
+								{row.getVisibleCells().map((cell) => (
+									<TableCell
+										className="border"
+										key={cell.id}
+										style={{
+											width:
+												cell.column.getIndex() ===
+												row.getVisibleCells().length - 1
+													? "w-full"
+													: cell.column.getSize(),
+										}}
+									>
+										{flexRender(cell.column.columnDef.cell, cell.getContext())}
+									</TableCell>
+								))}
+							</TableRow>
+						))
+					) : (
+						<TableRow>
+							<TableCell colSpan={columns.length} className="h-24 text-center">
+								No results.
+							</TableCell>
+						</TableRow>
+					)}
+				</TableBody>
+			</Table>
+		</div>
+	);
+}
+
+export type { ColumnDef };

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

@@ -0,0 +1,439 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { type FhirStructure, FhirStructureView } from "./fhir-structure-view";
+import type { TreeViewItem } from "./tree-view";
+
+const meta: Meta<typeof FhirStructureView> = {
+	title: "Component/FHIRStructureView",
+	component: FhirStructureView,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FhirStructureView>;
+
+const tree: Record<string, TreeViewItem<FhirStructure>> = {
+	root: {
+		name: "Root",
+		children: ["Patient"],
+	},
+	Patient: {
+		name: "Patient",
+		meta: {
+			type: "Resource",
+			min: "0",
+			max: "*",
+			desc: "Information about an individual or animal receiving health care services",
+		},
+		children: [
+			"Patient.id",
+			"Patient.meta",
+			"Patient.implicitRules",
+			"Patient.language",
+			"Patient.text",
+			"Patient.contained",
+			"Patient.extension",
+			"Patient.modifierExtension",
+			"Patient.identifier",
+			"Patient.active",
+			"Patient.name",
+			"Patient.telecom",
+			"Patient.gender",
+			"Patient.birthDate",
+			"Patient.deceased",
+			"Patient.address",
+			"Patient.maritalStatus",
+			"Patient.multipleBirth",
+			"Patient.photo",
+			"Patient.contact",
+			"Patient.communication",
+			"Patient.generalPractitioner",
+			"Patient.managingOrganization",
+			"Patient.link",
+		],
+	},
+	"Patient.id": {
+		name: "id",
+		meta: {
+			type: "id",
+			min: "0",
+			max: "1",
+			isSummary: true,
+			desc: "Logical id of this artifact",
+		},
+	},
+	"Patient.meta": {
+		name: "meta",
+		meta: {
+			type: "Meta",
+			min: "0",
+			max: "1",
+			isSummary: true,
+			desc: "Metadata about the resource",
+		},
+	},
+	"Patient.implicitRules": {
+		name: "implicitRules",
+		meta: {
+			type: "uri",
+			min: "0",
+			max: "1",
+			isSummary: true,
+			isModifier: true,
+			desc: "A set of rules under which this content was created",
+		},
+	},
+	"Patient.language": {
+		name: "language",
+		meta: {
+			type: "code",
+			min: "0",
+			max: "1",
+			desc: "Language of the resource content",
+		},
+	},
+	"Patient.text": {
+		name: "text",
+		meta: {
+			type: "Narrative",
+			min: "0",
+			max: "1",
+			desc: "Text summary of the resource, for human interpretation",
+		},
+	},
+	"Patient.contained": {
+		name: "contained",
+		meta: {
+			type: "Resource",
+			min: "0",
+			max: "*",
+			desc: "Contained, inline Resources",
+		},
+	},
+	"Patient.extension": {
+		name: "extension",
+		meta: {
+			type: "Extension",
+			min: "0",
+			max: "*",
+			desc: "Additional content defined by implementations",
+		},
+	},
+	"Patient.modifierExtension": {
+		name: "modifierExtension",
+		meta: {
+			type: "Extension",
+			min: "0",
+			max: "*",
+			isSummary: true,
+			isModifier: true,
+			desc: "Extensions that cannot be ignored",
+		},
+	},
+	"Patient.identifier": {
+		name: "identifier",
+		meta: {
+			type: "Identifier",
+			min: "0",
+			max: "*",
+			isSummary: true,
+			desc: "An identifier for this patient",
+		},
+	},
+	"Patient.active": {
+		name: "active",
+		meta: {
+			type: "boolean",
+			min: "0",
+			max: "1",
+			isSummary: true,
+			isModifier: true,
+			desc: "Whether this patient's record is in active use",
+		},
+	},
+	"Patient.name": {
+		name: "name",
+		meta: {
+			type: "HumanName",
+			min: "0",
+			max: "*",
+			isSummary: true,
+			desc: "A name associated with the patient",
+		},
+	},
+	"Patient.telecom": {
+		name: "telecom",
+		meta: {
+			type: "ContactPoint",
+			min: "0",
+			max: "*",
+			isSummary: true,
+			desc: "A contact detail for the individual",
+		},
+	},
+	"Patient.gender": {
+		name: "gender",
+		meta: {
+			type: "code",
+			min: "0",
+			max: "1",
+			isSummary: true,
+			desc: "male | female | other | unknown",
+		},
+	},
+	"Patient.birthDate": {
+		name: "birthDate",
+		meta: {
+			type: "date",
+			min: "0",
+			max: "1",
+			isSummary: true,
+			desc: "The date of birth for the individual",
+		},
+	},
+	"Patient.deceased": {
+		name: "deceased[x]",
+		meta: {
+			type: "union",
+			min: "0",
+			max: "1",
+			isSummary: true,
+			isModifier: true,
+			desc: "Indicates if the individual is deceased or not",
+		},
+		children: ["Patient.deceasedBoolean", "Patient.deceasedDateTime"],
+	},
+	"Patient.deceasedBoolean": {
+		name: "deceasedBoolean",
+		meta: {
+			type: "boolean",
+		},
+	},
+	"Patient.deceasedDateTime": {
+		name: "deceasedDateTime",
+		meta: {
+			type: "dateTime",
+			lastNode: true,
+		},
+	},
+	"Patient.address": {
+		name: "address",
+		meta: {
+			type: "Address",
+			min: "0",
+			max: "*",
+			isSummary: true,
+			desc: "An address for the individual",
+		},
+	},
+	"Patient.maritalStatus": {
+		name: "maritalStatus",
+		meta: {
+			type: "CodeableConcept",
+			min: "0",
+			max: "1",
+			desc: "Marital (civil) status of a patient",
+		},
+	},
+	"Patient.multipleBirth": {
+		name: "multipleBirth[x]",
+		meta: {
+			type: "union",
+			min: "0",
+			max: "1",
+			desc: "Whether patient is part of a multiple birth",
+		},
+		children: ["Patient.multipleBirthBoolean", "Patient.multipleBirthInteger"],
+	},
+	"Patient.multipleBirthBoolean": {
+		name: "multipleBirthBoolean",
+		meta: {
+			type: "boolean",
+		},
+	},
+	"Patient.multipleBirthInteger": {
+		name: "multipleBirthInteger",
+		meta: {
+			type: "integer",
+			lastNode: true,
+		},
+	},
+	"Patient.photo": {
+		name: "photo",
+		meta: {
+			type: "Attachment",
+			min: "0",
+			max: "*",
+			desc: "Image of the patient",
+		},
+	},
+	"Patient.contact": {
+		name: "contact",
+		meta: {
+			type: "BackboneElement",
+			min: "0",
+			max: "*",
+			desc: "A contact party (e.g. guardian, partner, friend) for the patient",
+		},
+		children: [
+			"Patient.contact.relationship",
+			"Patient.contact.name",
+			"Patient.contact.telecom",
+			"Patient.contact.address",
+			"Patient.contact.gender",
+			"Patient.contact.organization",
+			"Patient.contact.period",
+		],
+	},
+	"Patient.contact.relationship": {
+		name: "relationship",
+		meta: {
+			type: "CodeableConcept",
+			min: "0",
+			max: "*",
+			desc: "The kind of relationship",
+		},
+	},
+	"Patient.contact.name": {
+		name: "name",
+		meta: {
+			type: "HumanName",
+			min: "0",
+			max: "1",
+			desc: "A name associated with the contact person",
+		},
+	},
+	"Patient.contact.telecom": {
+		name: "telecom",
+		meta: {
+			type: "ContactPoint",
+			min: "0",
+			max: "*",
+			desc: "A contact detail for the person",
+		},
+	},
+	"Patient.contact.address": {
+		name: "address",
+		meta: {
+			type: "Address",
+			min: "0",
+			max: "1",
+			desc: "Address for the contact person",
+		},
+	},
+	"Patient.contact.gender": {
+		name: "gender",
+		meta: {
+			type: "code",
+			min: "0",
+			max: "1",
+			desc: "male | female | other | unknown",
+		},
+	},
+	"Patient.contact.organization": {
+		name: "organization",
+		meta: {
+			type: "Reference",
+			min: "0",
+			max: "1",
+			desc: "Organization that is associated with the contact",
+		},
+	},
+	"Patient.contact.period": {
+		name: "period",
+		meta: {
+			type: "Period",
+			min: "0",
+			max: "1",
+			lastNode: true,
+			desc: "The period during which this contact person or organization is valid to be contacted relating to this patient",
+		},
+	},
+	"Patient.communication": {
+		name: "communication",
+		meta: {
+			type: "BackboneElement",
+			min: "0",
+			max: "*",
+			desc: "A language which may be used to communicate with the patient about his or her health",
+		},
+		children: [
+			"Patient.communication.language",
+			"Patient.communication.preferred",
+		],
+	},
+	"Patient.communication.language": {
+		name: "language",
+		meta: {
+			type: "CodeableConcept",
+			min: "1",
+			max: "1",
+			desc: "The language which can be used to communicate with the patient about his or her health",
+		},
+	},
+	"Patient.communication.preferred": {
+		name: "preferred",
+		meta: {
+			type: "boolean",
+			min: "0",
+			max: "1",
+			lastNode: true,
+			desc: "Language preference indicator",
+		},
+	},
+	"Patient.generalPractitioner": {
+		name: "generalPractitioner",
+		meta: {
+			type: "Reference",
+			min: "0",
+			max: "*",
+			desc: "Patient's nominated primary care provider",
+		},
+	},
+	"Patient.managingOrganization": {
+		name: "managingOrganization",
+		meta: {
+			type: "Reference",
+			min: "0",
+			max: "1",
+			isSummary: true,
+			desc: "Organization that is the custodian of the patient record",
+		},
+	},
+	"Patient.link": {
+		name: "link",
+		meta: {
+			type: "BackboneElement",
+			min: "0",
+			max: "*",
+			isSummary: true,
+			isModifier: true,
+			desc: "Link to a Patient or RelatedPerson resource that concerns the same actual individual",
+		},
+		children: ["Patient.link.other", "Patient.link.type"],
+	},
+	"Patient.link.other": {
+		name: "other",
+		meta: {
+			type: "Reference",
+			min: "1",
+			max: "1",
+			isSummary: true,
+			desc: "The other patient or related person resource that the link refers to",
+		},
+	},
+	"Patient.link.type": {
+		name: "type",
+		meta: {
+			type: "code",
+			min: "1",
+			max: "1",
+			isSummary: true,
+			lastNode: true,
+			desc: "replaced-by | replaces | refer | seealso",
+		},
+	},
+};
+
+export const Default: Story = {
+	render: () => <FhirStructureView tree={tree} />,
+};