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

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

@@ -1,3 +1,4 @@
+import { cva } from "class-variance-authority";
 import type * as React from "react";
 import { Input } from "#shadcn/components/ui/input";
 import {
@@ -10,63 +11,66 @@ import {
 import { cn } from "#shadcn/lib/utils";
 import { CopyIcon } from "./copy-icon";
 
-interface RequestLineEditorProps extends React.ComponentProps<"div"> {
-	selectedMethod: string;
-	setMethod: (value: string) => void;
-	methods: string[];
-	inputValue?: string | undefined;
-	onInputChange?: React.ChangeEventHandler<HTMLInputElement>;
-}
+const METHODS = ["GET", "POST", "PUT", "PATCH", "DELETE"] as const;
+type RequestMethod = (typeof METHODS)[number];
 
-const METHOD_COLORS = {
-	GET: {
-		text: "text-[#6D9F0F] [&_svg]:text-[#6D9F0F]!",
-		background: "bg-green-200",
-		border:
-			"border-fg-success-secondary! hover:border-fg-success-secondary ring-green-200!",
-	},
-	POST: {
-		text: "text-yellow-600 [&_svg]:text-yellow-600!",
-		background: "bg-yellow-200",
-		border: "border-[#F4CB00]! hover:border-[#F4CB00] ring-yellow-200!",
-	},
-	PUT: {
-		text: "text-blue-500 [&_svg]:text-blue-500!",
-		background: "bg-blue-200",
-		border: "border-blue-400! hover:border-blue-400 ring-blue-200!",
-	},
-	PATCH: {
-		text: "text-violet-600 [&_svg]:text-violet-600",
-		background: "bg-violet-200",
-		border: "border-violet-400! hover:border-violet-400 ring-violet-200!",
-	},
-	DELETE: {
-		text: "text-red-600 [&_svg]:text-red-600!",
-		background: "bg-red-200",
-		border: "border-red-300! hover:border-red-300 ring-red-200!",
+const requestMethodVariants = cva<{ method: { [K in RequestMethod]: string } }>(
+	cn(
+		"border-r-0",
+		"rounded-r-none",
+		"shadow-none",
+		"typo-label",
+		"text-left",
+		"items-center",
+		"w-26",
+	),
+	{
+		variants: {
+			method: {
+				GET: "text-utility-green [&_svg]:text-utility-green",
+				POST: "text-utility-yellow [&_svg]:text-utility-yellow",
+				PUT: "text-utility-blue [&_svg]:text-utility-blue ",
+				PATCH: "text-utility-violet [&_svg]:text-utility-violet",
+				DELETE: "text-utility-red [&_svg]:text-utility-red",
+			},
+		},
 	},
+);
+
+type RequestMethodSelectorProps = {
+	value: string;
+	onValueChange?: (newMethod: string) => void;
 };
 
+function isKnownMethod(candidate: string): candidate is RequestMethod {
+	const methods: readonly string[] = METHODS;
+	return methods.includes(candidate);
+}
+
 function RequestMethodSelector({
-	selectedMethod,
-	setMethod,
-	methods,
-}: RequestLineEditorProps) {
+	value,
+	onValueChange,
+}: RequestMethodSelectorProps) {
+	console.log(value);
+	console.log(requestMethodVariants());
+	console.log(requestMethodVariants(undefined));
 	return (
-		<Select value={selectedMethod} onValueChange={setMethod}>
+		<Select
+			value={value}
+			{...(onValueChange ? { onValueChange: onValueChange } : {})}
+		>
 			<SelectTrigger
-				className={`min-w-26 border-r-0 rounded-r-none shadow-none ${METHOD_COLORS[selectedMethod as keyof typeof METHOD_COLORS].text} ${METHOD_COLORS[selectedMethod as keyof typeof METHOD_COLORS].background} ${METHOD_COLORS[selectedMethod as keyof typeof METHOD_COLORS].border}`}
+				className={requestMethodVariants(
+					isKnownMethod(value) ? { method: value } : undefined,
+				)}
 			>
-				<SelectValue />
+				<SelectValue>{value}</SelectValue>
 			</SelectTrigger>
 			<SelectContent>
-				{methods.map((method) => (
+				{METHODS.map((method) => (
 					<SelectItem key={method} value={method}>
-						<span
-							className={`${METHOD_COLORS[method as keyof typeof METHOD_COLORS].text}`}
-						>
-							{" "}
-							{method}{" "}
+						<span className={requestMethodVariants({ method: method })}>
+							{method}
 						</span>
 					</SelectItem>
 				))}
@@ -75,29 +79,36 @@ function RequestMethodSelector({
 	);
 }
 
+type RequestLineEditorProps = {
+	method: string;
+	onMethodChange: (newMethod: string) => void;
+	path?: string | undefined;
+	onPathChange?: React.ChangeEventHandler<HTMLInputElement>;
+	className?: string;
+};
+
 function RequestLineEditor({
 	className,
-	selectedMethod,
-	setMethod,
-	methods,
-	inputValue,
-	onInputChange,
+	method,
+	onMethodChange,
+	path,
+	onPathChange,
 }: RequestLineEditorProps) {
 	return (
 		<div className={cn("flex", className)}>
-			<RequestMethodSelector
-				selectedMethod={selectedMethod}
-				setMethod={setMethod}
-				methods={methods}
-			/>
+			<RequestMethodSelector value={method} onValueChange={onMethodChange} />
 			<Input
-				className={`rounded-l-none ${METHOD_COLORS[selectedMethod as keyof typeof METHOD_COLORS].border}`}
-				value={inputValue}
-				rightSlot={<CopyIcon text={`${selectedMethod} ${inputValue}`} />}
-				{...(onInputChange !== undefined ? { onChange: onInputChange } : {})}
+				className="rounded-l-none"
+				value={path}
+				rightSlot={<CopyIcon text={`${method} ${path}`} />}
+				{...(onPathChange !== undefined ? { onChange: onPathChange } : {})}
 			/>
 		</div>
 	);
 }
 
-export { RequestLineEditor, type RequestLineEditorProps, METHOD_COLORS };
+export {
+	RequestLineEditor,
+	type RequestLineEditorProps,
+	requestMethodVariants,
+};

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

@@ -0,0 +1,260 @@
+import type { ItemInstance } from "@headless-tree/core";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Ellipsis, Pin, Plus } from "lucide-react";
+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";
+
+const meta: Meta<typeof TreeView> = {
+	title: "Component/Tree view",
+	component: TreeView,
+	parameters: {
+		layout: "fullscreen",
+	},
+	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>> = {
+	root: {
+		name: "Root",
+		children: ["collection1", "collection2", "collection3"],
+	},
+	collection1: {
+		name: "Collection 1",
+		children: ["request1", "request2", "request3"],
+		meta: {
+			pinned: true,
+		},
+	},
+	collection2: {
+		name: "Collection 2",
+		children: ["request4", "request5", "request6"],
+	},
+	collection3: {
+		name: "New Collection",
+		children: [
+			"request7",
+			"request8",
+			"request9",
+			"request10",
+			"request11",
+			"collection4",
+		],
+	},
+	collection4: {
+		name: "New Collection",
+		children: ["request12", "request13", "request14"],
+	},
+	request1: {
+		meta: {
+			method: "GET",
+			path: "/request1",
+		},
+		name: "Request 1",
+	},
+	request2: {
+		meta: {
+			method: "POST",
+			path: "/request2",
+		},
+		name: "Request 2",
+	},
+	request3: {
+		meta: {
+			method: "PUT",
+			path: "/request3",
+		},
+		name: "Request 3",
+	},
+	request4: {
+		meta: {
+			method: "DELETE",
+			path: "/request4",
+		},
+		name: "Request 4",
+	},
+	request5: {
+		meta: {
+			method: "PATCH",
+			path: "/request5",
+		},
+		name: "Request 5",
+	},
+	request6: {
+		meta: {
+			method: "GET",
+			path: "/request6",
+		},
+		name: "Request 6",
+	},
+	request7: {
+		meta: {
+			method: "PATCH",
+			path: "/fhir/Patient/123",
+		},
+		name: "Request 7",
+	},
+	request8: {
+		meta: {
+			method: "DELETE",
+			path: "/fhir/Patient/123",
+		},
+		name: "Request 8",
+	},
+	request9: {
+		meta: {
+			method: "PUT",
+			path: "/fhir/Patient/123",
+		},
+		name: "Request 9",
+	},
+	request10: {
+		meta: {
+			method: "POST",
+			path: "/fhir/Patient/123",
+		},
+		name: "Request 10",
+	},
+	request11: {
+		meta: {
+			method: "GET",
+			path: "/fhir/Patient/123",
+		},
+		name: "Request 11",
+	},
+	request12: {
+		meta: {
+			method: "PUT",
+			path: "/fhir/Patient/123",
+		},
+		name: "Request 12",
+	},
+	request13: {
+		meta: {
+			method: "PUT",
+			path: "/fhir/Patient/123",
+		},
+		name: "Request 13",
+	},
+	request14: {
+		meta: {
+			method: "PUT",
+			path: "/fhir/Patient/123",
+		},
+		name: "Request 14",
+	},
+};
+
+export const Default: Story = {
+	args: {
+		items: items,
+		rootItemId: "root",
+		selectedItemId: "request9",
+		expandedItemIds: ["collection3"],
+		onSelectItem: (a) => action("onSelectItem")(a),
+	},
+	render: (args) => <TreeView {...args} />,
+};
+
+const customItemView = (item: ItemInstance<Item<ItemMeta>>) => {
+	const isRootLevel = item.getItemMeta().level === 0;
+	const hasChildren = item.getItemData()?.children !== undefined;
+	const requestMethhod = item.getItemData()?.meta?.method;
+	const requestPath = item.getItemData()?.meta?.path;
+	const itemName = item.getItemData()?.name;
+
+	const requestMethodView = () => {
+		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">
+						GET
+					</div>
+				);
+			case "POST":
+				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-yellow text-left">
+						POST
+					</div>
+				);
+			case "PUT":
+				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-blue text-left">
+						PUT
+					</div>
+				);
+			case "PATCH":
+				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-violet text-left">
+						PATCH
+					</div>
+				);
+			case "DELETE":
+				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-red text-left">
+						DELETE
+					</div>
+				);
+			default:
+				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-gray text-left">
+						Unknown
+					</div>
+				);
+		}
+	};
+
+	return (
+		<div className="w-full flex justify-between gap-2">
+			<div className="flex items-center gap-2 truncate">
+				{hasChildren ? (
+					itemName
+				) : (
+					<React.Fragment>
+						{requestMethodView()}
+						{requestPath}
+					</React.Fragment>
+				)}
+			</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>
+				)}
+				{hasChildren && (
+					<Button variant="link" size="small" className="p-0 h-4">
+						<Plus />
+					</Button>
+				)}
+				<Button variant="link" size="small" className="p-0 h-4">
+					<Ellipsis />
+				</Button>
+			</div>
+		</div>
+	);
+};
+
+export const CustomItemView: Story = {
+	args: {
+		items: items,
+		rootItemId: "root",
+		selectedItemId: "request11",
+		expandedItemIds: ["collection3", "collection4"],
+		onSelectItem: (a) => action("onSelectItem")(a.getItemData()?.name),
+		customItemView: customItemView,
+	},
+	render: (args) => <TreeView {...args} />,
+};

