@nationaldesignstudio/react 0.2.0 → 0.3.0

package/src/components/atoms/input/input.test.tsx

@@ -0,0 +1,183 @@
+import { describe, expect, test, vi } from "vitest";
+import { page, userEvent } from "vitest/browser";
+import { render } from "vitest-browser-react";
+import { Input } from "./input";
+
+describe("Input", () => {
+	describe("Accessibility", () => {
+		test("has correct textbox role", async () => {
+			render(<Input placeholder="Enter text" />);
+			await expect.element(page.getByRole("textbox")).toBeInTheDocument();
+		});
+
+		test("is focusable via keyboard", async () => {
+			render(<Input placeholder="Focusable" />);
+			await userEvent.keyboard("{Tab}");
+			await expect.element(page.getByRole("textbox")).toHaveFocus();
+		});
+
+		test("disabled input has disabled attribute", async () => {
+			render(<Input disabled placeholder="Disabled" />);
+			await expect.element(page.getByRole("textbox")).toBeDisabled();
+		});
+
+		test("disabled input is not focusable", async () => {
+			render(
+				<>
+					<Input disabled placeholder="Disabled" />
+					<Input placeholder="After" />
+				</>,
+			);
+			await userEvent.keyboard("{Tab}");
+			// Focus should skip the disabled input and go to the next one
+			await expect.element(page.getByPlaceholder("After")).toHaveFocus();
+		});
+
+		test("input with aria-label has accessible name", async () => {
+			render(<Input aria-label="Search query" />);
+			await expect
+				.element(page.getByRole("textbox", { name: "Search query" }))
+				.toBeInTheDocument();
+		});
+
+		test("error state sets aria-invalid", async () => {
+			render(<Input error placeholder="Error input" />);
+			await expect
+				.element(page.getByRole("textbox"))
+				.toHaveAttribute("aria-invalid", "true");
+		});
+
+		test("non-error state does not have aria-invalid", async () => {
+			render(<Input placeholder="Normal input" />);
+			const input = page.getByRole("textbox");
+			await expect.element(input).not.toHaveAttribute("aria-invalid");
+		});
+	});
+
+	describe("Interactions", () => {
+		test("accepts text input", async () => {
+			render(<Input placeholder="Type here" />);
+			const input = page.getByRole("textbox");
+			await input.fill("Hello World");
+			await expect.element(input).toHaveValue("Hello World");
+		});
+
+		test("calls onChange when text is entered", async () => {
+			const handleChange = vi.fn();
+			render(<Input onChange={handleChange} placeholder="Type here" />);
+			await page.getByRole("textbox").fill("Test");
+			expect(handleChange).toHaveBeenCalled();
+		});
+
+		test("calls onFocus when focused", async () => {
+			const handleFocus = vi.fn();
+			render(<Input onFocus={handleFocus} placeholder="Focus me" />);
+			await page.getByRole("textbox").click();
+			expect(handleFocus).toHaveBeenCalledOnce();
+		});
+
+		test("calls onBlur when focus is lost", async () => {
+			const handleBlur = vi.fn();
+			render(
+				<>
+					<Input onBlur={handleBlur} placeholder="Blur me" />
+					<button type="button">Other</button>
+				</>,
+			);
+			await page.getByRole("textbox").click();
+			await page.getByRole("button").click();
+			expect(handleBlur).toHaveBeenCalledOnce();
+		});
+
+		test("respects maxLength attribute", async () => {
+			render(<Input maxLength={5} placeholder="Max 5 chars" />);
+			const input = page.getByRole("textbox");
+			await input.fill("1234567890");
+			await expect.element(input).toHaveValue("12345");
+		});
+
+		test("respects readonly attribute", async () => {
+			render(<Input readOnly defaultValue="Read only" />);
+			const input = page.getByRole("textbox");
+			await expect.element(input).toHaveAttribute("readonly", "");
+			await expect.element(input).toHaveValue("Read only");
+		});
+	});
+
+	describe("Variants", () => {
+		test("applies default size classes", async () => {
+			render(<Input placeholder="Default" />);
+			const input = page.getByRole("textbox");
+			await expect.element(input).toHaveAttribute("data-size", "default");
+			await expect.element(input).toHaveClass(/h-48/);
+		});
+
+		test("applies small size classes", async () => {
+			render(<Input size="sm" placeholder="Small" />);
+			const input = page.getByRole("textbox");
+			await expect.element(input).toHaveAttribute("data-size", "sm");
+			await expect.element(input).toHaveClass(/h-36/);
+		});
+
+		test("applies large size classes", async () => {
+			render(<Input size="lg" placeholder="Large" />);
+			const input = page.getByRole("textbox");
+			await expect.element(input).toHaveAttribute("data-size", "lg");
+			await expect.element(input).toHaveClass(/h-56/);
+		});
+
+		test("applies error state classes", async () => {
+			render(<Input error placeholder="Error" />);
+			const input = page.getByRole("textbox");
+			await expect.element(input).toHaveAttribute("data-error", "true");
+			await expect.element(input).toHaveClass(/border-ui-error-color/);
+		});
+
+		test("applies semantic token classes for background", async () => {
+			render(<Input placeholder="Default" />);
+			const input = page.getByRole("textbox");
+			await expect.element(input).toHaveClass(/bg-ui-control-background/);
+		});
+
+		test("applies semantic token classes for border", async () => {
+			render(<Input placeholder="Default" />);
+			const input = page.getByRole("textbox");
+			await expect.element(input).toHaveClass(/border-ui-color-border/);
+		});
+	});
+
+	describe("Input Types", () => {
+		test("renders email type", async () => {
+			render(<Input type="email" placeholder="Email" />);
+			await expect
+				.element(page.getByRole("textbox"))
+				.toHaveAttribute("type", "email");
+		});
+
+		test("renders password type", async () => {
+			render(<Input type="password" placeholder="Password" />);
+			// Password inputs don't have textbox role
+			const input = page.getByPlaceholder("Password");
+			await expect.element(input).toHaveAttribute("type", "password");
+		});
+
+		test("renders number type", async () => {
+			render(<Input type="number" placeholder="Number" />);
+			const input = page.getByRole("spinbutton");
+			await expect.element(input).toHaveAttribute("type", "number");
+		});
+
+		test("renders search type", async () => {
+			render(<Input type="search" placeholder="Search" />);
+			const input = page.getByRole("searchbox");
+			await expect.element(input).toHaveAttribute("type", "search");
+		});
+
+		test("defaults to text type", async () => {
+			render(<Input placeholder="Default type" />);
+			await expect
+				.element(page.getByRole("textbox"))
+				.toHaveAttribute("type", "text");
+		});
+	});
+});

