@nationaldesignstudio/react 0.0.14 → 0.0.16

package/src/components/dev-tools/dev-toolbar/dev-toolbar.tsx

@@ -0,0 +1,196 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { GridOverlay } from "../grid-overlay";
+
+function GridIcon({ active }: { active?: boolean }) {
+	return (
+		<svg
+			width="20"
+			height="20"
+			viewBox="0 0 20 20"
+			fill="none"
+			stroke="currentColor"
+			strokeWidth={active ? "2" : "1.5"}
+			aria-hidden="true"
+		>
+			<rect x="2" y="2" width="16" height="16" rx="2" />
+			<line x1="7" y1="2" x2="7" y2="18" />
+			<line x1="13" y1="2" x2="13" y2="18" />
+		</svg>
+	);
+}
+
+export interface DevToolbarProps {
+	defaultExpanded?: boolean;
+}
+
+const DRAG_THRESHOLD = 3;
+
+export function DevToolbar({ defaultExpanded = false }: DevToolbarProps) {
+	const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+	const [showGrid, setShowGrid] = useState(false);
+	const [position, setPosition] = useState({ x: 0, y: 0 });
+	const [isDragging, setIsDragging] = useState(false);
+	const hasDraggedRef = useRef(false);
+	const dragRef = useRef<{
+		startX: number;
+		startY: number;
+		startPosX: number;
+		startPosY: number;
+	} | null>(null);
+	const toolbarRef = useRef<HTMLDivElement>(null);
+
+	const toggleGrid = useCallback(() => setShowGrid((prev) => !prev), []);
+	const toggleExpanded = useCallback(() => setIsExpanded((prev) => !prev), []);
+
+	useEffect(() => {
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if ((e.ctrlKey || e.metaKey) && e.key === "g") {
+				e.preventDefault();
+				toggleGrid();
+			}
+		};
+
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [toggleGrid]);
+
+	const handleDragStart = useCallback(
+		(clientX: number, clientY: number) => {
+			setIsDragging(true);
+			hasDraggedRef.current = false;
+			dragRef.current = {
+				startX: clientX,
+				startY: clientY,
+				startPosX: position.x,
+				startPosY: position.y,
+			};
+		},
+		[position],
+	);
+
+	const handleDragMove = useCallback(
+		(clientX: number, clientY: number) => {
+			if (!isDragging || !dragRef.current) return;
+
+			const deltaX = clientX - dragRef.current.startX;
+			const deltaY = clientY - dragRef.current.startY;
+
+			if (
+				Math.abs(deltaX) > DRAG_THRESHOLD ||
+				Math.abs(deltaY) > DRAG_THRESHOLD
+			) {
+				hasDraggedRef.current = true;
+			}
+
+			setPosition({
+				x: dragRef.current.startPosX + deltaX,
+				y: dragRef.current.startPosY - deltaY,
+			});
+		},
+		[isDragging],
+	);
+
+	const handleDragEnd = useCallback(() => {
+		setIsDragging(false);
+		dragRef.current = null;
+	}, []);
+
+	useEffect(() => {
+		if (!isDragging) return;
+
+		const handleMouseMove = (e: MouseEvent) =>
+			handleDragMove(e.clientX, e.clientY);
+		const handleTouchMove = (e: TouchEvent) => {
+			if (e.touches[0])
+				handleDragMove(e.touches[0].clientX, e.touches[0].clientY);
+		};
+		const handleEnd = () => handleDragEnd();
+
+		window.addEventListener("mousemove", handleMouseMove);
+		window.addEventListener("mouseup", handleEnd);
+		window.addEventListener("touchmove", handleTouchMove);
+		window.addEventListener("touchend", handleEnd);
+
+		return () => {
+			window.removeEventListener("mousemove", handleMouseMove);
+			window.removeEventListener("mouseup", handleEnd);
+			window.removeEventListener("touchmove", handleTouchMove);
+			window.removeEventListener("touchend", handleEnd);
+		};
+	}, [isDragging, handleDragMove, handleDragEnd]);
+
+	const handleBarMouseDown = (e: React.MouseEvent) => {
+		e.preventDefault();
+		handleDragStart(e.clientX, e.clientY);
+	};
+
+	const handleBarTouchStart = (e: React.TouchEvent) => {
+		if (e.touches[0]) {
+			handleDragStart(e.touches[0].clientX, e.touches[0].clientY);
+		}
+	};
+
+	const handleBarClick = () => {
+		if (!hasDraggedRef.current) {
+			toggleExpanded();
+		}
+		hasDraggedRef.current = false;
+	};
+
+	return (
+		<>
+			{showGrid && <GridOverlay />}
+
+			<div
+				ref={toolbarRef}
+				className="fixed bottom-4 left-1/2 z-[9999]"
+				style={{
+					transform: `translate(calc(-50% + ${position.x}px), ${-position.y}px)`,
+				}}
+				data-testid="dev-toolbar"
+			>
+				<div
+					className={`bg-gray-1100 rounded-radius-16 shadow-lg flex flex-col items-center overflow-hidden px-spacing-12 py-spacing-8 ${isExpanded ? "gap-spacing-4" : ""}`}
+				>
+					<div
+						className={`
+							grid transition-all duration-300 ease-out
+							${isExpanded ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"}
+						`}
+					>
+						<div className="overflow-hidden">
+							<button
+								type="button"
+								onClick={toggleGrid}
+								className={`
+									size-spacing-40 rounded-full flex items-center justify-center transition-colors
+									${
+										showGrid
+											? "text-gray-50"
+											: "text-gray-400 hover:text-gray-50 hover:bg-alpha-white-10"
+									}
+								`}
+								title="Toggle Grid (⌘G)"
+								aria-label="Toggle grid overlay"
+							>
+								<GridIcon active={showGrid} />
+							</button>
+						</div>
+					</div>
+
+					<button
+						type="button"
+						onMouseDown={handleBarMouseDown}
+						onTouchStart={handleBarTouchStart}
+						onClick={handleBarClick}
+						className={`
+							w-spacing-32 h-spacing-4 bg-gray-50 rounded-full transition-opacity
+							${isDragging ? "opacity-100 cursor-grabbing" : "opacity-60 hover:opacity-100 cursor-grab"}
+						`}
+						aria-label={isExpanded ? "Close dev tools" : "Open dev tools"}
+					/>
+				</div>
+			</div>
+		</>
+	);
+}

