@health-samurai/react-components 0.0.0-alpha.5 → 0.0.0-alpha.7

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

@@ -0,0 +1,229 @@
+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 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>
+	);
+};
+
+const FhirStructureView = ({
+	tree,
+}: {
+	tree: Record<string, TreeViewItem<FhirStructure>>;
+}) => {
+	const expandedItemIds = React.useMemo(() => {
+		return Object.keys(tree ?? {});
+	}, [tree]);
+
+	return (
+		<div className="h-fit w-fit min-h-0 min-w-0">
+			<div className="flex items-center gap-2 font-semibold text-xs text-text-secondary border-b py-2 bg-bg-primary sticky top-0 z-20">
+				<div className="min-w-[260px] w-[260px] ml-4">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>
+			<TreeView
+				hideChevron={true}
+				horizontalLines={true}
+				disableHover={true}
+				zebra={true}
+				rootItemId="root"
+				items={tree}
+				customItemView={customItemView}
+				expandedItemIds={expandedItemIds}
+			/>
+		</div>
+	);
+};
+
+export { FhirStructureView, type FhirStructure };

package/src/components/request-line-editor.tsx

@@ -1,5 +1,6 @@
 import { cva } from "class-variance-authority";
 import type * as React from "react";
+import { toast } from "sonner";
 import { Input } from "#shadcn/components/ui/input";
 import {
 	Select,
@@ -51,9 +52,6 @@ function RequestMethodSelector({
 	value,
 	onValueChange,
 }: RequestMethodSelectorProps) {
-	console.log(value);
-	console.log(requestMethodVariants());
-	console.log(requestMethodVariants(undefined));
 	return (
 		<Select
 			value={value}
@@ -81,6 +79,8 @@ function RequestMethodSelector({
 
 type RequestLineEditorProps = {
 	method: string;
+	placeholder?: string;
+	autoFocus?: boolean;
 	onMethodChange: (newMethod: string) => void;
 	path?: string | undefined;
 	onPathChange?: React.ChangeEventHandler<HTMLInputElement>;
@@ -92,6 +92,8 @@ function RequestLineEditor({
 	method,
 	onMethodChange,
 	path,
+	placeholder,
+	autoFocus,
 	onPathChange,
 }: RequestLineEditorProps) {
 	return (
@@ -100,7 +102,31 @@ function RequestLineEditor({
 			<Input
 				className="rounded-l-none"
 				value={path}
-				rightSlot={<CopyIcon text={`${method} ${path}`} />}
+				autoFocus={autoFocus}
+				placeholder={placeholder}
+				rightSlot={
+					<CopyIcon
+						text={`${method} ${path}`}
+						tooltipText="Copy request line"
+						showToast={false}
+						onCopy={(text) => {
+							// Custom toast for request line
+							const truncatedText =
+								text.length > 30 ? `${text.slice(0, 30)}...` : text;
+							toast(
+								<div className="flex flex-col gap-1">
+									<span className="typo-body">Request line copied</span>
+									<span className="typo-code text-text-secondary">
+										{truncatedText}
+									</span>
+								</div>,
+								{
+									duration: 2000,
+								},
+							);
+						}}
+					/>
+				}
 				{...(onPathChange !== undefined ? { onChange: onPathChange } : {})}
 			/>
 		</div>

package/src/components/segment-control.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { SegmentControl, SegmentControlItem } from "./segment-control";
+
+const meta = {
+	title: "Component/SegmentControl",
+	component: SegmentControl,
+	parameters: {
+		layout: "centered",
+	},
+	tags: ["autodocs"],
+} satisfies Meta<typeof SegmentControl>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	render: () => {
+		return (
+			<SegmentControl
+				defaultValue="yaml"
+				onValueChange={(value) => console.log("Selected:", value)}
+			>
+				<SegmentControlItem value="yaml">YAML</SegmentControlItem>
+				<SegmentControlItem value="json">JSON</SegmentControlItem>
+			</SegmentControl>
+		);
+	},
+};

package/src/components/segment-control.tsx

@@ -0,0 +1,81 @@
+import { createContext, type ReactNode, useContext } from "react";
+import { cn } from "#shadcn/lib/utils.js";
+
+interface SegmentControlContextType {
+	defaultValue?: string;
+	onValueChange?: (value: string) => void;
+	name?: string;
+}
+
+const SegmentControlContext = createContext<SegmentControlContextType>({});
+
+export interface SegmentControlProps {
+	defaultValue?: string;
+	onValueChange?: (value: string) => void;
+	name?: string;
+}
+
+interface SegmentControlItemProps {
+	children: ReactNode;
+	value: string;
+}
+const segmentControlItemClass = cn(
+	"flex",
+	"items-center",
+	"justify-center",
+	"px-2",
+	"py-0.5",
+	"text-sm",
+	"cursor-pointer",
+	"rounded-2xl",
+	"text-white/80",
+	"peer-checked:bg-bg-primary",
+	"peer-checked:text-text-secondary",
+	"select-none",
+);
+
+const SegmentControlItem = ({ children, value }: SegmentControlItemProps) => {
+	const { defaultValue, onValueChange, name } = useContext(
+		SegmentControlContext,
+	);
+
+	return (
+		<div className="relative">
+			<input
+				type="radio"
+				id={`${name}-${value}`}
+				name={name}
+				value={value}
+				defaultChecked={value === defaultValue}
+				onChange={(e) => onValueChange?.(e.target.value)}
+				className="sr-only peer"
+			/>
+			<label htmlFor={`${name}-${value}`} className={segmentControlItemClass}>
+				{children}
+			</label>
+		</div>
+	);
+};
+
+const SegmentControl = ({
+	children,
+	defaultValue,
+	onValueChange,
+	name,
+}: SegmentControlProps & { children?: ReactNode }) => {
+	const contextValue: SegmentControlContextType = {
+		...(defaultValue !== undefined && { defaultValue }),
+		...(onValueChange !== undefined && { onValueChange }),
+		name: name || "react-components-segment-control",
+	};
+
+	return (
+		<SegmentControlContext.Provider value={contextValue}>
+			<div className="inline-flex bg-gray-500 p-0.5 gap-0 rounded-full">
+				{children}
+			</div>
+		</SegmentControlContext.Provider>
+	);
+};
+
+export { SegmentControl, SegmentControlItem };

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

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ChevronDown, Plus, Save } from "lucide-react";
+import { Button } from "#shadcn/components/ui/button.js";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "#shadcn/components/ui/dropdown-menu.js";
+import { SplitButton } from "./split-button";
+
+const meta: Meta<typeof SplitButton> = {
+	title: "Component/SplitButton",
+	component: SplitButton,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SplitButton>;
+
+export const Default: Story = {
+	render: () => (
+		<SplitButton>
+			<Button variant="secondary">
+				<Save />
+				Save
+			</Button>
+			<DropdownMenu>
+				<DropdownMenuTrigger asChild>
+					<Button variant="secondary">
+						<ChevronDown />
+					</Button>
+				</DropdownMenuTrigger>
+				<DropdownMenuContent>
+					<DropdownMenuLabel>Save to collection:</DropdownMenuLabel>
+					<DropdownMenuSeparator />
+					<DropdownMenuItem disabled>No collections</DropdownMenuItem>
+					<DropdownMenuSeparator />
+					<DropdownMenuItem>
+						<Plus className="text-fg-link" />
+						New collection
+					</DropdownMenuItem>
+				</DropdownMenuContent>
+			</DropdownMenu>
+		</SplitButton>
+	),
+};

package/src/components/split-button.tsx

@@ -0,0 +1,17 @@
+import { cn } from "#shadcn/lib/utils";
+
+const splitButtonStyles = cn(
+	"flex",
+	"*:data-[slot=button]:rounded-r-none",
+	"*:data-[slot=dropdown-menu-trigger]:px-1",
+	"*:data-[slot=dropdown-menu-trigger]:py-2",
+	"*:data-[slot=dropdown-menu-trigger]:rounded-l-none",
+	"*:data-[slot=dropdown-menu-trigger]:border-l-0",
+	"*:data-[slot=dropdown-menu-trigger]:border-l-0",
+);
+
+const SplitButton = ({ children }: { children: React.ReactNode }) => {
+	return <div className={splitButtonStyles}>{children}</div>;
+};
+
+export { SplitButton };

package/src/components/tree-view.stories.tsx

@@ -5,8 +5,8 @@ import React from "react";
 import { action } from "storybook/actions";
 import { Button } from "#shadcn/components/ui/button.js";
 import { PinIcon } from "../icons";
-import type { Item } from "./tree-view";
-import TreeView from "./tree-view";
+import type { TreeViewItem } from "./tree-view";
+import { TreeView } from "./tree-view";
 
 const meta: Meta<typeof TreeView> = {
 	title: "Component/Tree view",
@@ -16,17 +16,16 @@ const meta: Meta<typeof TreeView> = {
 	},
 	tags: ["autodocs"],
 };
-
-export default meta;
-type Story = StoryObj<typeof TreeView<ItemMeta>>;
-
 type ItemMeta = {
 	pinned?: boolean;
 	method?: "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
 	path?: string;
 };
 
-const items: Record<string, Item<ItemMeta>> = {
+export default meta;
+type Story = StoryObj<typeof TreeView<ItemMeta>>;
+
+const items: Record<string, TreeViewItem<ItemMeta>> = {
 	root: {
 		name: "Root",
 		children: ["collection1", "collection2", "collection3"],
@@ -168,7 +167,7 @@ export const Default: Story = {
 	render: (args) => <TreeView {...args} />,
 };
 
-const customItemView = (item: ItemInstance<Item<ItemMeta>>) => {
+const customItemView = (item: ItemInstance<TreeViewItem<ItemMeta>>) => {
 	const isRootLevel = item.getItemMeta().level === 0;
 	const hasChildren = item.getItemData()?.children !== undefined;
 	const requestMethhod = item.getItemData()?.meta?.method;
@@ -179,7 +178,7 @@ const customItemView = (item: ItemInstance<Item<ItemMeta>>) => {
 		switch (requestMethhod) {
 			case "GET":
 				return (
-					<div className=" opacity-50 group-hover/tree-item-label:opacity-100 in-data-[selected=true]:opacity-100 font-medium min-w-13 w-13 text-utility-green text-left">
+					<div className="opacity-50 group-hover/tree-item-label:opacity-100 in-data-[selected=true]:opacity-100 font-medium min-w-13 w-13 text-utility-green text-left">
 						GET
 					</div>
 				);
@@ -230,17 +229,23 @@ const customItemView = (item: ItemInstance<Item<ItemMeta>>) => {
 			</div>
 			<div className="gap-2 hidden group-hover/tree-item-label:flex items-center">
 				{isRootLevel && (
-					<Button variant="link" size="small" className="p-0 h-4">
-						{item.getItemData()?.meta?.pinned ? <PinIcon /> : <Pin />}
+					<Button variant="link" size="small" className="p-0 h-4" asChild>
+						<span>
+							{item.getItemData()?.meta?.pinned ? <PinIcon /> : <Pin />}
+						</span>
 					</Button>
 				)}
 				{hasChildren && (
-					<Button variant="link" size="small" className="p-0 h-4">
-						<Plus />
+					<Button variant="link" size="small" className="p-0 h-4" asChild>
+						<span>
+							<Plus />
+						</span>
 					</Button>
 				)}
-				<Button variant="link" size="small" className="p-0 h-4">
-					<Ellipsis />
+				<Button variant="link" size="small" className="p-0 h-4" asChild>
+					<span>
+						<Ellipsis />
+					</span>
 				</Button>
 			</div>
 		</div>