@nationaldesignstudio/react 0.5.2 → 0.5.3

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

@@ -1,362 +0,0 @@
-import { describe, expect, test, vi } from "vitest";
-import { page, userEvent } from "vitest/browser";
-import { render } from "vitest-browser-react";
-import {
-	InputGroup,
-	InputGroupAddon,
-	InputGroupButton,
-	InputGroupInput,
-	InputGroupText,
-	InputGroupTextarea,
-} from "./input-group";
-
-// Simple placeholder icon for tests
-const SearchIcon = () => (
-	<svg
-		width="16"
-		height="16"
-		viewBox="0 0 16 16"
-		fill="none"
-		data-testid="search-icon"
-		aria-hidden="true"
-	>
-		<circle cx="7" cy="7" r="5" stroke="currentColor" strokeWidth="1.5" />
-		<path d="M14 14L11 11" stroke="currentColor" strokeWidth="1.5" />
-	</svg>
-);
-
-describe("InputGroup", () => {
-	describe("Accessibility", () => {
-		test("has group role", async () => {
-			render(
-				<InputGroup>
-					<InputGroupInput placeholder="Test" />
-				</InputGroup>,
-			);
-			await expect.element(page.getByRole("group")).toBeInTheDocument();
-		});
-
-		test("input is focusable via keyboard", async () => {
-			render(
-				<InputGroup>
-					<InputGroupInput placeholder="Focusable" />
-				</InputGroup>,
-			);
-			await userEvent.keyboard("{Tab}");
-			await expect.element(page.getByRole("textbox")).toHaveFocus();
-		});
-
-		test("disabled group prevents input focus", async () => {
-			render(
-				<>
-					<InputGroup disabled>
-						<InputGroupInput disabled placeholder="Disabled" />
-					</InputGroup>
-					<InputGroup>
-						<InputGroupInput placeholder="After" />
-					</InputGroup>
-				</>,
-			);
-			await userEvent.keyboard("{Tab}");
-			await expect.element(page.getByPlaceholder("After")).toHaveFocus();
-		});
-
-		test("error state sets aria-invalid on input", async () => {
-			render(
-				<InputGroup>
-					<InputGroupInput aria-invalid="true" placeholder="Error" />
-				</InputGroup>,
-			);
-			await expect
-				.element(page.getByRole("textbox"))
-				.toHaveAttribute("aria-invalid", "true");
-		});
-
-		test("addon button is accessible", async () => {
-			render(
-				<InputGroup>
-					<InputGroupInput placeholder="Input" />
-					<InputGroupAddon align="inline-end">
-						<InputGroupButton aria-label="Submit">Submit</InputGroupButton>
-					</InputGroupAddon>
-				</InputGroup>,
-			);
-			await expect
-				.element(page.getByRole("button", { name: "Submit" }))
-				.toBeInTheDocument();
-		});
-	});
-
-	describe("Interactions", () => {
-		test("input accepts text", async () => {
-			render(
-				<InputGroup>
-					<InputGroupInput placeholder="Type here" />
-				</InputGroup>,
-			);
-			const input = page.getByRole("textbox");
-			await input.fill("Hello World");
-			await expect.element(input).toHaveValue("Hello World");
-		});
-
-		test("clicking addon focuses input", async () => {
-			render(
-				<InputGroup>
-					<InputGroupAddon data-testid="addon">
-						<SearchIcon />
-					</InputGroupAddon>
-					<InputGroupInput placeholder="Test" />
-				</InputGroup>,
-			);
-			await page.getByTestId("addon").click();
-			await expect.element(page.getByRole("textbox")).toHaveFocus();
-		});
-
-		test("clicking button in addon does not focus input", async () => {
-			const handleClick = vi.fn();
-			render(
-				<InputGroup>
-					<InputGroupInput placeholder="Test" />
-					<InputGroupAddon align="inline-end">
-						<InputGroupButton onClick={handleClick}>Click</InputGroupButton>
-					</InputGroupAddon>
-				</InputGroup>,
-			);
-			await page.getByRole("button", { name: "Click" }).click();
-			expect(handleClick).toHaveBeenCalledOnce();
-			// Input should not have focus (button click should work independently)
-		});
-
-		test("input onChange is called", async () => {
-			const handleChange = vi.fn();
-			render(
-				<InputGroup>
-					<InputGroupInput onChange={handleChange} placeholder="Type" />
-				</InputGroup>,
-			);
-			await page.getByRole("textbox").fill("Test");
-			expect(handleChange).toHaveBeenCalled();
-		});
-
-		test("textarea accepts multiline text", async () => {
-			render(
-				<InputGroup>
-					<InputGroupTextarea placeholder="Enter text" rows={4} />
-				</InputGroup>,
-			);
-			const textarea = page.getByRole("textbox");
-			await textarea.fill("Line 1\nLine 2");
-			await expect.element(textarea).toHaveValue("Line 1\nLine 2");
-		});
-	});
-
-	describe("Variants", () => {
-		test("renders with default size", async () => {
-			render(
-				<InputGroup>
-					<InputGroupInput placeholder="Default" />
-				</InputGroup>,
-			);
-			const group = page.getByRole("group");
-			await expect.element(group).toBeInTheDocument();
-		});
-
-		test("renders with small size", async () => {
-			render(
-				<InputGroup size="sm">
-					<InputGroupInput placeholder="Small" />
-				</InputGroup>,
-			);
-			const group = page.getByRole("group");
-			await expect.element(group).toBeInTheDocument();
-		});
-
-		test("renders with large size", async () => {
-			render(
-				<InputGroup size="lg">
-					<InputGroupInput placeholder="Large" />
-				</InputGroup>,
-			);
-			const group = page.getByRole("group");
-			await expect.element(group).toBeInTheDocument();
-		});
-
-		test("applies disabled data attribute", async () => {
-			render(
-				<InputGroup disabled>
-					<InputGroupInput disabled placeholder="Disabled" />
-				</InputGroup>,
-			);
-			const group = page.getByRole("group").first();
-			await expect.element(group).toHaveAttribute("data-disabled", "true");
-		});
-
-		test("has expected data-slot attribute", async () => {
-			render(
-				<InputGroup>
-					<InputGroupInput placeholder="Default" />
-				</InputGroup>,
-			);
-			const group = page.getByRole("group").first();
-			await expect.element(group).toHaveAttribute("data-slot", "input-group");
-		});
-	});
-
-	describe("Addon Positioning", () => {
-		test("inline-start addon has correct data-align", async () => {
-			render(
-				<InputGroup>
-					<InputGroupAddon data-testid="start-addon">
-						<SearchIcon />
-					</InputGroupAddon>
-					<InputGroupInput placeholder="Input" />
-				</InputGroup>,
-			);
-			const addon = page.getByTestId("start-addon");
-			await expect.element(addon).toHaveAttribute("data-align", "inline-start");
-		});
-
-		test("inline-end addon has correct data-align", async () => {
-			render(
-				<InputGroup>
-					<InputGroupInput placeholder="Input" />
-					<InputGroupAddon align="inline-end" data-testid="end-addon">
-						<SearchIcon />
-					</InputGroupAddon>
-				</InputGroup>,
-			);
-			const addon = page.getByTestId("end-addon");
-			await expect.element(addon).toHaveAttribute("data-align", "inline-end");
-		});
-
-		test("block-start addon has correct data-align", async () => {
-			render(
-				<InputGroup>
-					<InputGroupAddon align="block-start" data-testid="block-start-addon">
-						<InputGroupText>Label</InputGroupText>
-					</InputGroupAddon>
-					<InputGroupInput placeholder="Input" />
-				</InputGroup>,
-			);
-			const addon = page.getByTestId("block-start-addon");
-			await expect.element(addon).toHaveAttribute("data-align", "block-start");
-		});
-
-		test("block-end addon has correct data-align", async () => {
-			render(
-				<InputGroup>
-					<InputGroupInput placeholder="Input" />
-					<InputGroupAddon align="block-end" data-testid="block-end-addon">
-						<InputGroupText>Helper</InputGroupText>
-					</InputGroupAddon>
-				</InputGroup>,
-			);
-			const addon = page.getByTestId("block-end-addon");
-			await expect.element(addon).toHaveAttribute("data-align", "block-end");
-		});
-	});
-
-	describe("InputGroupButton", () => {
-		test("renders as button with ghost variant by default", async () => {
-			render(
-				<InputGroup>
-					<InputGroupInput placeholder="Input" />
-					<InputGroupAddon align="inline-end">
-						<InputGroupButton>Click</InputGroupButton>
-					</InputGroupAddon>
-				</InputGroup>,
-			);
-			const button = page.getByRole("button", { name: "Click" });
-			await expect.element(button).toHaveAttribute("type", "button");
-		});
-
-		test("button click is handled", async () => {
-			const handleClick = vi.fn();
-			render(
-				<InputGroup>
-					<InputGroupInput placeholder="Input" />
-					<InputGroupAddon align="inline-end">
-						<InputGroupButton onClick={handleClick}>Submit</InputGroupButton>
-					</InputGroupAddon>
-				</InputGroup>,
-			);
-			await page.getByRole("button", { name: "Submit" }).click();
-			expect(handleClick).toHaveBeenCalledOnce();
-		});
-
-		test("supports different sizes", async () => {
-			render(
-				<InputGroup>
-					<InputGroupInput placeholder="Input" />
-					<InputGroupAddon align="inline-end">
-						<InputGroupButton size="sm" data-testid="sm-button">
-							Small
-						</InputGroupButton>
-					</InputGroupAddon>
-				</InputGroup>,
-			);
-			const button = page.getByTestId("sm-button");
-			await expect.element(button).toHaveAttribute("data-size", "sm");
-		});
-	});
-
-	describe("InputGroupText", () => {
-		test("renders text content", async () => {
-			render(
-				<InputGroup>
-					<InputGroupAddon>
-						<InputGroupText>https://</InputGroupText>
-					</InputGroupAddon>
-					<InputGroupInput placeholder="example.com" />
-				</InputGroup>,
-			);
-			await expect.element(page.getByText("https://")).toBeInTheDocument();
-		});
-
-		test("renders text element", async () => {
-			render(
-				<InputGroup>
-					<InputGroupAddon>
-						<InputGroupText data-testid="text">Prefix</InputGroupText>
-					</InputGroupAddon>
-					<InputGroupInput placeholder="Input" />
-				</InputGroup>,
-			);
-			const text = page.getByTestId("text");
-			await expect.element(text).toBeInTheDocument();
-		});
-	});
-
-	describe("InputGroupTextarea", () => {
-		test("renders textarea element", async () => {
-			render(
-				<InputGroup>
-					<InputGroupTextarea placeholder="Enter text" rows={4} />
-				</InputGroup>,
-			);
-			await expect.element(page.getByRole("textbox")).toBeInTheDocument();
-		});
-
-		test("supports rows attribute", async () => {
-			render(
-				<InputGroup>
-					<InputGroupTextarea placeholder="Enter text" rows={6} />
-				</InputGroup>,
-			);
-			await expect
-				.element(page.getByRole("textbox"))
-				.toHaveAttribute("rows", "6");
-		});
-
-		test("has data-slot attribute", async () => {
-			render(
-				<InputGroup>
-					<InputGroupTextarea placeholder="Enter text" />
-				</InputGroup>,
-			);
-			await expect
-				.element(page.getByRole("textbox"))
-				.toHaveAttribute("data-slot", "input-group-control");
-		});
-	});
-});

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

