@health-samurai/react-components 0.0.0-alpha.1

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

@@ -0,0 +1,393 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { CircleX, Copy, Mail } from "lucide-react";
+import { Badge } from "#shadcn/components/ui/badge";
+import { Input } from "#shadcn/components/ui/input";
+import { Label } from "#shadcn/components/ui/label";
+
+interface InputWithLabelProps {
+	label?: string;
+	description?: string;
+	invalid?: boolean;
+	disabled?: boolean;
+	placeholder?: string;
+	leftSlot?: React.ReactNode;
+	rightSlot?: React.ReactNode;
+	suffix?: string;
+}
+
+function InputWithLabel({
+	label = "Label",
+	description = "This is a hint text to help user.",
+	invalid = false,
+	disabled = false,
+	placeholder = "Placeholder",
+	leftSlot,
+	rightSlot,
+	suffix,
+}: InputWithLabelProps) {
+	const descriptionColor = invalid
+		? "text-text-error-primary"
+		: disabled
+			? "text-text-disabled"
+			: "text-text-secondary";
+
+	return (
+		<div className="flex w-full">
+			<div className="space-y-2 w-full">
+				<Label>{label}</Label>
+				<Input
+					placeholder={placeholder}
+					leftSlot={leftSlot}
+					rightSlot={rightSlot}
+					{...(suffix && { suffix })}
+					invalid={invalid}
+					disabled={disabled}
+				/>
+				<p className={`typo-body ${descriptionColor}`}>{description}</p>
+			</div>
+		</div>
+	);
+}
+
+const meta = {
+	title: "Component/Input",
+	component: Input,
+} satisfies Meta<typeof Input>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default = {
+	args: {
+		type: "text",
+		placeholder: "Placeholder",
+		leftSlot: undefined,
+		rightSlot: undefined,
+	},
+} satisfies Story;
+
+export const Demo = {
+	render: () => (
+		<div className="p-6 min-h-screen flex justify-center items-center">
+			<div className="rounded-lg p-6 shadow-sm w-280">
+				<div className="flex items-center mb-4 justify-between">
+					<div className="w-40 text-left">Inputs without labels</div>
+					<div className="w-70 text-left text-sm text-text-secondary">
+						Invalid:
+						<Badge variant="outline" className="text-xs ml-2">
+							false
+						</Badge>
+					</div>
+					<div className="w-70 text-left text-sm text-text-secondary">
+						Invalid:
+						<Badge variant="outline" className="text-xs ml-2">
+							true
+						</Badge>
+					</div>
+					<div className="w-70 text-left text-sm text-text-secondary">
+						Disabled:
+						<Badge variant="outline" className="text-xs ml-2">
+							true
+						</Badge>
+					</div>
+				</div>
+
+				{(["none", "left", "right", "both", "left-double-right"] as const).map(
+					(variant) => {
+						const variantLabel = {
+							none: "None",
+							left: "leftSlot",
+							right: "rightSlot",
+							both: "leftSlot + rightSlot",
+							"left-double-right": "BothPlusExtra",
+						}[variant];
+
+						return (
+							<div
+								className="items-center gap-3 py-3 border-gray-l00 border-t border-border-separator"
+								key={variant}
+							>
+								<div className="flex gap-3 items-center py-2 justify-between">
+									<div className="w-40 text-sm text-text-secondary">
+										<div className="flex">
+											<div className="w-15">Slots:</div>
+											<Badge variant="outline" className="text-xs">
+												{variantLabel}
+											</Badge>
+										</div>
+									</div>
+
+									{/* Default Variants */}
+									<div className="w-70 flex gap-3 justify-center">
+										{variant === "none" && <Input placeholder="Placeholder" />}
+										{variant === "left" && (
+											<Input placeholder="Placeholder" leftSlot={<Mail />} />
+										)}
+										{variant === "right" && (
+											<Input
+												placeholder="Placeholder"
+												rightSlot={<CircleX />}
+											/>
+										)}
+										{variant === "both" && (
+											<Input
+												placeholder="Placeholder"
+												leftSlot={<Mail />}
+												rightSlot={<CircleX />}
+											/>
+										)}
+										{variant === "left-double-right" && (
+											<Input
+												placeholder="Placeholder"
+												className="pr-15"
+												leftSlot={<Mail />}
+												rightSlot={
+													<div className="flex items-center gap-2">
+														<CircleX />
+														<Copy />
+													</div>
+												}
+												suffix="milliseconds"
+											/>
+										)}
+									</div>
+
+									{/* Critical Variants */}
+									<div className="w-70 flex gap-3 justify-center">
+										{variant === "none" && (
+											<Input placeholder="Placeholder" invalid />
+										)}
+										{variant === "left" && (
+											<Input
+												placeholder="Placeholder"
+												leftSlot={<Mail />}
+												invalid
+											/>
+										)}
+										{variant === "right" && (
+											<Input
+												placeholder="Placeholder"
+												rightSlot={<CircleX />}
+												invalid
+											/>
+										)}
+										{variant === "both" && (
+											<Input
+												placeholder="Placeholder"
+												leftSlot={<Mail />}
+												rightSlot={<CircleX />}
+												invalid
+											/>
+										)}
+										{variant === "left-double-right" && (
+											<Input
+												placeholder="Placeholder"
+												leftSlot={<Mail />}
+												rightSlot={<CircleX />}
+												suffix="milliseconds"
+												invalid
+											/>
+										)}
+									</div>
+
+									{/* Disabled Variants */}
+									<div className="w-70 flex gap-3 justify-center">
+										{variant === "none" && (
+											<Input placeholder="Aidbox" disabled />
+										)}
+										{variant === "left" && (
+											<Input
+												placeholder="Aidbox"
+												leftSlot={<Mail />}
+												disabled
+											/>
+										)}
+										{variant === "right" && (
+											<Input
+												placeholder="Aidbox"
+												rightSlot={<CircleX />}
+												disabled
+											/>
+										)}
+										{variant === "both" && (
+											<Input
+												placeholder="Aidbox"
+												leftSlot={<Mail />}
+												rightSlot={<CircleX />}
+												disabled
+											/>
+										)}
+										{variant === "left-double-right" && (
+											<Input
+												placeholder="Aidbox"
+												leftSlot={<Mail />}
+												rightSlot={<CircleX />}
+												suffix="milliseconds"
+												disabled
+											/>
+										)}
+									</div>
+								</div>
+							</div>
+						);
+					},
+				)}
+
+				{/* Label + Description Section */}
+				<div className="mt-8">
+					<div className="flex items-center mb-4 justify-between">
+						<div className="w-40 text-left">Input + Label + Description</div>
+						<div className="w-70 text-left text-sm text-text-secondary">
+							Invalid:
+							<Badge variant="outline" className="text-xs">
+								false
+							</Badge>
+						</div>
+						<div className="w-70 text-left text-sm text-text-secondary">
+							Invalid:
+							<Badge variant="outline" className="text-xs">
+								true
+							</Badge>
+						</div>
+						<div className="w-70 text-left text-sm text-text-secondary">
+							Disabled:
+							<Badge variant="outline" className="text-xs">
+								true
+							</Badge>
+						</div>
+					</div>
+
+					{(
+						["none", "left", "right", "both", "left-double-right"] as const
+					).map((variant) => (
+						<div
+							className="items-center gap-3 py-3 border-gray-l00 border-t border-border-separator"
+							key={`label-${variant}`}
+						>
+							<div className="flex gap-3 items-center py-2 justify-between">
+								<div className="w-40 text-sm text-text-secondary">
+									<div className="flex">
+										<div className="w-15">Slots:</div>
+										<Badge variant="outline" className="text-xs">
+											{variant}
+										</Badge>
+									</div>
+								</div>
+
+								{/* Default Variants with Label */}
+								<div className="w-70 flex gap-3 justify-center">
+									{variant === "none" && (
+										<InputWithLabel placeholder="Placeholder" />
+									)}
+									{variant === "left" && (
+										<InputWithLabel
+											placeholder="Placeholder"
+											leftSlot={<Mail />}
+										/>
+									)}
+									{variant === "right" && (
+										<InputWithLabel
+											placeholder="Placeholder"
+											rightSlot={<CircleX />}
+										/>
+									)}
+									{variant === "both" && (
+										<InputWithLabel
+											placeholder="Placeholder"
+											leftSlot={<Mail />}
+											rightSlot={<CircleX />}
+										/>
+									)}
+									{variant === "left-double-right" && (
+										<InputWithLabel
+											placeholder="Placeholder"
+											leftSlot={<Mail />}
+											rightSlot={<CircleX />}
+											suffix="milliseconds"
+										/>
+									)}
+								</div>
+
+								{/* Critical Variants with Label */}
+								<div className="w-70 flex gap-3 justify-center">
+									{variant === "none" && (
+										<InputWithLabel placeholder="Placeholder" invalid />
+									)}
+									{variant === "left" && (
+										<InputWithLabel
+											placeholder="Placeholder"
+											leftSlot={<Mail />}
+											invalid
+										/>
+									)}
+									{variant === "right" && (
+										<InputWithLabel
+											placeholder="Placeholder"
+											rightSlot={<CircleX />}
+											invalid
+										/>
+									)}
+									{variant === "both" && (
+										<InputWithLabel
+											placeholder="Placeholder"
+											leftSlot={<Mail />}
+											rightSlot={<CircleX />}
+											invalid
+										/>
+									)}
+									{variant === "left-double-right" && (
+										<InputWithLabel
+											placeholder="Placeholder"
+											leftSlot={<Mail />}
+											rightSlot={<CircleX />}
+											suffix="milliseconds"
+											invalid
+										/>
+									)}
+								</div>
+
+								{/* Disabled Variants with Label */}
+								<div className="w-70 flex gap-3 justify-center">
+									{variant === "none" && (
+										<InputWithLabel placeholder="Aidbox" disabled />
+									)}
+									{variant === "left" && (
+										<InputWithLabel
+											placeholder="Aidbox"
+											leftSlot={<Mail />}
+											disabled
+										/>
+									)}
+									{variant === "right" && (
+										<InputWithLabel
+											placeholder="Aidbox"
+											rightSlot={<CircleX />}
+											disabled
+										/>
+									)}
+									{variant === "both" && (
+										<InputWithLabel
+											placeholder="Aidbox"
+											leftSlot={<Mail />}
+											rightSlot={<CircleX />}
+											disabled
+										/>
+									)}
+									{variant === "left-double-right" && (
+										<InputWithLabel
+											placeholder="Aidbox"
+											leftSlot={<Mail />}
+											rightSlot={<CircleX />}
+											suffix="milliseconds"
+											disabled
+										/>
+									)}
+								</div>
+							</div>
+						</div>
+					))}
+				</div>
+			</div>
+		</div>
+	),
+} satisfies Story;

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