package/src/components/dev-tools/dev-toolbar/index.ts

@@ -0,0 +1 @@
+export { DevToolbar, type DevToolbarProps } from "./dev-toolbar";

package/src/components/dev-tools/grid-overlay/grid-overlay.tsx

@@ -0,0 +1,41 @@
+export interface GridOverlayProps {
+	columnOpacity?: number;
+	borderOpacity?: number;
+	visible?: boolean;
+}
+
+export function GridOverlay({
+	columnOpacity = 0.15,
+	borderOpacity = 0.3,
+	visible = true,
+}: GridOverlayProps) {
+	const columns = Array.from({ length: 24 }, (_, i) => i);
+
+	return (
+		<div
+			className={`
+				fixed inset-0 z-[9998] pointer-events-none overflow-hidden
+				transition-opacity duration-300 ease-out
+				${visible ? "opacity-100" : "opacity-0"}
+			`}
+			aria-hidden="true"
+			data-testid="grid-overlay"
+		>
+			<div className="h-full w-full max-w-[90rem] mx-auto px-[var(--spatial-grid-small-margin)] md:px-[var(--spatial-grid-medium-margin)] lg:px-[var(--spatial-grid-large-margin)]">
+				<div className="h-full grid grid-cols-4 md:grid-cols-12 lg:grid-cols-24 gap-[var(--spatial-grid-small-gutter)] md:gap-[var(--spatial-grid-medium-gutter)] lg:gap-[var(--spatial-grid-large-gutter)]">
+					{columns.map((index) => (
+						<div
+							key={index}
+							className="h-full border border-red-500"
+							style={{
+								backgroundColor: `rgb(239 68 68 / ${columnOpacity})`,
+								borderColor: `rgb(239 68 68 / ${borderOpacity})`,
+							}}
+							data-column={index + 1}
+						/>
+					))}
+				</div>
+			</div>
+		</div>
+	);
+}

