@health-samurai/react-components 0.0.0-alpha.18 → 0.0.0-alpha.20

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 />,
+};

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

@@ -0,0 +1,104 @@
+import { CalendarIcon } from "lucide-react";
+import * as React from "react";
+import { Button } from "#shadcn/components/ui/button";
+import { Calendar } from "#shadcn/components/ui/calendar";
+import { Input } from "#shadcn/components/ui/input";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "#shadcn/components/ui/popover";
+import { cn } from "#shadcn/lib/utils";
+
+function formatDate(date: Date | undefined): string {
+	if (!date) return "";
+	const d = date.getDate().toString().padStart(2, "0");
+	const m = (date.getMonth() + 1).toString().padStart(2, "0");
+	const y = date.getFullYear();
+	return `${d}.${m}.${y}`;
+}
+
+function parseDate(value: string): Date | undefined {
+	if (!value) return undefined;
+	const parts = value.split(".");
+	if (parts.length === 3) {
+		const [d, m, y] = parts;
+		const date = new Date(`${y}-${m}-${d}`);
+		if (!Number.isNaN(date.getTime())) return date;
+	}
+	const date = new Date(value);
+	if (!Number.isNaN(date.getTime())) return date;
+	return undefined;
+}
+
+interface DatePickerInputProps {
+	value: string;
+	onChange: (value: string) => void;
+	placeholder?: string;
+	className?: string;
+	disabled?: boolean;
+}
+
+function DatePickerInput({
+	value,
+	onChange,
+	placeholder = "dd.mm.yyyy",
+	className,
+	disabled,
+}: DatePickerInputProps) {
+	const [open, setOpen] = React.useState(false);
+	const selectedDate = parseDate(value);
+	const [month, setMonth] = React.useState<Date>(selectedDate ?? new Date());
+
+	return (
+		<div className={cn("relative", className)}>
+			<Input
+				type="text"
+				placeholder={placeholder}
+				value={value}
+				disabled={disabled}
+				onChange={(e) => onChange(e.target.value)}
+				onKeyDown={(e) => {
+					if (e.key === "ArrowDown") {
+						e.preventDefault();
+						setOpen(true);
+					}
+				}}
+				rightSlot={
+					<Popover open={open} onOpenChange={setOpen}>
+						<PopoverTrigger asChild>
+							<Button
+								variant="ghost"
+								size="small"
+								className="p-0 size-5"
+								aria-label="Select date"
+								disabled={disabled}
+								onClick={(e) => {
+									e.preventDefault();
+									setOpen((o) => !o);
+								}}
+							>
+								<CalendarIcon className="size-3.5" />
+							</Button>
+						</PopoverTrigger>
+						<PopoverContent className="w-auto p-0" align="end" sideOffset={10}>
+							<Calendar
+								mode="single"
+								selected={selectedDate}
+								month={month}
+								onMonthChange={(m) => setMonth(m)}
+								onSelect={(date) => {
+									onChange(formatDate(date));
+									if (date) setMonth(date);
+									setOpen(false);
+								}}
+							/>
+						</PopoverContent>
+					</Popover>
+				}
+			/>
+		</div>
+	);
+}
+
+export { DatePickerInput, type DatePickerInputProps };

package/src/index.tsx

@@ -4,6 +4,7 @@ export * from "./components/button-dropdown";
 export * from "./components/code-editor";
 export * from "./components/copy-icon";
 export * from "./components/data-table";
+export * from "./components/date-picker-input";
 export * from "./components/fhir-structure-view";
 export * from "./components/icon-button";
 export * from "./components/operation-outcome-view";

package/src/shadcn/components/ui/chart.tsx

