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

package/src/components/code-editor.stories.tsx

@@ -1,5 +1,13 @@
+import type { EditorView } from "@codemirror/view";
+import {
+	AidboxClient,
+	BrowserAuthProvider,
+} from "@health-samurai/aidbox-client";
+import { createCodeMirrorLsp } from "@health-samurai/aidbox-fhirpath-lsp";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { CodeEditor } from "./code-editor";
+import React from "react";
+import { Input } from "#shadcn/components/ui/input.js";
+import { CodeEditor, EditorInput } from "./code-editor";
 
 const meta: Meta<typeof CodeEditor> = {
 	title: "Component/Editor",
@@ -28,7 +36,322 @@ export const Default: Story = {
 	},
 	render: () => (
 		<div className="h-[500px] w-[500px]">
-			<CodeEditor />
+			<CodeEditor mode="http" />
 		</div>
 	),
 };
+
+type ParsedHeader = {
+	name: string;
+	nameTrivia: string;
+	value: string;
+	valueTrivia: string;
+};
+
+type Parsed = {
+	method: string;
+	methodTrivia: string;
+	path: string;
+	pathTrivia: string;
+	headers: ParsedHeader[];
+	headersTrivia: string;
+};
+
+function parse(query: string): Parsed {
+	let hi = 0;
+	let lo = 0;
+	const res: Parsed = {
+		method: "",
+		methodTrivia: "",
+		path: "",
+		pathTrivia: "",
+		headers: [],
+		headersTrivia: "",
+	};
+
+	// Note that we iterate by code units, but it doesn't change correctness.
+	// method
+	for (hi = 0; hi < query.length; ++hi) {
+		const c = query[hi];
+		if (c === " " || c === "\t" || c === "\n") {
+			break;
+		}
+	}
+	res.method = query.substring(lo, hi);
+	lo = hi;
+	if (lo >= query.length) {
+		return res;
+	}
+
+	// method trivia
+	for (hi = lo; hi < query.length; ++hi) {
+		const c = query[hi];
+		if (!(c === " " || c === "\t")) {
+			break;
+		}
+	}
+	res.methodTrivia = query.substring(lo, hi);
+	lo = hi;
+	if (lo >= query.length) {
+		return res;
+	}
+
+	// path
+	for (hi = lo; hi < query.length; ++hi) {
+		const c = query[hi];
+		if (c === "\n") {
+			break;
+		}
+	}
+	res.path = query.substring(lo, hi);
+	lo = hi;
+	if (lo >= query.length) {
+		return res;
+	}
+
+	// path trivia
+	if (query[hi] === "\n") {
+		hi += 1;
+		res.pathTrivia = query.substring(lo, hi);
+	}
+	lo = hi;
+	if (lo >= query.length) {
+		return res;
+	}
+
+	// headers
+	let header: ParsedHeader = {
+		name: "",
+		nameTrivia: "",
+		value: "",
+		valueTrivia: "",
+	};
+	let headerReady = false;
+	// SAFETY: don't decrease hi inside this loop.
+	for (hi = lo; hi < query.length; ++hi) {
+		if (headerReady) {
+			res.headers.push(header);
+		}
+		header = { name: "", nameTrivia: "", value: "", valueTrivia: "" };
+		headerReady = false;
+
+		if (query[hi] === "\n") {
+			// end of headers
+			break;
+		}
+
+		// header name
+		for (lo = hi; hi < query.length; ++hi) {
+			const c = query[hi];
+			if (c === " " || c === "\t" || c === "\n" || c === ":") {
+				break;
+			}
+		}
+		headerReady = true;
+		header.name = query.substring(lo, hi);
+		lo = hi;
+		if (lo >= query.length) {
+			break;
+		}
+
+		// header name trivia
+		let colonFound = false;
+		for (lo = hi; hi < query.length; ++hi) {
+			const c = query[hi];
+			if (c === ":" && !colonFound) {
+				colonFound = true;
+			} else if (!(c === " " || c === "\t")) {
+				break;
+			}
+		}
+		header.nameTrivia = query.substring(lo, hi);
+		lo = hi;
+		if (lo >= query.length) {
+			break;
+		}
+
+		// header value
+		for (hi = lo; hi < query.length; ++hi) {
+			const c = query[hi];
+			if (c === "\n") {
+				break;
+			}
+		}
+		header.value = query.substring(lo, hi);
+		lo = hi;
+		if (lo >= query.length) {
+			break;
+		}
+
+		// header value trivia
+		if (query[hi] === "\n") {
+			header.valueTrivia = query.substring(lo, hi + 1);
+		}
+		lo = hi + 1;
+		if (lo >= query.length) {
+			break;
+		}
+	}
+	if (headerReady) {
+		res.headers.push(header);
+	}
+
+	if (query[hi] === "\n") {
+		res.headersTrivia = query.substring(lo, hi + 1);
+	}
+
+	return res;
+}
+
+const MethodInput = React.memo(function MethodInput({
+	method,
+	onMethodChange,
+}: {
+	method: string;
+	onMethodChange: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+}) {
+	return (
+		<div className="flex justify-center items-baseline">
+			Method:
+			<Input
+				type="text"
+				className="inline"
+				value={method}
+				onChange={onMethodChange}
+			/>
+		</div>
+	);
+});
+
+const PathInput = React.memo(function PathInput({
+	path,
+	onPathChange,
+}: {
+	path: string;
+	onPathChange: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+}) {
+	return (
+		<div className="flex justify-center items-baseline">
+			{"Path: "}
+			<Input
+				type="text"
+				className="inline"
+				value={path}
+				onChange={onPathChange}
+			/>
+		</div>
+	);
+});
+
+function ComplexComp() {
+	const [rawQuery, setRawQuery] = React.useState("");
+	const parsed = React.useMemo(() => parse(rawQuery), [rawQuery]);
+	const parsedRef = React.useRef(parsed);
+	React.useEffect(() => {
+		parsedRef.current = parsed;
+	}, [parsed]);
+	const method = React.useMemo(() => parsed.method, [parsed.method]);
+	const path = React.useMemo(() => parsed.path, [parsed.path]);
+
+	const viewRef = React.useRef<EditorView | null>(null);
+
+	const onMethodChange = React.useCallback(
+		(ev: React.ChangeEvent<HTMLInputElement>) => {
+			let newVal = ev.target.value;
+
+			if (newVal.indexOf(" ") !== -1) {
+				newVal = newVal.replaceAll(" ", "").replaceAll("\t", "");
+			}
+
+			const view = viewRef.current;
+			if (view === null) {
+				return null;
+			}
+
+			const from = 0;
+			const to = parsedRef.current.method.length;
+
+			view.dispatch({
+				changes: {
+					from: from,
+					to: to,
+					insert: newVal,
+				},
+			});
+		},
+		[],
+	);
+
+	const onPathChange = React.useCallback(
+		(ev: React.ChangeEvent<HTMLInputElement>) => {
+			const newVal = ev.target.value;
+
+			const view = viewRef.current;
+			if (view === null) {
+				return null;
+			}
+
+			const from =
+				parsedRef.current.method.length + parsedRef.current.methodTrivia.length;
+			const to = from + parsedRef.current.path.length;
+
+			view.dispatch({
+				changes: {
+					from: from,
+					to: to,
+					insert: newVal,
+				},
+			});
+		},
+		[],
+	);
+
+	return (
+		<>
+			<MethodInput method={method} onMethodChange={onMethodChange} />
+			<PathInput path={path} onPathChange={onPathChange} />
+			<div className="h-[500px] w-[500px] border-black border-2">
+				<CodeEditor
+					mode="http"
+					onUpdate={(update) => {
+						if (update.docChanged) {
+							setRawQuery(update.state.doc.toString());
+						}
+					}}
+					viewCallback={(view) => {
+						viewRef.current = view;
+					}}
+				/>
+			</div>
+		</>
+	);
+}
+
+export const Complex: Story = {
+	render: () => ComplexComp(),
+};
+
+function FhirpathComp() {
+	const { extension, worker } = React.useMemo(() => {
+		const client = new AidboxClient(
+			"http://localhost:8765",
+			new BrowserAuthProvider("http://localhost:8765"),
+		);
+		return createCodeMirrorLsp(client, { debug: true });
+	}, []);
+
+	React.useEffect(() => () => worker.terminate(), [worker]);
+
+	return (
+		<div className="h-[500px] w-[500px]">
+			<EditorInput
+				id="fhirpath-editor-input"
+				additionalExtensions={[extension]}
+			/>
+		</div>
+	);
+}
+
+export const FhirpathExtension: Story = {
+	render: () => <FhirpathComp />,
+};

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,91 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { DataTable, type DataTableProps } from "./data-table";
+
+type Data = {
+	name: string;
+	age: number;
+};
+
+const meta: Meta<typeof DataTable<Data>> = {
+	title: "Component/Data table",
+	component: DataTable<Data>,
+	tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function DataTableWrapper({ columns, data }: DataTableProps<Data>) {
+	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 },
+			{ name: "Jane Smith", age: 25 },
+			{ name: "Bob Johnson", age: 42 },
+			{ name: "Alice Williams", age: 35 },
+			{ name: "Charlie Brown", age: 28 },
+			{ name: "Diana Prince", age: 31 },
+			{ name: "Edward Norton", age: 45 },
+			{ name: "Fiona Green", age: 27 },
+			{ name: "George Miller", age: 38 },
+			{ name: "Hannah Davis", age: 33 },
+			{ name: "Ian Moore", age: 29 },
+			{ name: "Julia Taylor", age: 41 },
+			{ name: "Kevin Anderson", age: 36 },
+			{ name: "Laura Thomas", age: 32 },
+			{ name: "Michael Jackson", age: 44 },
+			{ name: "Nancy Wilson", age: 26 },
+			{ name: "Oscar Martinez", age: 39 },
+			{ name: "Patricia Lee", age: 34 },
+			{ name: "Quinn Harris", age: 37 },
+			{ name: "Rachel Clark", age: 40 },
+			{ name: "Samuel Wright", age: 43 },
+			{ name: "Tina Turner", age: 48 },
+			{ name: "Ulysses Grant", age: 52 },
+			{ name: "Victoria Baker", age: 29 },
+			{ name: "William Scott", age: 35 },
+			{ name: "Xavier Adams", age: 31 },
+			{ name: "Yolanda King", age: 38 },
+			{ name: "Zachary Nelson", age: 27 },
+			{ name: "Amy Carter", age: 33 },
+			{ name: "Benjamin Hall", age: 46 },
+			{ name: "Catherine Allen", age: 24 },
+			{ name: "David Young", age: 41 },
+			{ name: "Emily Walker", age: 36 },
+			{ name: "Frank Robinson", age: 39 },
+			{ name: "Grace White", age: 28 },
+			{ name: "Henry Lewis", age: 47 },
+			{ name: "Isabella Hill", age: 32 },
+			{ name: "Jack Martin", age: 34 },
+			{ name: "Katherine Garcia", age: 30 },
+			{ name: "Louis Rodriguez", age: 45 },
+			{ name: "Margaret Martinez", age: 37 },
+			{ name: "Nathan Hernandez", age: 26 },
+			{ name: "Olivia Lopez", age: 29 },
+			{ name: "Peter Gonzalez", age: 43 },
+			{ name: "Quincy Wilson", age: 38 },
+			{ name: "Rebecca Anderson", age: 31 },
+			{ name: "Steven Thomas", age: 44 },
+			{ name: "Teresa Taylor", age: 35 },
+			{ name: "Ursula Moore", age: 40 },
+			{ name: "Victor Jackson", age: 42 },
+		],
+	},
+	parameters: {
+		layout: "fullscreen",
+	},
+	render: (args) => <DataTableWrapper {...args} />,
+};