package/src/components/atoms/input/input.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import * as React from "react";
+import { tv, type VariantProps } from "tailwind-variants";
+import {
+	formControlBase,
+	formControlError,
+	formControlSizes,
+} from "@/lib/form-control";
+import { cn } from "@/lib/utils";
+
+/**
+ * Input variants for styling based on Figma BaseKit / Interface / Input
+ *
+ * States (handled via CSS pseudo-classes and props):
+ * - Default: White background, subtle border
+ * - Hover: Light gray background (via :hover)
+ * - Focus: Accent border with focus ring (via :focus-visible)
+ * - Error: Error border color (via error prop)
+ * - Disabled: Disabled background (via :disabled)
+ *
+ * Sizes:
+ * - sm: Smaller height and padding
+ * - default: Standard 48px height
+ * - lg: Larger height and padding
+ */
+const inputVariants = tv({
+	base: [
+		...formControlBase,
+		// Input-specific: Placeholder styling
+		"placeholder:text-text-muted",
+	],
+	variants: {
+		size: formControlSizes,
+		error: {
+			...formControlError,
+			true: `${formControlError.true} placeholder:text-ui-error-color/60`,
+		},
+	},
+	defaultVariants: {
+		size: "default",
+		error: false,
+	},
+});
+
+export interface InputProps
+	extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">,
+		VariantProps<typeof inputVariants> {
+	/**
+	 * Whether the input is in an error state
+	 */
+	error?: boolean;
+}
+
+/**
+ * Input component based on Figma BaseKit / Interface / Input
+ *
+ * A styled text input with support for various states:
+ * - Default, hover, focus, error, and disabled states
+ * - Three size variants: sm, default, lg
+ *
+ * Uses semantic UI tokens for theming support.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Input placeholder="Enter your email" />
+ *
+ * // With error state
+ * <Input error placeholder="Invalid input" />
+ *
+ * // Different sizes
+ * <Input size="sm" placeholder="Small" />
+ * <Input size="lg" placeholder="Large" />
+ *
+ * // Disabled
+ * <Input disabled placeholder="Disabled input" />
+ * ```
+ */
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+	({ className, size, error, type = "text", ...props }, ref) => {
+		return (
+			<input
+				ref={ref}
+				type={type}
+				aria-invalid={error || undefined}
+				className={cn(inputVariants({ size, error, class: className }))}
+				data-size={size ?? "default"}
+				data-error={error ?? false}
+				{...props}
+			/>
+		);
+	},
+);
+Input.displayName = "Input";
+
+export { Input, inputVariants };

package/src/components/atoms/select/index.ts

@@ -0,0 +1,18 @@
+export {
+	Select,
+	SelectGroup,
+	SelectGroupLabel,
+	type SelectGroupLabelProps,
+	type SelectGroupProps,
+	SelectOption,
+	type SelectOptionProps,
+	SelectPopup,
+	type SelectPopupProps,
+	type SelectProps,
+	SelectRoot,
+	SelectTrigger,
+	type SelectTriggerProps,
+	selectOptionVariants,
+	selectPopupVariants,
+	selectTriggerVariants,
+} from "./select";