@nationaldesignstudio/react 0.3.0 → 0.5.0

package/src/theme/theme-provider.test.tsx

@@ -0,0 +1,270 @@
+import { describe, expect, test } from "vitest";
+import { page } from "vitest/browser";
+import { render } from "vitest-browser-react";
+import { Button } from "../components/atoms/button/button";
+import { useCSSVars, useTheme } from "./hooks";
+import { ThemeProvider } from "./theme-provider";
+
+function getInlineStyleVar(element: Element, varName: string): string | null {
+	const style = element.getAttribute("style") || "";
+	const regex = new RegExp(`${varName}:\\s*([^;]+)`);
+	const match = style.match(regex);
+	return match ? match[1].trim() : null;
+}
+
+describe("ThemeProvider", () => {
+	describe("CSS Variable Application", () => {
+		test("renders a wrapper div with style attribute", async () => {
+			render(
+				<ThemeProvider>
+					<div data-testid="content">Content</div>
+				</ThemeProvider>,
+			);
+
+			const content = page.getByTestId("content");
+			await expect.element(content).toBeInTheDocument();
+
+			const wrapper = content.element().parentElement;
+			expect(wrapper).toBeTruthy();
+			expect(wrapper?.tagName).toBe("DIV");
+			expect(wrapper?.hasAttribute("style")).toBe(true);
+
+			const styleAttr = wrapper?.getAttribute("style") || "";
+			expect(styleAttr).toContain("--color-bg-page");
+		});
+
+		test("applies className to wrapper div", async () => {
+			render(
+				<ThemeProvider className="custom-class">
+					<div data-testid="content">Content</div>
+				</ThemeProvider>,
+			);
+
+			const content = page.getByTestId("content");
+			const wrapper = content.element().parentElement;
+			expect(wrapper?.classList.contains("custom-class")).toBe(true);
+		});
+
+		test("applyStyles=false skips wrapper div", async () => {
+			function TestContent() {
+				const theme = useTheme();
+				return <div data-testid="content">{theme.colorTheme}</div>;
+			}
+
+			render(
+				<ThemeProvider applyStyles={false}>
+					<TestContent />
+				</ThemeProvider>,
+			);
+
+			const content = page.getByTestId("content");
+			await expect.element(content).toBeInTheDocument();
+			expect(content.element().textContent).toBe("base");
+		});
+	});
+
+	describe("Color Theme Overrides", () => {
+		test("base theme applies CSS variables for buttons", async () => {
+			render(
+				<ThemeProvider color="base">
+					<Button data-testid="btn" variant="primary">
+						Primary
+					</Button>
+				</ThemeProvider>,
+			);
+
+			const button = page.getByTestId("btn");
+			await expect.element(button).toBeInTheDocument();
+
+			const wrapper = button.element().parentElement;
+			const styleAttr = wrapper?.getAttribute("style") || "";
+			expect(styleAttr).toContain("--color-button-primary-bg");
+		});
+
+		test("civic theme overrides button primary color", async () => {
+			render(
+				<ThemeProvider color="civic">
+					<Button data-testid="btn" variant="primary">
+						Primary
+					</Button>
+				</ThemeProvider>,
+			);
+
+			const button = page.getByTestId("btn");
+			await expect.element(button).toBeInTheDocument();
+
+			const wrapper = button.element().parentElement;
+			expect(wrapper).toBeTruthy();
+
+			const styleAttr = wrapper?.getAttribute("style") || "";
+			expect(styleAttr).toContain("--color-button-primary-bg");
+			expect(styleAttr).toContain("red");
+		});
+
+		test("dark theme applies dark mode colors", async () => {
+			render(
+				<ThemeProvider color="dark">
+					<div data-testid="bg" className="bg-bg-page p-16">
+						Dark Theme
+					</div>
+				</ThemeProvider>,
+			);
+
+			const bgElement = page.getByTestId("bg");
+			await expect.element(bgElement).toBeInTheDocument();
+
+			const wrapper = bgElement.element().parentElement;
+			const styleAttr = wrapper?.getAttribute("style") || "";
+			expect(styleAttr).toContain("--color-bg-page");
+		});
+
+		test("institution theme uses green button colors", async () => {
+			render(
+				<ThemeProvider color="institution">
+					<Button data-testid="btn" variant="primary">
+						Institution
+					</Button>
+				</ThemeProvider>,
+			);
+
+			const button = page.getByTestId("btn");
+			await expect.element(button).toBeInTheDocument();
+
+			const wrapper = button.element().parentElement;
+			const styleAttr = wrapper?.getAttribute("style") || "";
+			expect(styleAttr).toContain("--color-button-primary-bg");
+			expect(styleAttr).toContain("green");
+		});
+	});
+
+	describe("Theme Context", () => {
+		test("useTheme returns current theme names", async () => {
+			function ThemeInfo() {
+				const { colorTheme, surfaceTheme } = useTheme();
+				return (
+					<div data-testid="info">
+						{colorTheme}-{surfaceTheme}
+					</div>
+				);
+			}
+
+			render(
+				<ThemeProvider color="civic" surface="sharp">
+					<ThemeInfo />
+				</ThemeProvider>,
+			);
+
+			const info = page.getByTestId("info");
+			await expect.element(info).toBeInTheDocument();
+			expect(info.element().textContent).toBe("civic-sharp");
+		});
+
+		test("useCSSVars returns CSS variable map", async () => {
+			function CSSVarsTest() {
+				const cssVars = useCSSVars();
+				const hasVars = Object.keys(cssVars).length > 0;
+				return (
+					<div data-testid="result">{hasVars ? "has-vars" : "no-vars"}</div>
+				);
+			}
+
+			render(
+				<ThemeProvider>
+					<CSSVarsTest />
+				</ThemeProvider>,
+			);
+
+			const result = page.getByTestId("result");
+			await expect.element(result).toBeInTheDocument();
+			expect(result.element().textContent).toBe("has-vars");
+		});
+	});
+
+	describe("Nested ThemeProviders", () => {
+		test("nested ThemeProvider overrides parent theme", async () => {
+			function ThemeInfo() {
+				const { colorTheme } = useTheme();
+				return <span data-testid="theme">{colorTheme}</span>;
+			}
+
+			render(
+				<ThemeProvider color="base">
+					<div>
+						<ThemeInfo />
+						<ThemeProvider color="civic">
+							<ThemeInfo />
+						</ThemeProvider>
+					</div>
+				</ThemeProvider>,
+			);
+
+			const themes = page.getByTestId("theme");
+			await expect.element(themes.first()).toBeInTheDocument();
+
+			const themeElements = document.querySelectorAll('[data-testid="theme"]');
+			expect(themeElements[0].textContent).toBe("base");
+			expect(themeElements[1].textContent).toBe("civic");
+		});
+	});
+
+	describe("Button Theming Integration", () => {
+		test("button primary-outline inherits theme colors", async () => {
+			render(
+				<ThemeProvider color="civic">
+					<Button data-testid="btn" variant="primary-outline">
+						Outline
+					</Button>
+				</ThemeProvider>,
+			);
+
+			const button = page.getByTestId("btn");
+			await expect.element(button).toBeInTheDocument();
+
+			const wrapper = button.element().parentElement;
+			const styleAttr = wrapper?.getAttribute("style") || "";
+			expect(styleAttr).toContain("--color-button-primary-outline");
+		});
+
+		test("different themes produce different CSS variables", async () => {
+			render(
+				<div className="flex gap-16">
+					<ThemeProvider color="base">
+						<Button data-testid="base-btn" variant="primary">
+							Base
+						</Button>
+					</ThemeProvider>
+					<ThemeProvider color="civic">
+						<Button data-testid="civic-btn" variant="primary">
+							Civic
+						</Button>
+					</ThemeProvider>
+				</div>,
+			);
+
+			const baseBtn = page.getByTestId("base-btn");
+			const civicBtn = page.getByTestId("civic-btn");
+
+			await expect.element(baseBtn).toBeInTheDocument();
+			await expect.element(civicBtn).toBeInTheDocument();
+
+			const baseWrapper = baseBtn.element().parentElement;
+			const civicWrapper = civicBtn.element().parentElement;
+
+			expect(baseWrapper).toBeTruthy();
+			expect(civicWrapper).toBeTruthy();
+
+			const baseBgVar = getInlineStyleVar(
+				baseWrapper as Element,
+				"--color-button-primary-bg",
+			);
+			const civicBgVar = getInlineStyleVar(
+				civicWrapper as Element,
+				"--color-button-primary-bg",
+			);
+
+			expect(baseBgVar).toBeTruthy();
+			expect(civicBgVar).toBeTruthy();
+			expect(baseBgVar).not.toBe(civicBgVar);
+		});
+	});
+});