package/src/components/tree-view.tsx

@@ -0,0 +1,101 @@
+import type {
+	FeatureImplementation,
+	ItemInstance,
+	TreeConfig,
+} from "@headless-tree/core";
+import {
+	hotkeysCoreFeature,
+	selectionFeature,
+	syncDataLoaderFeature,
+} from "@headless-tree/core";
+import { useTree } from "@headless-tree/react";
+import type React from "react";
+import { Tree, TreeItem, TreeItemLabel } from "#shadcn/components/ui/tree";
+
+export interface Item<T> {
+	name: string;
+	children?: string[];
+	meta?: T;
+}
+
+const customClickBehavior: FeatureImplementation = {
+	itemInstance: {
+		getProps: ({ tree, item, prev }) => ({
+			...prev?.(),
+			onClick: () => {
+				item.primaryAction();
+				if (item.isExpanded()) {
+					item.collapse();
+				} else {
+					item.expand();
+				}
+				if (!item.isFolder()) {
+					tree.setSelectedItems([item.getItemMeta().itemId]);
+				}
+			},
+		}),
+	},
+};
+
+const indent = 20;
+
+export default function TreeView<T>({
+	rootItemId,
+	items,
+	selectedItemId,
+	expandedItemIds,
+	onSelectItem,
+	customItemView,
+}: {
+	rootItemId: string;
+	selectedItemId?: string;
+	expandedItemIds?: string[];
+	onSelectItem?: (item: ItemInstance<Item<T>>) => void;
+	items: Record<string, Item<T>>;
+	customItemView?: (item: ItemInstance<Item<T>>) => React.ReactNode;
+}) {
+	const treeConfig: TreeConfig<Item<T>> = {
+		initialState: {
+			selectedItems: selectedItemId ? [selectedItemId] : [],
+			expandedItems: expandedItemIds ?? [],
+		},
+		indent,
+		rootItemId: rootItemId,
+		isItemFolder: (item: ItemInstance<Item<T>>) =>
+			item.getItemData()?.children !== undefined,
+		getItemName: (item: ItemInstance<Item<T>>) => item.getItemData()?.name,
+		dataLoader: {
+			getItem: (itemId) => items[itemId] as Item<T>,
+			getChildren: (itemId) => items[itemId]?.children ?? [],
+		},
+		features: [
+			syncDataLoaderFeature,
+			hotkeysCoreFeature,
+			selectionFeature,
+			customClickBehavior,
+		],
+	};
+
+	const tree = useTree<Item<T>>(treeConfig);
+
+	return (
+		<Tree tree={tree} indent={indent}>
+			{tree.getItems().map((item) => {
+				return (
+					<TreeItem
+						key={item.getId()}
+						item={item}
+						className="relative before:absolute before:inset-0 before:-ms-1 before:bg-[repeating-linear-gradient(to_right,transparent_0,transparent_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)))]"
+					>
+						<TreeItemLabel
+							className="before:bg-background relative before:absolute before:inset-x-0 before:-inset-y-0 before:-z-10"
+							onClick={() => onSelectItem?.(item)}
+						>
+							{customItemView ? customItemView(item) : item.getItemData()?.name}
+						</TreeItemLabel>
+					</TreeItem>
+				);
+			})}
+		</Tree>
+	);
+}

