@nationaldesignstudio/react 0.5.2 → 0.5.3

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

@@ -1,167 +0,0 @@
-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", async () => {
-			render(<Input placeholder="Default" />);
-			const input = page.getByRole("textbox");
-			await expect.element(input).toHaveAttribute("data-size", "default");
-		});
-
-		test("applies small size", async () => {
-			render(<Input size="sm" placeholder="Small" />);
-			const input = page.getByRole("textbox");
-			await expect.element(input).toHaveAttribute("data-size", "sm");
-		});
-
-		test("applies large size", async () => {
-			render(<Input size="lg" placeholder="Large" />);
-			const input = page.getByRole("textbox");
-			await expect.element(input).toHaveAttribute("data-size", "lg");
-		});
-
-		test("applies error state", async () => {
-			render(<Input error placeholder="Error" />);
-			const input = page.getByRole("textbox");
-			await expect.element(input).toHaveAttribute("data-error", "true");
-		});
-	});
-
-	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/ndstudio-footer/index.ts

@@ -1 +0,0 @@
-export { NdstudioFooter, type NdstudioFooterProps } from "./ndstudio-footer";

package/src/components/atoms/pager-control/index.ts

@@ -1,5 +0,0 @@
-export {
-	PagerControl,
-	type PagerControlProps,
-	pagerControlVariants,
-} from "./pager-control";

package/src/components/atoms/pager-control/pager-control.stories.tsx

@@ -1,207 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import * as React from "react";
-import { PagerControl } from ".";
-
-const meta: Meta<typeof PagerControl> = {
-	title: "Atoms/PagerControl",
-} as Meta<typeof PagerControl>;
-
-export default meta;
-type Story = StoryObj<typeof PagerControl>;
-
-export const Playground: Story = {
-	render: (args) => <PagerControl {...args} />,
-};
-Playground.argTypes = {
-	count: {
-		control: {
-			type: "number",
-			min: 1,
-			max: 10,
-		},
-	},
-	activeIndex: {
-		control: {
-			type: "number",
-			min: 0,
-		},
-	},
-	duration: {
-		control: {
-			type: "number",
-			min: 0,
-			max: 10000,
-			step: 500,
-		},
-	},
-	autoPlay: {
-		control: {
-			type: "boolean",
-		},
-	},
-	pauseOnHover: {
-		control: {
-			type: "boolean",
-		},
-	},
-	loop: {
-		control: {
-			type: "boolean",
-		},
-	},
-	size: {
-		control: {
-			type: "radio",
-		},
-		options: ["sm", "default", "lg"],
-	},
-	variant: {
-		control: {
-			type: "radio",
-		},
-		options: ["charcoal", "ivory"],
-	},
-};
-Playground.args = {
-	count: 4,
-	duration: 5000,
-	autoPlay: true,
-	pauseOnHover: true,
-	loop: true,
-	size: "default",
-	variant: "charcoal",
-};
-
-// =============================================================================
-// Variants
-// =============================================================================
-
-export const Charcoal = () => <PagerControl count={4} variant="charcoal" />;
-
-export const Ivory = () => <PagerControl count={4} variant="ivory" />;
-
-// =============================================================================
-// Sizes
-// =============================================================================
-
-export const Small = () => <PagerControl count={4} size="sm" />;
-
-export const Default = () => <PagerControl count={4} size="default" />;
-
-export const Large = () => <PagerControl count={4} size="lg" />;
-
-// =============================================================================
-// Counts
-// =============================================================================
-
-export const TwoPages = () => <PagerControl count={2} />;
-
-export const FivePages = () => <PagerControl count={5} />;
-
-export const EightPages = () => <PagerControl count={8} />;
-
-// =============================================================================
-// Durations
-// =============================================================================
-
-export const FastDuration = () => <PagerControl count={4} duration={2000} />;
-
-export const SlowDuration = () => <PagerControl count={4} duration={8000} />;
-
-// =============================================================================
-// Controls
-// =============================================================================
-
-export const NoAutoPlay = () => <PagerControl count={4} autoPlay={false} />;
-
-export const NoLoop = () => (
-	<PagerControl count={4} loop={false} duration={3000} />
-);
-
-export const NoPauseOnHover = () => (
-	<PagerControl count={4} pauseOnHover={false} />
-);
-
-// =============================================================================
-// Controlled
-// =============================================================================
-
-export const Controlled = () => {
-	const [activeIndex, setActiveIndex] = React.useState(0);
-
-	return (
-		<div className="flex flex-col items-center gap-24">
-			<PagerControl
-				count={4}
-				activeIndex={activeIndex}
-				onChange={setActiveIndex}
-				autoPlay={false}
-			/>
-			<div className="flex gap-10">
-				<button
-					type="button"
-					onClick={() => setActiveIndex((prev) => Math.max(0, prev - 1))}
-					className="rounded bg-gray-200 px-12 py-6"
-				>
-					Previous
-				</button>
-				<span className="px-12 py-6">Page {activeIndex + 1} of 4</span>
-				<button
-					type="button"
-					onClick={() => setActiveIndex((prev) => Math.min(3, prev + 1))}
-					className="rounded bg-gray-200 px-12 py-6"
-				>
-					Next
-				</button>
-			</div>
-		</div>
-	);
-};
-
-// =============================================================================
-// Integration Example
-// =============================================================================
-
-export const WithCarousel = () => {
-	const [activeIndex, setActiveIndex] = React.useState(0);
-	const slides = [
-		{ id: 1, color: "bg-blue-100", title: "Slide 1" },
-		{ id: 2, color: "bg-green-100", title: "Slide 2" },
-		{ id: 3, color: "bg-yellow-100", title: "Slide 3" },
-		{ id: 4, color: "bg-purple-100", title: "Slide 4" },
-	];
-
-	return (
-		<div className="flex w-[400px] flex-col gap-16">
-			<div className="relative h-[200px] overflow-hidden rounded-radius-12">
-				{slides.map((slide, index) => (
-					<div
-						key={slide.id}
-						className={cn(
-							"absolute inset-0 flex items-center justify-center transition-transform duration-500",
-							slide.color,
-						)}
-						style={{
-							transform: `translateX(${(index - activeIndex) * 100}%)`,
-						}}
-					>
-						<span className="text-xl font-semibold">{slide.title}</span>
-					</div>
-				))}
-			</div>
-			<div className="flex justify-center">
-				<PagerControl
-					count={slides.length}
-					activeIndex={activeIndex}
-					onChange={setActiveIndex}
-					duration={5000}
-				/>
-			</div>
-		</div>
-	);
-};
-
-// Helper for carousel story
-function cn(...classes: (string | boolean | undefined)[]) {
-	return classes.filter(Boolean).join(" ");
-}