@@ -0,0 +1,173 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "#shadcn/lib/utils";
+
+const iconBaseClasses =
+	"absolute top-1/2 -translate-y-1/2 cursor-pointer z-10 flex items-center justify-center [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0";
+
+const iconLeftPosition =
+	"left-3 hover:text-text-tertiary hover:cursor-default transition-colors duration-300";
+
+const iconRightContainer =
+	"absolute right-3 top-1/2 -translate-y-1/2 flex gap-2 z-10";
+
+const iconNormalColor =
+	"text-text-tertiary hover:text-fg-secondary transition-colors duration-300";
+const iconInvalidColor =
+	"text-fg-tertiary hover:text-fg-secondary transition-colors duration-300";
+const iconDisabledColor =
+	"text-text-disabled hover:cursor-not-allowed transition-colors duration-300";
+
+const iconWrapperClasses = "[&>svg]:w-full [&>svg]:h-full [&>svg]:stroke-[1.5]";
+
+const iconRightItemClasses =
+	"cursor-pointer flex items-center justify-center transition-colors duration-300";
+
+const suffixClasses =
+	"border-border-primary bg-bg-tertiary text-text-tertiary flex items-center rounded-r-md border px-3 py-1 typo-body cursor-default transition-colors duration-300";
+
+const suffixDisabledClasses =
+	"border-border-primary bg-bg-tertiary text-text-disabled flex items-center rounded-r-md border px-3 py-1 typo-body hover:cursor-not-allowed transition-colors duration-300";
+
+const suffixInvalidClasses =
+	"border-border-error bg-bg-secondary flex items-center rounded-r-md border px-3 py-1 text-text-tertiary typo-body cursor-default transition-colors duration-300";
+
+const inputVariants = cva(
+	cn(
+		"h-9 file:text-text-primary placeholder:text-text-quternary disabled:placeholder:text-text-disabled selection:bg-bg-primary selection:text-text-primary-foreground border-border-primary hover:border-border-primary_hover flex w-full min-w-0 border bg-transparent px-3 py-2 typo-body text-base transition-all duration-300 outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-md file:font-medium disabled:bg-bg-secondary disabled:cursor-not-allowed disabled:border-border-primary md:text-md selection:bg-selection",
+		"focus-visible:ring-4 focus-visible:ring-ring-blue focus-visible:border-border-link",
+		"aria-invalid:ring-destructive aria-invalid:text-text-error-primary aria-invalid:border-border-error-primary",
+		"",
+		"rounded-md",
+	),
+	{
+		variants: {
+			hasLeftSlot: {
+				true: "pl-9",
+			},
+			hasRightSlot: {
+				true: "pr-9",
+			},
+			hasSuffix: {
+				true: "border-r-0 focus-visible:ring-offset-0 rounded-l-md rounded-r-none focus-visible:border-r-1",
+			},
+			invalid: {
+				true: "border-border-error focus-visible:ring-4 focus-visible:ring-ring-red focus-visible:border-border-error hover:border-border-error_inverse transition-all duration-300",
+			},
+		},
+		defaultVariants: {
+			hasSuffix: false,
+			invalid: false,
+		},
+	},
+);
+
+interface InputProps
+	extends React.ComponentProps<"input">,
+		VariantProps<typeof inputVariants> {
+	type?: "text" | "password";
+	suffix?: string;
+	invalid?: boolean;
+	leftSlot?: React.ReactNode;
+	rightSlot?: React.ReactNode;
+}
+
+function Input({
+	className,
+	type,
+	invalid,
+	suffix,
+	leftSlot,
+	rightSlot,
+	...props
+}: InputProps) {
+	const processedLeftSlot = leftSlot === "None" ? undefined : leftSlot;
+	const processedRightSlot = rightSlot === "None" ? undefined : rightSlot;
+
+	const hasLeftIcon =
+		processedLeftSlot &&
+		processedLeftSlot !== null &&
+		processedLeftSlot !== undefined;
+	const hasRightIcon =
+		processedRightSlot &&
+		processedRightSlot !== null &&
+		processedRightSlot !== undefined;
+
+	const renderLeftSlot = () => {
+		if (!hasLeftIcon) return null;
+		const colorClasses = props.disabled
+			? iconDisabledColor
+			: invalid
+				? iconInvalidColor
+				: iconNormalColor;
+		return (
+			<div className={`${iconBaseClasses} ${iconLeftPosition} ${colorClasses}`}>
+				<div className={iconWrapperClasses}>{processedLeftSlot}</div>
+			</div>
+		);
+	};
+
+	const renderRightSlot = () => {
+		if (!hasRightIcon) return null;
+
+		const colorClasses = props.disabled
+			? iconDisabledColor
+			: invalid
+				? iconInvalidColor
+				: iconNormalColor;
+
+		return (
+			<div className={`${iconRightContainer} ${iconBaseClasses}`}>
+				{hasRightIcon && (
+					<div className={`${iconRightItemClasses} ${colorClasses}`}>
+						<div className={iconWrapperClasses}>{processedRightSlot}</div>
+					</div>
+				)}
+			</div>
+		);
+	};
+
+	// Input tag
+	const inputElement = (
+		<input
+			type={type}
+			data-slot="input"
+			className={cn(
+				inputVariants({
+					invalid,
+					hasLeftSlot: !!leftSlot,
+					hasRightSlot: !!rightSlot,
+					hasSuffix: !!suffix,
+					className,
+				}),
+			)}
+			{...props}
+		/>
+	);
+
+	return (
+		<div className="flex w-full min-w-0">
+			<div className="flex-1 relative">
+				{renderLeftSlot()}
+				{inputElement}
+				{renderRightSlot()}
+			</div>
+			{suffix && (
+				<div
+					className={
+						props.disabled
+							? suffixDisabledClasses
+							: invalid
+								? suffixInvalidClasses
+								: suffixClasses
+					}
+				>
+					{suffix}
+				</div>
+			)}
+		</div>
+	);
+}
+
+export { Input, inputVariants };

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

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Checkbox } from "#shadcn/components/ui/checkbox";
+import { Label } from "#shadcn/components/ui/label";
+
+const meta = {
+	title: "Component/Label",
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Demo = {
+	render: () => (
+		<div>
+			<div className="flex items-center space-x-2">
+				<Checkbox id="terms" />
+				<Label htmlFor="terms">Accept terms and conditions</Label>
+			</div>
+		</div>
+	),
+} satisfies Story;

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

@@ -0,0 +1,22 @@
+import * as LabelPrimitive from "@radix-ui/react-label";
+import type * as React from "react";
+
+import { cn } from "#shadcn/lib/utils";
+
+function Label({
+	className,
+	...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+	return (
+		<LabelPrimitive.Root
+			data-slot="label"
+			className={cn(
+				"flex items-center gap-2 text-text-primary typo-label leading-none select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Label };