package/src/icons.tsx

@@ -0,0 +1,45 @@
+export const PlayIcon = () => {
+	return (
+		<svg
+			width="16"
+			height="16"
+			viewBox="0 0 16 16"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-label="Play"
+			role="img"
+		>
+			<title>Play</title>
+			<path
+				d="M3.76074 1.56153C3.92124 1.47395 4.11669 1.48025 4.27051 1.57911L13.6035 7.57911C13.7466 7.67111 13.833 7.82988 13.833 8.00001C13.833 8.17014 13.7466 8.32891 13.6035 8.42091L4.27051 14.4209C4.11669 14.5198 3.92124 14.5261 3.76074 14.4385C3.60021 14.3508 3.5 14.1829 3.5 14V2.00001C3.5 1.81711 3.60021 1.64918 3.76074 1.56153Z"
+				fill="white"
+			/>
+		</svg>
+	);
+};
+
+export const PinIcon = () => {
+	return (
+		<svg
+			width="16"
+			height="16"
+			viewBox="0 0 16 16"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-label="Pin"
+			role="img"
+		>
+			<path
+				d="M8 11.3334V14.6667"
+				stroke="#717684"
+				stroke-width="1.25"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M5.9987 7.17337C5.99857 7.42143 5.92924 7.66453 5.79851 7.87534C5.66778 8.08616 5.48084 8.25632 5.2587 8.36671L4.07203 8.96671C3.84989 9.07709 3.66295 9.24726 3.53222 9.45807C3.40149 9.66888 3.33216 9.91198 3.33203 10.16V10.6667C3.33203 10.8435 3.40227 11.0131 3.52729 11.1381C3.65232 11.2631 3.82189 11.3334 3.9987 11.3334H11.9987C12.1755 11.3334 12.3451 11.2631 12.4701 11.1381C12.5951 11.0131 12.6654 10.8435 12.6654 10.6667V10.16C12.6652 9.91198 12.5959 9.66888 12.4652 9.45807C12.3345 9.24726 12.1475 9.07709 11.9254 8.96671L10.7387 8.36671C10.5166 8.25632 10.3296 8.08616 10.1989 7.87534C10.0682 7.66453 9.99883 7.42143 9.9987 7.17337V4.66671C9.9987 4.4899 10.0689 4.32033 10.194 4.1953C10.319 4.07028 10.4886 4.00004 10.6654 4.00004C11.019 4.00004 11.3581 3.85957 11.6082 3.60952C11.8582 3.35947 11.9987 3.02033 11.9987 2.66671C11.9987 2.31309 11.8582 1.97395 11.6082 1.7239C11.3581 1.47385 11.019 1.33337 10.6654 1.33337H5.33203C4.97841 1.33337 4.63927 1.47385 4.38922 1.7239C4.13917 1.97395 3.9987 2.31309 3.9987 2.66671C3.9987 3.02033 4.13917 3.35947 4.38922 3.60952C4.63927 3.85957 4.97841 4.00004 5.33203 4.00004C5.50884 4.00004 5.67841 4.07028 5.80344 4.1953C5.92846 4.32033 5.9987 4.4899 5.9987 4.66671V7.17337Z"
+				fill="#717684"
+			/>
+		</svg>
+	);
+};