package/src/components/dev-tools/grid-overlay/index.ts

@@ -0,0 +1 @@
+export { GridOverlay, type GridOverlayProps } from "./grid-overlay";

package/src/components/dev-tools/index.ts

@@ -0,0 +1,2 @@
+export { DevToolbar, type DevToolbarProps } from "./dev-toolbar";
+export { GridOverlay, type GridOverlayProps } from "./grid-overlay";

package/src/components/organisms/card/card.stories.tsx

@@ -0,0 +1,293 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Button } from "../../atoms/button";
+import {
+	Card,
+	CardActions,
+	CardBody,
+	CardContent,
+	CardDescription,
+	CardEyebrow,
+	CardImage,
+	CardTitle,
+} from ".";
+
+const meta: Meta<typeof Card> = {
+	title: "Organisms/Card",
+	component: Card,
+	parameters: {
+		layout: "centered",
+	},
+} as Meta<typeof Card>;
+
+export default meta;
+type Story = StoryObj<typeof Card>;
+
+// =============================================================================
+// Default
+// =============================================================================
+
+export const Default: Story = {
+	render: () => (
+		<div className="w-[418px]">
+			<Card>
+				<CardImage />
+				<CardContent>
+					<CardBody>
+						<CardEyebrow>Optional Eyebrow</CardEyebrow>
+						<div className="flex flex-col gap-[6px]">
+							<CardTitle>Card Title</CardTitle>
+							<CardDescription>
+								Use cards when citizens need to scan items at a glance, either
+								to jump to a more detailed page or absorb short information.
+							</CardDescription>
+						</div>
+					</CardBody>
+					<CardActions>
+						<Button size="default" variant="charcoal">
+							Primary
+						</Button>
+						<Button size="default" variant="charcoalOutline">
+							Secondary
+						</Button>
+					</CardActions>
+				</CardContent>
+			</Card>
+		</div>
+	),
+};
+
+// =============================================================================
+// Layouts
+// =============================================================================
+
+export const Vertical: Story = {
+	render: () => (
+		<div className="w-[418px]">
+			<Card layout="vertical">
+				<CardImage />
+				<CardContent>
+					<CardBody>
+						<CardEyebrow>Optional Eyebrow</CardEyebrow>
+						<div className="flex flex-col gap-[6px]">
+							<CardTitle>Card Title</CardTitle>
+							<CardDescription>
+								Use cards when citizens need to scan items at a glance, either
+								to jump to a more detailed page or absorb short information.
+							</CardDescription>
+						</div>
+					</CardBody>
+					<CardActions>
+						<Button size="default" variant="charcoal">
+							Primary
+						</Button>
+						<Button size="default" variant="charcoalOutline">
+							Secondary
+						</Button>
+					</CardActions>
+				</CardContent>
+			</Card>
+		</div>
+	),
+};
+
+export const Horizontal: Story = {
+	render: () => (
+		<div className="w-[700px]">
+			<Card layout="horizontal">
+				<CardImage />
+				<CardContent>
+					<CardBody>
+						<CardEyebrow>Eyebrow</CardEyebrow>
+						<div className="flex flex-col gap-[9px]">
+							<CardTitle>
+								Cards can support multi line headings easily.
+							</CardTitle>
+							<CardDescription>
+								Use cards when citizens need to scan items at a glance, either
+								to jump to a more detailed page or absorb short information.
+							</CardDescription>
+						</div>
+					</CardBody>
+					<CardActions>
+						<Button size="sm" variant="charcoal">
+							Primary
+						</Button>
+						<Button size="sm" variant="charcoalOutline">
+							Secondary
+						</Button>
+					</CardActions>
+				</CardContent>
+			</Card>
+		</div>
+	),
+};
+
+// =============================================================================
+// Variations
+// =============================================================================
+
+export const WithoutImage: Story = {
+	render: () => (
+		<div className="w-[418px]">
+			<Card>
+				<CardContent>
+					<CardBody>
+						<CardEyebrow>Category</CardEyebrow>
+						<div className="flex flex-col gap-[6px]">
+							<CardTitle>Card Without Image</CardTitle>
+							<CardDescription>
+								Cards can be used without images for text-focused content.
+							</CardDescription>
+						</div>
+					</CardBody>
+					<CardActions>
+						<Button size="default" variant="charcoal">
+							Learn More
+						</Button>
+					</CardActions>
+				</CardContent>
+			</Card>
+		</div>
+	),
+};
+
+export const WithoutEyebrow: Story = {
+	render: () => (
+		<div className="w-[418px]">
+			<Card>
+				<CardImage />
+				<CardContent>
+					<CardBody>
+						<div className="flex flex-col gap-[6px]">
+							<CardTitle>Card Title</CardTitle>
+							<CardDescription>
+								The eyebrow is optional and can be omitted when not needed.
+							</CardDescription>
+						</div>
+					</CardBody>
+					<CardActions>
+						<Button size="default" variant="charcoal">
+							Primary
+						</Button>
+					</CardActions>
+				</CardContent>
+			</Card>
+		</div>
+	),
+};
+
+export const WithoutActions: Story = {
+	render: () => (
+		<div className="w-[418px]">
+			<Card>
+				<CardImage />
+				<CardContent>
+					<CardBody>
+						<CardEyebrow>Information</CardEyebrow>
+						<div className="flex flex-col gap-[6px]">
+							<CardTitle>Informational Card</CardTitle>
+							<CardDescription>
+								Cards without actions can be used for purely informational
+								content that doesn't require user interaction.
+							</CardDescription>
+						</div>
+					</CardBody>
+				</CardContent>
+			</Card>
+		</div>
+	),
+};
+
+export const Minimal: Story = {
+	render: () => (
+		<div className="w-[418px]">
+			<Card>
+				<CardContent>
+					<CardBody>
+						<CardTitle>Minimal Card</CardTitle>
+						<CardDescription>
+							A minimal card with just title and description.
+						</CardDescription>
+					</CardBody>
+				</CardContent>
+			</Card>
+		</div>
+	),
+};
+
+// =============================================================================
+// Grid Example
+// =============================================================================
+
+export const CardGrid: Story = {
+	render: () => (
+		<div className="grid max-w-[900px] grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+			{[1, 2, 3].map((i) => (
+				<Card key={i}>
+					<CardImage />
+					<CardContent>
+						<CardBody>
+							<CardEyebrow>Category {i}</CardEyebrow>
+							<div className="flex flex-col gap-[6px]">
+								<CardTitle>Card Title {i}</CardTitle>
+								<CardDescription>
+									Brief description of the card content goes here.
+								</CardDescription>
+							</div>
+						</CardBody>
+						<CardActions>
+							<Button size="sm" variant="charcoal">
+								Action
+							</Button>
+						</CardActions>
+					</CardContent>
+				</Card>
+			))}
+		</div>
+	),
+	parameters: {
+		layout: "padded",
+	},
+};
+
+// =============================================================================
+// Playground
+// =============================================================================
+
+export const Playground: Story = {
+	render: (args) => (
+		<div className="w-[418px]">
+			<Card {...args}>
+				<CardImage />
+				<CardContent>
+					<CardBody>
+						<CardEyebrow>Eyebrow</CardEyebrow>
+						<div className="flex flex-col gap-[6px]">
+							<CardTitle>Card Title</CardTitle>
+							<CardDescription>
+								Use cards when citizens need to scan items at a glance.
+							</CardDescription>
+						</div>
+					</CardBody>
+					<CardActions>
+						<Button size="default" variant="charcoal">
+							Primary
+						</Button>
+						<Button size="default" variant="charcoalOutline">
+							Secondary
+						</Button>
+					</CardActions>
+				</CardContent>
+			</Card>
+		</div>
+	),
+};
+Playground.argTypes = {
+	layout: {
+		control: { type: "radio" },
+		options: ["vertical", "horizontal"],
+	},
+};
+Playground.args = {
+	layout: "vertical",
+};