@@ -1,228 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Input } from ".";
-
-const meta: Meta<typeof Input> = {
-	title: "Atoms/Input",
-	component: Input,
-} as Meta<typeof Input>;
-
-export default meta;
-type Story = StoryObj<typeof Input>;
-
-export const Playground: Story = {
-	render: (args) => <Input {...args} />,
-};
-Playground.argTypes = {
-	size: {
-		control: {
-			type: "radio",
-		},
-		options: ["sm", "default", "lg"],
-	},
-	disabled: {
-		control: {
-			type: "boolean",
-		},
-	},
-	error: {
-		control: {
-			type: "boolean",
-		},
-	},
-	placeholder: {
-		control: {
-			type: "text",
-		},
-	},
-};
-Playground.args = {
-	size: "default",
-	disabled: false,
-	error: false,
-	placeholder: "Enter text...",
-};
-
-// =============================================================================
-// States
-// =============================================================================
-
-/**
- * Default state - white background with subtle border
- */
-export const Default = () => <Input placeholder="Enter text..." />;
-
-/**
- * Filled state - shows how a filled input looks
- */
-export const Filled = () => <Input defaultValue="Filled content" />;
-
-/**
- * Error state - red border and text
- */
-export const ErrorState = () => <Input error placeholder="Invalid input" />;
-
-/**
- * Disabled state - grayed out and not interactive
- */
-export const Disabled = () => <Input disabled placeholder="Disabled input" />;
-
-/**
- * All states comparison
- */
-export const AllStates = () => (
-	<div className="flex flex-col gap-16 max-w-[320px]">
-		<div>
-			<p className="mb-8 text-12 text-text-muted">Default</p>
-			<Input placeholder="Enter text..." />
-		</div>
-		<div>
-			<p className="mb-8 text-12 text-text-muted">Hover (hover the input)</p>
-			<Input placeholder="Hover me..." />
-		</div>
-		<div>
-			<p className="mb-8 text-12 text-text-muted">Focus (click the input)</p>
-			<Input placeholder="Click to focus..." />
-		</div>
-		<div>
-			<p className="mb-8 text-12 text-text-muted">Filled</p>
-			<Input defaultValue="Filled content" />
-		</div>
-		<div>
-			<p className="mb-8 text-12 text-text-muted">Error</p>
-			<Input error placeholder="Invalid input" />
-		</div>
-		<div>
-			<p className="mb-8 text-12 text-text-muted">Disabled</p>
-			<Input disabled placeholder="Disabled input" />
-		</div>
-	</div>
-);
-
-// =============================================================================
-// Sizes
-// =============================================================================
-
-/**
- * Small size - compact input for tight layouts
- */
-export const Small = () => <Input size="sm" placeholder="Small input" />;
-
-/**
- * Default size - standard 48px height
- */
-export const Medium = () => (
-	<Input size="default" placeholder="Default input" />
-);
-
-/**
- * Large size - more prominent input
- */
-export const Large = () => <Input size="lg" placeholder="Large input" />;
-
-/**
- * All sizes comparison
- */
-export const AllSizes = () => (
-	<div className="flex flex-col gap-16 max-w-[320px]">
-		<div>
-			<p className="mb-8 text-12 text-text-muted">Small (36px)</p>
-			<Input size="sm" placeholder="Small input" />
-		</div>
-		<div>
-			<p className="mb-8 text-12 text-text-muted">Default (48px)</p>
-			<Input size="default" placeholder="Default input" />
-		</div>
-		<div>
-			<p className="mb-8 text-12 text-text-muted">Large (56px)</p>
-			<Input size="lg" placeholder="Large input" />
-		</div>
-	</div>
-);
-
-// =============================================================================
-// Types
-// =============================================================================
-
-/**
- * Email input type
- */
-export const EmailType = () => (
-	<Input type="email" placeholder="Enter your email" />
-);
-
-/**
- * Password input type
- */
-export const PasswordType = () => (
-	<Input type="password" placeholder="Enter your password" />
-);
-
-/**
- * Number input type
- */
-export const NumberType = () => (
-	<Input type="number" placeholder="Enter a number" />
-);
-
-/**
- * Search input type
- */
-export const SearchType = () => <Input type="search" placeholder="Search..." />;
-
-// =============================================================================
-// Examples
-// =============================================================================
-
-/**
- * Form field example with label
- */
-export const WithLabel = () => (
-	<div className="flex flex-col gap-8 max-w-[320px]">
-		<label
-			htmlFor="email-input"
-			className="text-14 font-medium text-text-primary"
-		>
-			Email Address
-		</label>
-		<Input id="email-input" type="email" placeholder="you@example.com" />
-	</div>
-);
-
-/**
- * Form field with error message
- */
-export const WithErrorMessage = () => (
-	<div className="flex flex-col gap-8 max-w-[320px]">
-		<label
-			htmlFor="email-error"
-			className="text-14 font-medium text-text-primary"
-		>
-			Email Address
-		</label>
-		<Input
-			id="email-error"
-			type="email"
-			error
-			placeholder="you@example.com"
-			defaultValue="invalid-email"
-		/>
-		<p className="text-12 text-ui-error-color">
-			Please enter a valid email address
-		</p>
-	</div>
-);
-
-/**
- * Required field indicator
- */
-export const RequiredField = () => (
-	<div className="flex flex-col gap-8 max-w-[320px]">
-		<label
-			htmlFor="required-input"
-			className="text-14 font-medium text-text-primary"
-		>
-			Full Name <span className="text-ui-error-color">*</span>
-		</label>
-		<Input id="required-input" required placeholder="John Doe" />
-	</div>
-);