package/src/index.css

@@ -3,6 +3,11 @@
 @import "./tokens.css";
 @import "./typography.css";
 
+.lucide {
+	/* Change this! */
+	stroke-width: 1.5px;
+}
+
 @theme {
 	--color-selection: var(--color-blue-300);
 	--color-ring-red: var(--color-red-200);
@@ -11,7 +16,7 @@
 	--color-ring-purple: var(--color-purple-200);
 	--color-ring-orange: var(--color-orange-200);
 	--color-ring-pink: var(--color-pink-200);
-	--color-ring-blue: var(--color-blue-300);
+	--color-ring-blue: var(--color-blue-200);
 	--color-ring-red: var(--color-red-200);
 	--color-text-primary: var(--color-neutral-900);
 	--color-text-secondary: var(--color-neutral-500);
@@ -19,12 +24,13 @@
 	--color-text-primary_on-brand: var(--color-neutral-50);
 	--color-text-secondary_on-brand: var(--color-neutral-100);
 	--color-text-tertiary: var(--color-neutral-400);
+	--color-text-tertiary_hover: var(--color-neutral-500);
 	--color-text-quternary: var(--color-neutral-400);
 	--color-text-quternary_hover: var(--color-neutral-500);
 	--color-text-quternary_on-brand: var(--color-neutral-200);
 	--color-text-disabled: var(--color-neutral-300);
 	--color-text-link: var(--color-blue-500);
-	--color-text-link_hover: var(--color-blue-600);
+	--color-text-link_hover: var(--color-blue-700);
 	--color-text-link_disabled: var(--color-blue-400);
 	--color-text-brand-primary: var(--color-brand-500);
 	--color-text-brand-secondary: var(--color-brand-300);
@@ -39,6 +45,7 @@
 	--color-border-secondary: var(--color-neutral-200);
 	--color-border-separator: var(--color-neutral-200);
 	--color-border-disabled: var(--color-neutral-100);
+	--color-border-dark: var(--color-neutral-500);
 	--color-border-brand: var(--color-brand-500);
 	--color-border-link: var(--color-blue-500);
 	--color-border-error: var(--color-red-500);
@@ -90,7 +97,6 @@
 	--color-fg-success-secondary: var(--color-green-400);
 	--color-fg-warning-primary: var(--color-yellow-500);
 	--color-fg-warning-secondary: var(--color-yellow-400);
-
 	--color-utility-green: var(--color-green-500);
 	--color-utility-yellow: var(--color-yellow-600);
 	--color-utility-blue: var(--color-blue-500);
@@ -102,3 +108,36 @@
 	--font-family-sans: "Inter", system-ui, sans-serif;
 	--font-family-mono: "JetBrains Mono", monospace;
 }
+
+.no-scrollbar::-webkit-scrollbar {
+	display: none;
+}
+
+.no-scrollbar {
+	-ms-overflow-style: none;
+	scrollbar-width: none;
+}
+
+body ::-webkit-scrollbar {
+	width: 6px;
+	height: 6px;
+}
+
+body ::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+body ::-webkit-scrollbar-thumb {
+	background-color: var(--color-elements-disabled);
+	border-radius: 4px;
+}
+
+body ::-webkit-scrollbar-thumb:hover {
+	background-color: var(--color-elements-assistive);
+}
+@supports not selector(::-webkit-scrollbar) {
+	body {
+		scrollbar-color: var(--color-elements-disabled) rgba(0, 0, 0, 0);
+		scrollbar-width: thin;
+	}
+}

package/src/index.tsx

@@ -1,9 +1,9 @@
 // Shadcn Components
 
-export * from "./components/code-editor";
 export * from "./components/code-editor";
 export * from "./components/copy-icon";
 export * from "./components/request-line-editor";
+export * from "./icons";
 export * from "./shadcn/components/ui/accordion";
 export * from "./shadcn/components/ui/alert";
 export * from "./shadcn/components/ui/alert-dialog";