@@ -118,7 +118,7 @@ function ChartTooltipContent({
 	color,
 	nameKey,
 	labelKey,
-}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+}: RechartsPrimitive.TooltipContentProps &
 	React.ComponentProps<"div"> & {
 		hideLabel?: boolean;
 		hideIndicator?: boolean;
@@ -186,7 +186,7 @@ function ChartTooltipContent({
 
 					return (
 						<div
-							key={item.dataKey}
+							key={String(item.dataKey ?? index)}
 							className={cn(
 								"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
 								indicator === "dot" && "items-center",
@@ -257,7 +257,10 @@ function ChartLegendContent({
 	verticalAlign = "bottom",
 	nameKey,
 }: React.ComponentProps<"div"> &
-	Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+	Pick<
+		RechartsPrimitive.DefaultLegendContentProps,
+		"payload" | "verticalAlign"
+	> & {
 		hideIcon?: boolean;
 		nameKey?: string;
 	}) {

package/src/shadcn/components/ui/resizable.stories.tsx

@@ -15,7 +15,7 @@ type Story = StoryObj<typeof meta>;
 export const Demo = {
 	render: () => (
 		<ResizablePanelGroup
-			direction="horizontal"
+			orientation="horizontal"
 			className="max-w-md rounded-lg border md:min-w-[450px]"
 		>
 			<ResizablePanel defaultSize={50}>
@@ -25,7 +25,7 @@ export const Demo = {
 			</ResizablePanel>
 			<ResizableHandle />
 			<ResizablePanel defaultSize={50}>
-				<ResizablePanelGroup direction="vertical">
+				<ResizablePanelGroup orientation="vertical">
 					<ResizablePanel defaultSize={25}>
 						<div className="flex h-full items-center justify-center p-6">
 							<span className="font-semibold">Two</span>

package/src/shadcn/components/ui/tabs.stories.tsx

@@ -1,6 +1,6 @@
 import { Controls, Primary, Title } from "@storybook/addon-docs/blocks";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { action } from "storybook/internal/actions";
+import { action } from "storybook/actions";
 import {
 	Tabs,
 	TabsAddButton,

package/src/shadcn/components/ui/tabs.tsx

@@ -443,17 +443,175 @@ function TabScrollRightButton({
 	);
 }
 
+type DragState = {
+	index: number;
+	startX: number;
+	offsetX: number;
+	currentIndex: number;
+	widths: number[];
+	lefts: number[];
+};
+
+const DRAG_THRESHOLD = 5;
+
+function useTabReorder(
+	onReorder: ((fromIndex: number, toIndex: number) => void) | undefined,
+) {
+	const [drag, setDrag] = React.useState<DragState | null>(null);
+	const dragRef = React.useRef<DragState | null>(null);
+	const pendingRef = React.useRef(false);
+	const itemsRef = React.useRef<(HTMLDivElement | null)[]>([]);
+
+	const handlePointerDown = React.useCallback(
+		(e: React.PointerEvent, index: number) => {
+			if (!onReorder || e.button !== 0) return;
+			const items = itemsRef.current;
+			const widths = items.map((el) => el?.offsetWidth ?? 0);
+			const lefts: number[] = [];
+			let acc = 0;
+			for (const w of widths) {
+				lefts.push(acc);
+				acc += w;
+			}
+			dragRef.current = {
+				index,
+				startX: e.clientX,
+				offsetX: 0,
+				currentIndex: index,
+				widths,
+				lefts,
+			};
+			pendingRef.current = true;
+			(e.target as HTMLElement).setPointerCapture(e.pointerId);
+		},
+		[onReorder],
+	);
+
+	const handlePointerMove = React.useCallback((e: React.PointerEvent) => {
+		const d = dragRef.current;
+		if (!d) return;
+		const dx = e.clientX - d.startX;
+		if (pendingRef.current) {
+			if (Math.abs(dx) < DRAG_THRESHOLD) return;
+			pendingRef.current = false;
+		}
+		const draggedLeft = d.lefts[d.index] ?? 0;
+		const draggedWidth = d.widths[d.index] ?? 0;
+		const draggedRightEdge = draggedLeft + draggedWidth + dx;
+		const draggedLeftEdge = draggedLeft + dx;
+		let newIndex = d.index;
+		const TRIGGER_RATIO = 0.3;
+		for (let i = 0; i < d.lefts.length; i++) {
+			if (i === d.index) continue;
+			const left = d.lefts[i] ?? 0;
+			const width = d.widths[i] ?? 0;
+			if (i > d.index) {
+				// Dragging right: trigger when right edge enters 30% of target
+				if (draggedRightEdge > left + width * TRIGGER_RATIO) newIndex = i;
+			} else {
+				// Dragging left: trigger when left edge enters 30% from right
+				if (draggedLeftEdge < left + width * (1 - TRIGGER_RATIO))
+					newIndex = Math.min(newIndex, i);
+			}
+		}
+		const next: DragState = { ...d, offsetX: dx, currentIndex: newIndex };
+		dragRef.current = next;
+		setDrag(next);
+	}, []);
+
+	const handlePointerUp = React.useCallback(() => {
+		const d = dragRef.current;
+		if (d && !pendingRef.current && d.index !== d.currentIndex) {
+			onReorder?.(d.index, d.currentIndex);
+		}
+		dragRef.current = null;
+		pendingRef.current = false;
+		setDrag(null);
+	}, [onReorder]);
+
+	const getTransform = React.useCallback(
+		(index: number): React.CSSProperties => {
+			if (!drag || pendingRef.current) return {};
+			if (index === drag.index) {
+				return {
+					transform: `translateX(${drag.offsetX}px)`,
+					zIndex: 10,
+					position: "relative",
+					background: "var(--color-bg-primary)",
+					borderLeft: "1px solid var(--color-border-default)",
+				};
+			}
+			const from = drag.index;
+			const to = drag.currentIndex;
+			const draggedWidth = drag.widths[from] ?? 0;
+			if (from < to && index > from && index <= to) {
+				return {
+					transform: `translateX(${-draggedWidth}px)`,
+					transition: "transform 200ms ease",
+				};
+			}
+			if (from > to && index >= to && index < from) {
+				return {
+					transform: `translateX(${draggedWidth}px)`,
+					transition: "transform 200ms ease",
+				};
+			}
+			return { transition: "transform 200ms ease" };
+		},
+		[drag],
+	);
+
+	return {
+		drag,
+		itemsRef,
+		handlePointerDown,
+		handlePointerMove,
+		handlePointerUp,
+		getTransform,
+	};
+}
+
 function TabsBrowserList({
 	className,
 	children,
+	onReorder,
 	...props
-}: React.ComponentProps<typeof TabsPrimitive.List>) {
+}: React.ComponentProps<typeof TabsPrimitive.List> & {
+	onReorder?: (fromIndex: number, toIndex: number) => void;
+}) {
 	const tabsListRef = React.useRef<HTMLDivElement | null>(null);
 
 	const [showScrollButtons, setShowScrollButtons] = React.useState(false);
 	const [canScrollLeft, setCanScrollLeft] = React.useState(false);
 	const [canScrollRight, setCanScrollRight] = React.useState(false);
 
+	const {
+		drag,
+		itemsRef,
+		handlePointerDown,
+		handlePointerMove,
+		handlePointerUp,
+		getTransform,
+	} = useTabReorder(onReorder);
+
+	const wrappedChildren =
+		onReorder && React.Children.count(children) > 1
+			? React.Children.map(children, (child, index) => (
+					<div
+						ref={(el) => {
+							itemsRef.current[index] = el;
+						}}
+						style={getTransform(index)}
+						onPointerDown={(e) => handlePointerDown(e, index)}
+						onPointerMove={handlePointerMove}
+						onPointerUp={handlePointerUp}
+						className={cn(drag?.index === index && "cursor-grabbing")}
+					>
+						{child}
+					</div>
+				))
+			: children;
+
 	return (
 		<React.Fragment>
 			{showScrollButtons && (
@@ -506,7 +664,7 @@ function TabsBrowserList({
 				{...props}
 				ref={tabsListRef}
 			>
-				{children}
+				{wrappedChildren}
 			</TabsList>
 
 			{showScrollButtons && (

package/src/typography.css

@@ -46,7 +46,7 @@ body {
 	font-size: var(--font-size-xs);
 	font-family: var(--font-family-sans);
 	font-weight: var(--font-weight-normal);
-	line-height: var(--font-leading-3);
+	line-height: var(--font-leading-4);
 }
 .typo-label-xs {
 	font-size: var(--font-size-xs);

package/dist/src/components/code-editor/http/grammar/http.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=http.test.d.ts.map

package/dist/src/components/code-editor/http/grammar/http.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"http.test.d.ts","sourceRoot":"","sources":["../../../../../../src/components/code-editor/http/grammar/http.test.ts"],"names":[],"mappings":""}