@12-apps/ui 1.0.0

package/package.json

@@ -0,0 +1,247 @@
+{
+  "name": "@12-apps/ui",
+  "version": "1.0.0",
+  "type": "module",
+  "engines": {
+    "node": ">=18.0.0",
+    "pnpm": ">=9.0.0",
+    "npm": "please-use-pnpm",
+    "yarn": "please-use-pnpm"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./button": "./src/button.tsx",
+    "./social-login-button": "./src/social-login-button.tsx",
+    "./user-avatar": "./src/user-avatar.tsx",
+    "./utils": "./src/utils/index.ts",
+    "./mui/Box": "./src/mui/Box.ts",
+    "./mui/Stack": "./src/mui/Stack.ts",
+    "./mui/AppBar": "./src/mui/AppBar.ts",
+    "./mui/Toolbar": "./src/mui/Toolbar.ts",
+    "./mui/styles": "./src/mui/styles.ts",
+    "./mui/FormControl": "./src/mui/FormControl.ts",
+    "./mui/FormControlLabel": "./src/mui/FormControlLabel.ts",
+    "./mui/InputLabel": "./src/mui/InputLabel.ts",
+    "./mui/SvgIcon": "./src/mui/SvgIcon.ts",
+    "./mui/CssBaseline": "./src/mui/CssBaseline.ts",
+    "./mui/Grid2": "./src/mui/Grid2.ts",
+    "./mui/useMediaQuery": "./src/mui/useMediaQuery.ts",
+    "./mui/List": "./src/mui/List.ts",
+    "./mui/ListItem": "./src/mui/ListItem.ts",
+    "./mui/ListItemButton": "./src/mui/ListItemButton.ts",
+    "./mui/ListItemText": "./src/mui/ListItemText.ts",
+    "./data-display/Alert": "./src/components/data-display/Alert/index.ts",
+    "./data-display/AlertDialog": "./src/components/data-display/AlertDialog/index.ts",
+    "./data-display/Avatar": "./src/components/data-display/Avatar/index.ts",
+    "./data-display/Badge": "./src/components/data-display/Badge/index.ts",
+    "./data-display/Banner": "./src/components/data-display/Banner/index.ts",
+    "./data-display/Carousel": "./src/components/data-display/Carousel/index.ts",
+    "./data-display/Chart": "./src/components/data-display/Chart/index.ts",
+    "./data-display/Chip": "./src/components/data-display/Chip/index.ts",
+    "./data-display/DataGrid": "./src/components/data-display/DataGrid/index.ts",
+    "./data-display/DescriptionItem": "./src/components/data-display/DescriptionItem/index.ts",
+    "./data-display/EmptyState": "./src/components/data-display/EmptyState/index.ts",
+    "./data-display/SectionOnboarding": "./src/components/data-display/SectionOnboarding/index.ts",
+    "./data-display/HoverCard": "./src/components/data-display/HoverCard/index.ts",
+    "./data-display/InteractiveTooltip": "./src/components/data-display/InteractiveTooltip/index.ts",
+    "./data-display/LazyImage": "./src/components/data-display/LazyImage/index.ts",
+    "./data-display/Lightbox": "./src/components/data-display/Lightbox/index.ts",
+    "./data-display/MapPreview": "./src/components/data-display/MapPreview/index.ts",
+    "./data-display/Popover": "./src/components/data-display/Popover/index.ts",
+    "./data-display/Progress": "./src/components/data-display/Progress/index.ts",
+    "./data-display/Sheet": "./src/components/data-display/Sheet/index.ts",
+    "./data-display/Stepper": "./src/components/data-display/Stepper/index.ts",
+    "./data-display/Table": "./src/components/data-display/Table/index.ts",
+    "./data-display/Timeline": "./src/components/data-display/Timeline/index.ts",
+    "./data-display/TimingDiagram": "./src/components/data-display/TimingDiagram/index.ts",
+    "./data-display/Tooltip": "./src/components/data-display/Tooltip/index.ts",
+    "./data-display/AsyncStateContainer": "./src/components/data-display/AsyncStateContainer/index.ts",
+    "./data-display/ErrorState": "./src/components/data-display/ErrorState/index.ts",
+    "./data-display/LoadingState": "./src/components/data-display/LoadingState/index.ts",
+    "./feedback/Dialog": "./src/components/feedback/Dialog/index.ts",
+    "./feedback/Modal": "./src/components/feedback/Modal/index.ts",
+    "./feedback/Sonner": "./src/components/feedback/Sonner/index.ts",
+    "./feedback/StackedModal": "./src/components/feedback/StackedModal/index.ts",
+    "./feedback/Toast": "./src/components/feedback/Toast/index.ts",
+    "./feedback/TutorialOverlay": "./src/components/feedback/TutorialOverlay/index.ts",
+    "./form/AddressAutocomplete": "./src/components/form/AddressAutocomplete/index.ts",
+    "./form/Autocomplete": "./src/components/form/Autocomplete/index.ts",
+    "./form/Button": "./src/components/form/Button/index.ts",
+    "./form/Calendar": "./src/components/form/Calendar/index.ts",
+    "./form/Checkbox": "./src/components/form/Checkbox/index.ts",
+    "./form/CodeEditor": "./src/components/form/CodeEditor/index.ts",
+    "./form/Command": "./src/components/form/Command/index.ts",
+    "./form/CreatableSelect": "./src/components/form/CreatableSelect/index.ts",
+    "./form/Form": "./src/components/form/Form/index.ts",
+    "./form/total-form": "./src/components/form/total-form/index.ts",
+    "./form/Input": "./src/components/form/Input/index.ts",
+    "./form/InputOTP": "./src/components/form/InputOTP/index.ts",
+    "./form/Label": "./src/components/form/Label/index.ts",
+    "./form/Menubar": "./src/components/form/Menubar/index.ts",
+    "./form/PasswordStrength": "./src/components/form/PasswordStrength/index.ts",
+    "./form/PhoneInput": "./src/components/form/PhoneInput/index.ts",
+    "./form/RadioGroup": "./src/components/form/RadioGroup/index.ts",
+    "./form/RichTextEditor": "./src/components/form/RichTextEditor/index.ts",
+    "./form/SearchPalette": "./src/components/form/SearchPalette/index.ts",
+    "./form/Select": "./src/components/form/Select/index.ts",
+    "./form/Slider": "./src/components/form/Slider/index.ts",
+    "./form/Switch": "./src/components/form/Switch/index.ts",
+    "./form/Textarea": "./src/components/form/Textarea/index.ts",
+    "./form/Toggle": "./src/components/form/Toggle/index.ts",
+    "./form/ToggleGroup": "./src/components/form/ToggleGroup/index.ts",
+    "./form/UploadButton": "./src/components/form/UploadButton/index.ts",
+    "./layout/Accordion": "./src/components/layout/Accordion/index.ts",
+    "./layout/Card": "./src/components/layout/Card/index.ts",
+    "./layout/Collapsible": "./src/components/layout/Collapsible/index.ts",
+    "./layout/Container": "./src/components/layout/Container/index.ts",
+    "./layout/ContentToolbar": "./src/components/layout/ContentToolbar/index.ts",
+    "./layout/Dashboard": "./src/components/layout/Dashboard/index.ts",
+    "./layout/Drawer": "./src/components/layout/Drawer/index.ts",
+    "./layout/Resizable": "./src/components/layout/Resizable/index.ts",
+    "./layout/ScrollArea": "./src/components/layout/ScrollArea/index.ts",
+    "./layout/Separator": "./src/components/layout/Separator/index.ts",
+    "./layout/SettingsLayout": "./src/components/layout/SettingsLayout/index.ts",
+    "./layout/Sidebar": "./src/components/layout/Sidebar/index.ts",
+    "./layout/Skeleton": "./src/components/layout/Skeleton/index.ts",
+    "./layout/Spacer": "./src/components/layout/Spacer/index.ts",
+    "./layout/TableFilter": "./src/components/layout/TableFilter/index.ts",
+    "./navigation/Breadcrumbs": "./src/components/navigation/Breadcrumbs/index.ts",
+    "./navigation/CommandPalette": "./src/components/navigation/CommandPalette/index.ts",
+    "./navigation/ContextMenu": "./src/components/navigation/ContextMenu/index.ts",
+    "./navigation/DropdownMenu": "./src/components/navigation/DropdownMenu/index.ts",
+    "./navigation/NavigationMenu": "./src/components/navigation/NavigationMenu/index.ts",
+    "./navigation/Pagination": "./src/components/navigation/Pagination/index.ts",
+    "./navigation/Tabs": "./src/components/navigation/Tabs/index.ts",
+    "./typography/Blockquote": "./src/components/typography/Blockquote/index.ts",
+    "./typography/Code": "./src/components/typography/Code/index.ts",
+    "./typography/Heading": "./src/components/typography/Heading/index.ts",
+    "./typography/Paragraph": "./src/components/typography/Paragraph/index.ts",
+    "./typography/Text": "./src/components/typography/Text/index.ts",
+    "./utility/AnimatedIcon": "./src/components/utility/AnimatedIcon/index.ts",
+    "./utility/AspectRatio": "./src/components/utility/AspectRatio/index.ts",
+    "./utility/InfiniteScroll": "./src/components/utility/InfiniteScroll/index.ts",
+    "./utility/Portal": "./src/components/utility/Portal/index.ts",
+    "./utility/Transition": "./src/components/utility/Transition/index.ts",
+    "./utility/VirtualList": "./src/components/utility/VirtualList/index.ts",
+    "./utility/WorkflowStep": "./src/components/utility/WorkflowStep/index.ts"
+  },
+  "typesVersions": {
+    "*": {
+      "mui/*": [
+        "./src/mui/*.ts"
+      ],
+      "data-display/*": [
+        "./src/components/data-display/*/index.d.ts"
+      ],
+      "feedback/*": [
+        "./src/components/feedback/*/index.d.ts"
+      ],
+      "form/*": [
+        "./src/components/form/*/index.d.ts"
+      ],
+      "layout/*": [
+        "./src/components/layout/*/index.d.ts"
+      ],
+      "navigation/*": [
+        "./src/components/navigation/*/index.d.ts"
+      ],
+      "typography/*": [
+        "./src/components/typography/*/index.d.ts"
+      ],
+      "utility/*": [
+        "./src/components/utility/*/index.d.ts"
+      ]
+    }
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@monaco-editor/react": "^4.7.0",
+    "@mui/icons-material": "^6.5.0",
+    "@mui/material": "^6.5.0",
+    "@types/google.maps": "^3.58.1",
+    "clsx": "^2.1.1",
+    "dompurify": "^3.2.6",
+    "fuse.js": "^7.1.0",
+    "libphonenumber-js": "^1.12.31",
+    "monaco-editor": "^0.53.0",
+    "recharts": "^3.5.1",
+    "@12-apps/shared-helpers": "1.0.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.55.0",
+    "@storybook/addon-docs": "^9.1.10",
+    "@storybook/addon-links": "^9.1.10",
+    "@storybook/builder-vite": "^9.1.10",
+    "@storybook/react-vite": "^9.1.10",
+    "@storybook/test-runner": "^0.23.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.1",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitest/browser": "^3.2.4",
+    "concurrently": "^9.2.1",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-storybook": "9.1.10",
+    "glob": "^13.0.0",
+    "globals": "^16.5.0",
+    "http-server": "^14.1.1",
+    "jsdom": "^26.1.0",
+    "lucide-react": "^0.545.0",
+    "playwright": "^1.56.1",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "start-server-and-test": "^2.1.2",
+    "storybook": "^10.1.11",
+    "tsup": "^8.0.0",
+    "typescript": "^5.8.2",
+    "vite": "^6.4.1",
+    "vite-plugin-istanbul": "^7.2.1",
+    "vitest": "^3.2.4",
+    "@12-apps/eslint-config": "0.0.0",
+    "@12-apps/typescript-config": "0.0.0"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "restricted"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/12-apps/shared-packages.git",
+    "directory": "packages/ui"
+  },
+  "files": [
+    "src",
+    "dist",
+    "prisma",
+    "*.js",
+    "*.mjs",
+    "*.md"
+  ],
+  "scripts": {
+    "preinstall": "npx only-allow pnpm",
+    "dev": "storybook dev -p 6006",
+    "build": "tsup",
+    "clean": "rm -rf dist storybook-static",
+    "storybook:build": "storybook build",
+    "storybook:serve": "http-server storybook-static -p 6008 --silent",
+    "storybook:test": "test-storybook --maxWorkers=4 --url http://localhost:6008",
+    "test": "node ../../scripts/vitest-with-teardown.mjs run",
+    "test:watch": "vitest",
+    "test:coverage": "node ../../scripts/vitest-with-teardown.mjs run --coverage",
+    "test:storybook": "start-server-and-test 'storybook dev -p 6006' http://localhost:6006 'test-storybook --url http://localhost:6006 --json --outputFile test-results.json'",
+    "test:ci": "pnpm storybook:build && (concurrently -k -s first -n 'serve,test' -c 'bgBlue.bold,bgGreen.bold' 'pnpm storybook:serve' 'pnpm storybook:test')",
+    "lint:files": "bash -c 'eslint \"${@:-.}\" --max-warnings 0' _",
+    "lint": "pnpm run lint:files .",
+    "lint:fix": "bash -c 'eslint \"${@:-.}\" --max-warnings 0 --fix' _",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/__tests__/package-wiring.test.ts

@@ -0,0 +1,37 @@
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname, resolve } from "node:path";
+import { describe, expect, it } from "vitest";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const pkgPath = resolve(__dirname, "../../package.json");
+
+interface UiPackageJson {
+  dependencies?: Record<string, string>;
+  exports?: Record<string, unknown>;
+  typesVersions?: Record<string, Record<string, string[]>>;
+}
+
+function readPkg(): UiPackageJson {
+  return JSON.parse(readFileSync(pkgPath, "utf8")) as UiPackageJson;
+}
+
+describe("@12-apps/ui package wiring (Task 5)", () => {
+  it("declares @12-apps/shared-helpers as a workspace:* dependency", () => {
+    const pkg = readPkg();
+    expect(pkg.dependencies?.["@12-apps/shared-helpers"]).toBe("workspace:*");
+  });
+
+  it("exposes the ./form/total-form package export", () => {
+    const pkg = readPkg();
+    expect(pkg.exports?.["./form/total-form"]).toBe(
+      "./src/components/form/total-form/index.ts",
+    );
+  });
+
+  it("registers a form/* typesVersions entry covering total-form", () => {
+    const pkg = readPkg();
+    const formTypes = pkg.typesVersions?.["*"]?.["form/*"];
+    expect(formTypes).toContain("./src/components/form/*/index.d.ts");
+  });
+});

package/src/__tests__/setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";

package/src/__tests__/social-login-button.test.tsx

@@ -0,0 +1,186 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import {
+  SocialLoginButton,
+  SocialLoginContainer,
+  type SocialProvider,
+} from "../social-login-button";
+
+describe("SocialLoginButton", () => {
+  const providers: SocialProvider[] = ["google", "facebook", "apple"];
+
+  describe.each(providers)("%s provider", (provider) => {
+    it(`should render ${provider} button with correct text`, () => {
+      render(<SocialLoginButton provider={provider} />);
+
+      const expectedTexts: Record<SocialProvider, string> = {
+        google: "Continue with Google",
+        facebook: "Continue with Facebook",
+        apple: "Continue with Apple",
+      };
+
+      expect(screen.getByText(expectedTexts[provider])).toBeInTheDocument();
+    });
+
+    it(`should call onClick when ${provider} button is clicked`, () => {
+      const handleClick = vi.fn();
+      render(<SocialLoginButton provider={provider} onClick={handleClick} />);
+
+      const button = screen.getByRole("button");
+      fireEvent.click(button);
+
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it(`should show loading state for ${provider}`, () => {
+      const { container } = render(<SocialLoginButton provider={provider} loading />);
+
+      // When loading, Button shows CircularProgress spinner
+      expect(container.querySelector('.MuiCircularProgress-root')).toBeInTheDocument();
+    });
+
+    it(`should be disabled when loading for ${provider}`, () => {
+      render(<SocialLoginButton provider={provider} loading />);
+
+      const button = screen.getByRole("button");
+      expect(button).toBeDisabled();
+    });
+
+    it(`should be disabled when disabled prop is true for ${provider}`, () => {
+      render(<SocialLoginButton provider={provider} disabled />);
+
+      const button = screen.getByRole("button");
+      expect(button).toBeDisabled();
+    });
+  });
+
+  it("should apply fullWidth style by default", () => {
+    render(<SocialLoginButton provider="google" />);
+
+    const button = screen.getByRole("button");
+    // MUI Button with fullWidth prop applies width: 100%
+    expect(button).toHaveClass('MuiButton-fullWidth');
+  });
+
+  it("should not have fullWidth class when fullWidth is false", () => {
+    render(<SocialLoginButton provider="google" fullWidth={false} />);
+
+    const button = screen.getByRole("button");
+    expect(button).not.toHaveClass('MuiButton-fullWidth');
+  });
+
+  it("should not call onClick when disabled", () => {
+    const handleClick = vi.fn();
+    render(
+      <SocialLoginButton provider="google" onClick={handleClick} disabled />
+    );
+
+    const button = screen.getByRole("button");
+    fireEvent.click(button);
+
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+
+  it("should render correct SVG icon for each provider", () => {
+    const { container: googleContainer } = render(
+      <SocialLoginButton provider="google" />
+    );
+    expect(googleContainer.querySelector("svg")).toBeInTheDocument();
+
+    const { container: facebookContainer } = render(
+      <SocialLoginButton provider="facebook" />
+    );
+    expect(facebookContainer.querySelector("svg")).toBeInTheDocument();
+
+    const { container: appleContainer } = render(
+      <SocialLoginButton provider="apple" />
+    );
+    expect(appleContainer.querySelector("svg")).toBeInTheDocument();
+  });
+});
+
+describe("SocialLoginContainer", () => {
+  it("should render children", () => {
+    render(
+      <SocialLoginContainer>
+        <span>Child content</span>
+      </SocialLoginContainer>
+    );
+
+    expect(screen.getByText("Child content")).toBeInTheDocument();
+  });
+
+  it("should render default title", () => {
+    render(
+      <SocialLoginContainer>
+        <span>Content</span>
+      </SocialLoginContainer>
+    );
+
+    expect(screen.getByText("Sign in to continue")).toBeInTheDocument();
+  });
+
+  it("should render custom title", () => {
+    render(
+      <SocialLoginContainer title="Welcome Back">
+        <span>Content</span>
+      </SocialLoginContainer>
+    );
+
+    expect(screen.getByText("Welcome Back")).toBeInTheDocument();
+  });
+
+  it("should not render title when title is empty", () => {
+    render(
+      <SocialLoginContainer title="">
+        <span>Content</span>
+      </SocialLoginContainer>
+    );
+
+    expect(screen.queryByRole("heading")).not.toBeInTheDocument();
+  });
+
+  it("should render divider when showDivider is true", () => {
+    render(
+      <SocialLoginContainer showDivider>
+        <span>Content</span>
+      </SocialLoginContainer>
+    );
+
+    expect(screen.getByText("or")).toBeInTheDocument();
+  });
+
+  it("should not render divider by default", () => {
+    render(
+      <SocialLoginContainer>
+        <span>Content</span>
+      </SocialLoginContainer>
+    );
+
+    expect(screen.queryByText("or")).not.toBeInTheDocument();
+  });
+
+  it("should render custom divider text", () => {
+    render(
+      <SocialLoginContainer showDivider dividerText="or continue with email">
+        <span>Content</span>
+      </SocialLoginContainer>
+    );
+
+    expect(screen.getByText("or continue with email")).toBeInTheDocument();
+  });
+
+  it("should render multiple buttons", () => {
+    render(
+      <SocialLoginContainer>
+        <SocialLoginButton provider="google" />
+        <SocialLoginButton provider="facebook" />
+        <SocialLoginButton provider="apple" />
+      </SocialLoginContainer>
+    );
+
+    expect(screen.getByText("Continue with Google")).toBeInTheDocument();
+    expect(screen.getByText("Continue with Facebook")).toBeInTheDocument();
+    expect(screen.getByText("Continue with Apple")).toBeInTheDocument();
+  });
+});

package/src/__tests__/user-avatar.test.tsx

@@ -0,0 +1,195 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { UserAvatar, UserMenu } from "../user-avatar";
+
+describe("UserAvatar", () => {
+  it("should render with image when src is provided", () => {
+    const { container } = render(
+      <UserAvatar
+        src="https://example.com/avatar.jpg"
+        name="John Doe"
+      />
+    );
+
+    // Avatar uses Fade animation, so query directly
+    const img = container.querySelector('img.MuiAvatar-img');
+    expect(img).toHaveAttribute("src", "https://example.com/avatar.jpg");
+    expect(img).toHaveAttribute("alt", "John Doe");
+  });
+
+  it("should render initials when no src is provided", () => {
+    render(<UserAvatar name="John Doe" />);
+
+    expect(screen.getByText("JD")).toBeInTheDocument();
+  });
+
+  it("should render single initial for single-word name", () => {
+    render(<UserAvatar name="John" />);
+
+    expect(screen.getByText("JO")).toBeInTheDocument();
+  });
+
+  it("should render question mark when no name or src", () => {
+    render(<UserAvatar />);
+
+    expect(screen.getByText("?")).toBeInTheDocument();
+  });
+
+  it("should render initials from first and last name", () => {
+    render(<UserAvatar name="John Michael Doe" />);
+
+    expect(screen.getByText("JD")).toBeInTheDocument();
+  });
+
+  it("should apply size lg", () => {
+    const { container } = render(<UserAvatar name="John" size="lg" />);
+
+    // Avatar size "lg" is 48x48 per UI package Avatar
+    const avatar = container.querySelector('.MuiAvatar-root');
+    expect(avatar).toBeInTheDocument();
+  });
+
+  it("should use default size md", () => {
+    const { container } = render(<UserAvatar name="John" />);
+
+    // Avatar default size "md" is 40x40 per UI package Avatar
+    const avatar = container.querySelector('.MuiAvatar-root');
+    expect(avatar).toBeInTheDocument();
+  });
+
+  it("should call onClick when clicked", () => {
+    const handleClick = vi.fn();
+    const { container } = render(
+      <UserAvatar name="John" onClick={handleClick} />
+    );
+
+    const avatar = container.querySelector('.MuiAvatar-root') as HTMLElement;
+    fireEvent.click(avatar);
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("should have button role when onClick is provided", () => {
+    const handleClick = vi.fn();
+    const { container } = render(
+      <UserAvatar name="John" onClick={handleClick} />
+    );
+
+    const avatar = container.querySelector('.MuiAvatar-root');
+    expect(avatar).toHaveAttribute("role", "button");
+    expect(avatar).toHaveAttribute("tabIndex", "0");
+  });
+
+  it("should not have button role when onClick is not provided", () => {
+    const { container } = render(<UserAvatar name="John" />);
+
+    const avatar = container.querySelector('.MuiAvatar-root');
+    expect(avatar).not.toHaveAttribute("role", "button");
+  });
+
+  it("should be interactive when onClick is provided", () => {
+    const handleClick = vi.fn();
+    const { container } = render(
+      <UserAvatar name="John" onClick={handleClick} />
+    );
+
+    const avatar = container.querySelector('.MuiAvatar-root');
+    // Interactive avatars have cursor: pointer style and hover effects
+    expect(avatar).toHaveAttribute("tabIndex", "0");
+  });
+
+  it("should handle null src gracefully", () => {
+    render(<UserAvatar src={null} name="John Doe" />);
+
+    expect(screen.getByText("JD")).toBeInTheDocument();
+  });
+
+  it("should handle null name gracefully", () => {
+    render(<UserAvatar name={null} />);
+
+    expect(screen.getByText("?")).toBeInTheDocument();
+  });
+
+  it("should render image with fallback alt text", () => {
+    const { container } = render(<UserAvatar src="https://example.com/avatar.jpg" />);
+
+    // Avatar uses Fade animation, so query directly
+    const img = container.querySelector('img.MuiAvatar-img');
+    expect(img).toHaveAttribute("alt", "User avatar");
+  });
+});
+
+describe("UserMenu", () => {
+  const mockUser = {
+    name: "John Doe",
+    email: "john@example.com",
+    image: "https://example.com/avatar.jpg",
+  };
+
+  it("should render user name and email", () => {
+    render(<UserMenu user={mockUser} onSignOut={vi.fn()} />);
+
+    expect(screen.getByText("John Doe")).toBeInTheDocument();
+    expect(screen.getByText("john@example.com")).toBeInTheDocument();
+  });
+
+  it("should render user avatar with image", () => {
+    const { container } = render(<UserMenu user={mockUser} onSignOut={vi.fn()} />);
+
+    // Avatar uses Fade animation, so query directly
+    const img = container.querySelector('img.MuiAvatar-img');
+    expect(img).toHaveAttribute("src", mockUser.image);
+  });
+
+  it("should render sign out button", () => {
+    render(<UserMenu user={mockUser} onSignOut={vi.fn()} />);
+
+    expect(screen.getByText("Sign out")).toBeInTheDocument();
+  });
+
+  it("should call onSignOut when sign out button is clicked", () => {
+    const handleSignOut = vi.fn();
+    render(<UserMenu user={mockUser} onSignOut={handleSignOut} />);
+
+    const signOutButton = screen.getByText("Sign out");
+    fireEvent.click(signOutButton);
+
+    expect(handleSignOut).toHaveBeenCalledTimes(1);
+  });
+
+  it("should render default name when name is null", () => {
+    const userWithoutName = {
+      ...mockUser,
+      name: null,
+    };
+
+    render(<UserMenu user={userWithoutName} onSignOut={vi.fn()} />);
+
+    expect(screen.getByText("User")).toBeInTheDocument();
+  });
+
+  it("should render avatar with initials when no image", () => {
+    const userWithoutImage = {
+      name: "John Doe",
+      email: "john@example.com",
+      image: null,
+    };
+
+    render(<UserMenu user={userWithoutImage} onSignOut={vi.fn()} />);
+
+    expect(screen.getByText("JD")).toBeInTheDocument();
+  });
+
+  it("should handle empty user object gracefully", () => {
+    const emptyUser = {
+      name: null,
+      email: null,
+      image: null,
+    };
+
+    render(<UserMenu user={emptyUser} onSignOut={vi.fn()} />);
+
+    expect(screen.getByText("User")).toBeInTheDocument();
+    expect(screen.getByText("?")).toBeInTheDocument();
+  });
+});