package/src/theme/{ThemeProvider.tsx → theme-provider.tsx}

@@ -48,6 +48,10 @@ export interface ThemeProviderProps {
 	surface?: SurfaceThemeName;
 	/** Children to render */
 	children: ReactNode;
+	/** Optional className for the wrapper div */
+	className?: string;
+	/** Whether to render a wrapper div with CSS variables applied (defaults to true) */
+	applyStyles?: boolean;
 }
 
 /**
@@ -105,6 +109,8 @@ function processColorTokens(
 				if (typeof tokenValue === "string" && tokenValue.startsWith("{")) {
 					// Alias reference - resolve to CSS var
 					let refPath = tokenValue.slice(1, -1).replace(/\./g, "-");
+					// Strip prefixes that aren't used in CSS variable names
+					refPath = refPath.replace(/^primitive-/, "");
 					refPath = refPath.replace(/^semantic-color-/, "color-");
 					result[varName] = `var(--${refPath})`;
 				} else {
@@ -160,7 +166,9 @@ function processSurfaceTokens(
 				if (typeof tokenValue === "string" && tokenValue.startsWith("{")) {
 					// Alias reference
 					let refPath = tokenValue.slice(1, -1).replace(/\./g, "-");
-					refPath = refPath.replace(/^primitive-radii-/, "radius-");
+					// Strip prefixes that aren't used in CSS variable names
+					refPath = refPath.replace(/^primitive-/, "");
+					refPath = refPath.replace(/^radii-/, "radius-");
 					cssValue = `var(--${refPath})`;
 				} else {
 					cssValue = tokenValueToCSS(tokenValue);
@@ -241,6 +249,8 @@ export function ThemeProvider({
 	color = "base",
 	surface = "base",
 	children,
+	className,
+	applyStyles = true,
 }: ThemeProviderProps) {
 	const { tokens, cssVars } = useMemo(() => {
 		const flatTokens: Record<string, string> = {};
@@ -291,7 +301,13 @@ export function ThemeProvider({
 
 	return (
 		<ThemeContext.Provider value={contextValue}>
-			{children}
+			{applyStyles ? (
+				<div style={cssVars} className={className}>
+					{children}
+				</div>
+			) : (
+				children
+			)}
 		</ThemeContext.Provider>
 	);
 }

package/src/stories/GridSystem.stories.tsx

@@ -1,84 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-/**
- * Spatial Grid System
- *
- * Responsive grid tokens that adapt across breakpoints:
- * - Large (lg): 1440px+ - 24 columns, 72px margin, 24px gutter
- * - Medium (md): 768px+ - 12 columns, 56px margin, 20px gutter
- * - Small (sm): 320px+ - 4 columns, 24px margin, 12px gutter
- */
-
-const GridColumn = ({ index }: { index: number }) => (
-	<div className="h-12 bg-brand-primary/20 border border-brand-primary/40 rounded flex items-center justify-center">
-		<span className="text-xs font-mono text-brand-primary">{index + 1}</span>
-	</div>
-);
-
-const GridVisualization = () => (
-	<div className="w-full bg-gray-100 py-8">
-		<div className="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="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)]">
-				{Array.from({ length: 24 }).map((_, i) => (
-					// biome-ignore lint/suspicious/noArrayIndexKey: Static grid columns never reorder
-					<GridColumn key={i} index={i} />
-				))}
-			</div>
-		</div>
-	</div>
-);
-
-const meta = {
-	title: "Design System/Grid System",
-	component: GridVisualization,
-	parameters: {
-		layout: "fullscreen",
-	},
-} satisfies Meta<typeof GridVisualization>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const Desktop: Story = {
-	globals: { viewport: { value: "lg" } },
-};
-
-export const Tablet: Story = {
-	globals: { viewport: { value: "md" } },
-};
-
-export const Mobile: Story = {
-	globals: { viewport: { value: "sm" } },
-};
-
-const ColumnSpans = () => (
-	<div className="w-full py-8 px-[var(--spatial-grid-large-margin)]">
-		<div className="max-w-[90rem] mx-auto grid grid-cols-24 gap-[var(--spatial-grid-large-gutter)]">
-			<div className="col-span-full h-12 bg-gray-200 rounded flex items-center px-4">
-				<code className="text-sm font-mono">col-span-full</code>
-			</div>
-			<div className="col-start-4 col-end-22 h-12 bg-gray-200 rounded flex items-center px-4">
-				<code className="text-sm font-mono">
-					col-start-4 col-end-22 (18 cols)
-				</code>
-			</div>
-			<div className="col-start-7 col-end-19 h-12 bg-gray-200 rounded flex items-center px-4">
-				<code className="text-sm font-mono">
-					col-start-7 col-end-19 (12 cols)
-				</code>
-			</div>
-			<div className="col-start-9 col-end-17 h-12 bg-gray-200 rounded flex items-center px-4">
-				<code className="text-sm font-mono">
-					col-start-9 col-end-17 (8 cols)
-				</code>
-			</div>
-		</div>
-	</div>
-);
-
-export const Spans: Story = {
-	render: () => <ColumnSpans />,
-	globals: { viewport: { value: "lg" } },
-};