package/src/components/atoms/pager-control/pager-control.test.tsx

@@ -1,130 +0,0 @@
-import { describe, expect, test, vi } from "vitest";
-import { page, userEvent } from "vitest/browser";
-import { render } from "vitest-browser-react";
-import { PagerControl } from "./pager-control";
-
-describe("PagerControl", () => {
-	describe("Accessibility", () => {
-		test("has correct tablist role", async () => {
-			render(<PagerControl count={4} autoPlay={false} />);
-			await expect
-				.element(page.getByRole("tablist", { name: "Page indicators" }))
-				.toBeInTheDocument();
-		});
-
-		test("renders correct number of tab buttons", async () => {
-			render(<PagerControl count={4} autoPlay={false} />);
-			const tabs = page.getByRole("tab").all();
-			expect(await tabs).toHaveLength(4);
-		});
-
-		test("active tab has aria-selected true", async () => {
-			render(<PagerControl count={4} activeIndex={1} autoPlay={false} />);
-			const tabs = page.getByRole("tab").all();
-			const tabElements = await tabs;
-			await expect
-				.element(tabElements[0])
-				.toHaveAttribute("aria-selected", "false");
-			await expect
-				.element(tabElements[1])
-				.toHaveAttribute("aria-selected", "true");
-		});
-
-		test("tabs have accessible labels", async () => {
-			render(<PagerControl count={3} activeIndex={0} autoPlay={false} />);
-			await expect
-				.element(page.getByRole("tab", { name: "Page 1 of 3, current" }))
-				.toBeInTheDocument();
-			await expect
-				.element(page.getByRole("tab", { name: "Go to page 2 of 3" }))
-				.toBeInTheDocument();
-		});
-
-		test("is focusable via keyboard", async () => {
-			render(<PagerControl count={4} autoPlay={false} />);
-			await userEvent.keyboard("{Tab}");
-			const firstTab = page.getByRole("tab").all();
-			await expect.element((await firstTab)[0]).toHaveFocus();
-		});
-	});
-
-	describe("Interactions", () => {
-		test("calls onChange when dot is clicked", async () => {
-			const handleChange = vi.fn();
-			render(
-				<PagerControl
-					count={4}
-					activeIndex={0}
-					onChange={handleChange}
-					autoPlay={false}
-				/>,
-			);
-			await page.getByRole("tab", { name: "Go to page 3 of 4" }).click();
-			expect(handleChange).toHaveBeenCalledWith(2);
-		});
-
-		test("clicking active dot calls onChange with same index", async () => {
-			const handleChange = vi.fn();
-			render(
-				<PagerControl
-					count={4}
-					activeIndex={1}
-					onChange={handleChange}
-					autoPlay={false}
-				/>,
-			);
-			await page.getByRole("tab", { name: "Page 2 of 4, current" }).click();
-			expect(handleChange).toHaveBeenCalledWith(1);
-		});
-
-		test("updates internal state when uncontrolled", async () => {
-			render(<PagerControl count={4} autoPlay={false} />);
-			// Initially first is active
-			await expect
-				.element(page.getByRole("tab", { name: "Page 1 of 4, current" }))
-				.toBeInTheDocument();
-
-			// Click third dot
-			await page.getByRole("tab", { name: "Go to page 3 of 4" }).click();
-
-			// Now third should be active
-			await expect
-				.element(page.getByRole("tab", { name: "Page 3 of 4, current" }))
-				.toBeInTheDocument();
-		});
-	});
-
-	describe("Variants", () => {
-		test("applies charcoal variant classes by default", async () => {
-			render(<PagerControl count={4} autoPlay={false} />);
-			const tabs = await page.getByRole("tab").all();
-			// Active dot track should have bg-alpha-black-30
-			await expect.element(tabs[0]).toHaveClass(/bg-alpha-black-30/);
-			// Inactive dots should have bg-alpha-black-30
-			await expect.element(tabs[1]).toHaveClass(/bg-alpha-black-30/);
-		});
-
-		test("applies ivory variant classes", async () => {
-			render(<PagerControl count={4} variant="ivory" autoPlay={false} />);
-			const tabs = await page.getByRole("tab").all();
-			// Active dot track should have bg-alpha-white-30
-			await expect.element(tabs[0]).toHaveClass(/bg-alpha-white-30/);
-			// Inactive dots should have bg-alpha-white-30
-			await expect.element(tabs[1]).toHaveClass(/bg-alpha-white-30/);
-		});
-	});
-
-	describe("Count", () => {
-		test("renders correct number of dots for count=2", async () => {
-			render(<PagerControl count={2} autoPlay={false} />);
-			const tabs = await page.getByRole("tab").all();
-			expect(tabs).toHaveLength(2);
-		});
-
-		test("renders correct number of dots for count=8", async () => {
-			render(<PagerControl count={8} autoPlay={false} />);
-			const tabs = await page.getByRole("tab").all();
-			expect(tabs).toHaveLength(8);
-		});
-	});
-});

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

@@ -1,30 +0,0 @@
-export type {
-	PopoverArrowProps,
-	PopoverBackdropProps,
-	PopoverCloseProps,
-	PopoverDescriptionProps,
-	PopoverPopupProps,
-	PopoverPortalProps,
-	PopoverPositionerProps,
-	PopoverProps,
-	PopoverRootProps,
-	PopoverTitleProps,
-	PopoverTriggerProps,
-} from "./popover";
-
-export {
-	Popover,
-	PopoverArrow,
-	PopoverBackdrop,
-	PopoverClose,
-	PopoverDescription,
-	PopoverParts,
-	PopoverPopup,
-	PopoverPortal,
-	PopoverPositioner,
-	PopoverRoot,
-	PopoverTitle,
-	PopoverTrigger,
-	popoverArrowVariants,
-	popoverPopupVariants,
-} from "./popover";