chore(docs): revise

Author: jaikamat

.gitignore

@@ -185,6 +185,3 @@ dist
 
 # Playwright MCP screenshots
 .playwright-mcp/
-
-# Auto-generated test files
-**/docs-validation.generated.spec.tsx

packages/nimbus-docs-build/package.json

@@ -38,6 +38,7 @@
     "@types/node": "catalog:utils",
     "typescript": "catalog:tooling"
   },
+  "peerDependencies": {},
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

packages/nimbus/src/test/docs-validation.generated.spec.tsx

@@ -0,0 +1,168 @@
+// Auto-generated test file from .dev.mdx documentation
+// DO NOT EDIT - This file is generated by validate-docs-tests.ts
+
+import { describe, it, expect, vi } from "vitest";
+import type { ReactNode } from "react";
+import userEvent from "@testing-library/user-event";
+import { NimbusProvider } from "@commercetools/nimbus";
+import { TextInput } from "@commercetools/nimbus";
+import { render, screen } from "@testing-library/react";
+
+// Wrapper utility to provide NimbusProvider context
+function renderWithProvider(ui: React.ReactElement) {
+  const result = render(<NimbusProvider>{ui}</NimbusProvider>);
+
+  // Wrap rerender to also use provider
+  const originalRerender = result.rerender;
+  result.rerender = (rerenderUi: ReactNode) => {
+    return originalRerender(<NimbusProvider>{rerenderUi}</NimbusProvider>);
+  };
+
+  return result;
+}
+
+// Source: packages/nimbus/src/components/text-input/text-input.dev.mdx (Basic rendering tests)
+describe("TextInput - Basic rendering", () => {
+  it("renders input element", () => {
+    renderWithProvider(<TextInput placeholder="Enter text" />);
+
+    // Verify input is present
+    expect(screen.getByRole("textbox")).toBeInTheDocument();
+  });
+
+  it("renders with placeholder text", () => {
+    renderWithProvider(<TextInput placeholder="Email address" />);
+
+    expect(screen.getByPlaceholderText("Email address")).toBeInTheDocument();
+  });
+
+  it("renders with aria-label", () => {
+    renderWithProvider(<TextInput aria-label="User email" />);
+
+    expect(
+      screen.getByRole("textbox", { name: /user email/i })
+    ).toBeInTheDocument();
+  });
+});
+
+// Source: packages/nimbus/src/components/text-input/text-input.dev.mdx (Interaction tests)
+describe("TextInput - Interactions", () => {
+  it("updates value when user types", async () => {
+    const user = userEvent.setup();
+    renderWithProvider(<TextInput placeholder="Type here" />);
+
+    const input = screen.getByRole("textbox");
+    await user.type(input, "Hello World");
+
+    expect(input).toHaveValue("Hello World");
+  });
+
+  it("calls onChange callback with string value", async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+    renderWithProvider(<TextInput onChange={handleChange} />);
+
+    const input = screen.getByRole("textbox");
+    await user.type(input, "test");
+
+    expect(handleChange).toHaveBeenCalled();
+    expect(typeof handleChange.mock.calls[0][0]).toBe("string");
+  });
+});
+
+// Source: packages/nimbus/src/components/text-input/text-input.dev.mdx (Testing controlled mode)
+describe("TextInput - Controlled mode", () => {
+  it("displays controlled value", () => {
+    renderWithProvider(
+      <TextInput value="controlled value" onChange={() => {}} />
+    );
+
+    const input = screen.getByRole("textbox");
+    expect(input).toHaveValue("controlled value");
+  });
+
+  it("updates when controlled value changes", () => {
+    const { rerender } = renderWithProvider(
+      <TextInput value="first value" onChange={() => {}} />
+    );
+
+    expect(screen.getByRole("textbox")).toHaveValue("first value");
+
+    rerender(<TextInput value="second value" onChange={() => {}} />);
+
+    expect(screen.getByRole("textbox")).toHaveValue("second value");
+  });
+});
+
+// Source: packages/nimbus/src/components/text-input/text-input.dev.mdx (Testing leading and trailing elements)
+describe("TextInput - Elements", () => {
+  it("renders leading element", () => {
+    renderWithProvider(
+      <TextInput
+        leadingElement={<span data-testid="icon">🔍</span>}
+        placeholder="Search"
+      />
+    );
+
+    expect(screen.getByTestId("icon")).toBeInTheDocument();
+  });
+
+  it("renders trailing element", () => {
+    renderWithProvider(
+      <TextInput
+        trailingElement={<button data-testid="clear">Clear</button>}
+        placeholder="Input"
+      />
+    );
+
+    expect(screen.getByTestId("clear")).toBeInTheDocument();
+  });
+
+  it("trailing button is interactive", async () => {
+    const user = userEvent.setup();
+    const handleClick = vi.fn();
+
+    renderWithProvider(
+      <TextInput
+        trailingElement={<button onClick={handleClick}>Action</button>}
+      />
+    );
+
+    await user.click(screen.getByText("Action"));
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+});
+
+// Source: packages/nimbus/src/components/text-input/text-input.dev.mdx (Testing validation states)
+describe("TextInput - Validation states", () => {
+  it("renders disabled state", () => {
+    renderWithProvider(<TextInput isDisabled placeholder="Disabled" />);
+
+    const input = screen.getByRole("textbox");
+    expect(input).toBeDisabled();
+  });
+
+  it("renders invalid state", () => {
+    renderWithProvider(<TextInput isInvalid placeholder="Invalid" />);
+
+    const input = screen.getByRole("textbox");
+    expect(input).toHaveAttribute("aria-invalid", "true");
+  });
+
+  it("renders read-only state", () => {
+    renderWithProvider(
+      <TextInput isReadOnly value="Read-only" onChange={() => {}} />
+    );
+
+    const input = screen.getByRole("textbox");
+    expect(input).toHaveAttribute("readonly");
+  });
+
+  it("renders required state", () => {
+    renderWithProvider(<TextInput isRequired placeholder="Required" />);
+
+    const input = screen.getByRole("textbox");
+    expect(input).toHaveAttribute("aria-required", "true");
+  });
+});