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

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

@@ -18,13 +18,9 @@ const meta: Meta<typeof RequestLineEditor> = {
 export default meta;
 type Story = StoryObj<typeof RequestLineEditor>;
 
-function RequestLineEditorWrapper({
-	selectedMethod,
-	methods,
-	inputValue,
-}: RequestLineEditorProps) {
-	const [currentSelectedMethod, setMethod] = React.useState(selectedMethod);
-	const [currentInputValue, setInputValue] = React.useState(inputValue);
+function RequestLineEditorWrapper({ method, path }: RequestLineEditorProps) {
+	const [currentSelectedMethod, setMethod] = React.useState(method);
+	const [currentInputValue, setInputValue] = React.useState(path);
 	const actionSetMethod = (method: string) => {
 		action("setMethod")(method);
 		setMethod(method);
@@ -35,56 +31,50 @@ function RequestLineEditorWrapper({
 	};
 	return (
 		<RequestLineEditor
-			methods={methods}
-			selectedMethod={currentSelectedMethod}
-			setMethod={actionSetMethod}
-			inputValue={currentInputValue}
-			onInputChange={actionSetInputValue}
+			method={currentSelectedMethod}
+			onMethodChange={actionSetMethod}
+			path={currentInputValue}
+			onPathChange={actionSetInputValue}
 		/>
 	);
 }
 
 export const GET: Story = {
 	args: {
-		selectedMethod: "GET",
-		methods: ["GET", "POST", "PUT", "PATCH", "DELETE"],
-		inputValue: "/fhir/Patient",
+		method: "GET",
+		path: "/fhir/Patient",
 	},
 	render: (args) => <RequestLineEditorWrapper {...args} />,
 };
 
 export const POST: Story = {
 	args: {
-		selectedMethod: "POST",
-		methods: ["GET", "POST", "PUT", "PATCH", "DELETE"],
-		inputValue: "/fhir/Patient",
+		method: "POST",
+		path: "/fhir/Patient",
 	},
 	render: (args) => <RequestLineEditorWrapper {...args} />,
 };
 
 export const PUT: Story = {
 	args: {
-		selectedMethod: "PUT",
-		methods: ["GET", "POST", "PUT", "PATCH", "DELETE"],
-		inputValue: "/fhir/Patient",
+		method: "PUT",
+		path: "/fhir/Patient",
 	},
 	render: (args) => <RequestLineEditorWrapper {...args} />,
 };
 
 export const PATCH: Story = {
 	args: {
-		selectedMethod: "PATCH",
-		methods: ["GET", "POST", "PUT", "PATCH", "DELETE"],
-		inputValue: "/fhir/Patient",
+		method: "PATCH",
+		path: "/fhir/Patient",
 	},
 	render: (args) => <RequestLineEditorWrapper {...args} />,
 };
 
 export const DELETE: Story = {
 	args: {
-		selectedMethod: "DELETE",
-		methods: ["GET", "POST", "PUT", "PATCH", "DELETE"],
-		inputValue: "/fhir/Patient",
+		method: "DELETE",
+		path: "/fhir/Patient",
 	},
 	render: (args) => <RequestLineEditorWrapper {...args} />,
 };

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

@@ -1,4 +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,
@@ -10,63 +12,63 @@ 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) {
 	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 +77,64 @@ function RequestMethodSelector({
 	);
 }
 
+type RequestLineEditorProps = {
+	method: string;
+	placeholder?: string;
+	autoFocus?: boolean;
+	onMethodChange: (newMethod: string) => void;
+	path?: string | undefined;
+	onPathChange?: React.ChangeEventHandler<HTMLInputElement>;
+	className?: string;
+};
+
 function RequestLineEditor({
 	className,
-	selectedMethod,
-	setMethod,
-	methods,
-	inputValue,
-	onInputChange,
+	method,
+	onMethodChange,
+	path,
+	placeholder,
+	autoFocus,
+	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}
+				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>
 	);
 }
 
-export { RequestLineEditor, type RequestLineEditorProps, METHOD_COLORS };
+export {
+	RequestLineEditor,
+	type RequestLineEditorProps,
+	requestMethodVariants,
+};

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,80 @@
+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",
+);
+
+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 };