package/src/components/data-table.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import {
+	type AccessorKeyColumnDef,
+	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> {
+	// It is not possible to allow arbitrary and nested data structures
+	// and have more type safety. Note that the useReactTable type definition
+	// is exactly the same.
+	// There is an open issue: https://github.com/TanStack/table/issues/4382
+	// biome-ignore lint/suspicious/noExplicitAny: cannot be stricter while being a useful library
+	columns: ColumnDef<TData, any>[];
+	data: TData[];
+	stickyHeader?: boolean;
+}
+
+export function DataTable<TData>({
+	columns,
+	data,
+	stickyHeader = false,
+}: DataTableProps<TData>) {
+	"use no memo";
+	const table = useReactTable({
+		data,
+		columns,
+		getCoreRowModel: getCoreRowModel(),
+		columnResizeMode: "onChange",
+		enableColumnResizing: true,
+	});
+
+	return (
+		<div className="overflow-hidden w-full h-full">
+			<Table className="relative border-spacing-0 border-separate w-full">
+				<TableHeader>
+					{table.getHeaderGroups().map((headerGroup) => (
+						<TableRow key={headerGroup.id}>
+							{headerGroup.headers.map((header) => {
+								return (
+									<TableHead
+										key={header.id}
+										className={`relative group border ${stickyHeader ? "sticky top-0 z-10 bg-bg-secondary text-elements-assistive" : ""}`}
+										style={{
+											width:
+												header.column.getIndex() ===
+												headerGroup.headers.length - 1
+													? "100%"
+													: 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
+													? "100%"
+													: 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, AccessorKeyColumnDef };

package/src/components/date-picker-input.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { DatePickerInput } from "./date-picker-input";
+
+function DatePickerInputWrapper(props: {
+	placeholder?: string;
+	disabled?: boolean;
+}) {
+	const [value, setValue] = useState("");
+	return (
+		<div className="w-48">
+			<DatePickerInput value={value} onChange={setValue} {...props} />
+		</div>
+	);
+}
+
+function DatePickerInputPrefilledWrapper() {
+	const [value, setValue] = useState("15.06.2025");
+	return (
+		<div className="w-48">
+			<DatePickerInput value={value} onChange={setValue} />
+		</div>
+	);
+}
+
+function DatePickerRangeWrapper() {
+	const [from, setFrom] = useState("");
+	const [to, setTo] = useState("");
+	return (
+		<div className="flex items-center gap-2">
+			<DatePickerInput
+				value={from}
+				onChange={setFrom}
+				className="w-40"
+				placeholder="From"
+			/>
+			<span className="text-text-secondary">—</span>
+			<DatePickerInput
+				value={to}
+				onChange={setTo}
+				className="w-40"
+				placeholder="To"
+			/>
+		</div>
+	);
+}
+
+const meta = {
+	title: "Component/DatePickerInput",
+	component: DatePickerInputWrapper,
+	parameters: {
+		layout: "centered",
+	},
+} satisfies Meta<typeof DatePickerInputWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithPlaceholder: Story = {
+	args: {
+		placeholder: "Select a date...",
+	},
+};
+
+export const Disabled: Story = {
+	args: {
+		disabled: true,
+	},
+};
+
+export const Prefilled: StoryObj = {
+	render: () => <DatePickerInputPrefilledWrapper />,
+};
+
+export const DateRange: StoryObj = {
+	render: () => <DatePickerRangeWrapper />,
+};