xertica-ui 2.2.1 → 2.4.0

package/components/layout/header/header.stories.tsx

@@ -1,204 +1,204 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Header } from './header';
-import { BrowserRouter, Link } from 'react-router-dom';
-import {
-  Home,
-  Bell,
-  Mail,
-  User,
-  Settings,
-  LogOut,
-  Users,
-  FileText,
-  FolderOpen,
-  RefreshCw,
-} from 'lucide-react';
-import React from 'react';
-import { Badge } from '../../ui/badge';
-import { Button } from '../../ui/button';
-
-const meta: Meta<typeof Header> = {
-  title: 'Layout/Header',
-  component: Header,
-  decorators: [
-    Story => (
-      <BrowserRouter>
-        <div className="w-full bg-muted/10 min-h-[200px]">
-          <Story />
-          <div className="p-8">Page Content Area</div>
-        </div>
-      </BrowserRouter>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Header>;
-
-/**
- * Default story: breadcrumbs are the recommended primary pattern.
- * Always use breadcrumbs when the page has a navigation hierarchy.
- */
-export const Default: Story = {
-  args: {
-    breadcrumbs: [
-      { label: 'Home', href: '/', icon: <Home className="size-4" /> },
-      { label: 'Users', href: '/users' },
-      { label: 'Edit Profile' },
-    ],
-    user: {
-      name: 'Pedro Duarte',
-      email: 'pedro@example.com',
-      avatar: 'https://github.com/shadcn.png',
-    },
-    showSettings: true,
-    showLogout: true,
-  },
-};
-
-/**
- * Deep navigation: breadcrumbs support unlimited hierarchy levels.
- * This example shows 5 levels of navigation depth.
- */
-export const DeepNavigation: Story = {
-  args: {
-    breadcrumbs: [
-      { label: 'Home', href: '/', icon: <Home className="size-4" /> },
-      { label: 'Settings', href: '/settings', icon: <Settings className="size-4" /> },
-      { label: 'Organization', href: '/settings/org', icon: <FolderOpen className="size-4" /> },
-      { label: 'Teams', href: '/settings/org/teams', icon: <Users className="size-4" /> },
-      { label: 'Engineering', href: '/settings/org/teams/engineering' },
-      { label: 'Access Policies' },
-    ],
-    user: {
-      name: 'Ana Costa',
-      email: 'ana.costa@xertica.ai',
-    },
-  },
-};
-
-/**
- * Title-only mode: exception pattern for standalone pages with no navigation.
- * Use `title` only when the page has no parent or breadcrumb context.
- */
-export const TitleOnly: Story = {
-  args: {
-    title: 'Dashboard',
-    showLanguageSelector: true,
-    showThemeToggle: true,
-  },
-};
-
-/**
- * With custom action buttons in the header toolbar.
- */
-export const WithActions: Story = {
-  args: {
-    breadcrumbs: [
-      { label: 'Home', href: '/', icon: <Home className="size-4" /> },
-      { label: 'Messages' },
-    ],
-    actions: [
-      {
-        id: 'notifications',
-        icon: <Bell className="size-5" />,
-        onClick: () => alert('Notifications'),
-      },
-      {
-        id: 'mail',
-        label: 'Inbox',
-        icon: <Mail className="size-5" />,
-        onClick: () => alert('Mailbox'),
-      },
-    ],
-    user: {
-      name: 'John Doe',
-      avatar: 'https://github.com/johndoe.png',
-    },
-  },
-};
-
-/**
- * Custom user profile dropdown menu items.
- */
-export const CustomUserMenu: Story = {
-  args: {
-    breadcrumbs: [
-      { label: 'Home', href: '/', icon: <Home className="size-4" /> },
-      { label: 'Settings' },
-    ],
-    user: {
-      name: 'Admin User',
-      menuItems: [
-        {
-          id: 'profile',
-          label: 'My Profile',
-          icon: <User className="size-4" />,
-          onClick: () => {},
-        },
-        {
-          id: ' billing',
-          label: 'Billing',
-          icon: <Settings className="size-4" />,
-          onClick: () => {},
-        },
-        {
-          id: 'logout',
-          label: 'Sign Out',
-          icon: <LogOut className="size-4" />,
-          className: 'text-destructive focus:text-destructive',
-          onClick: () => {},
-        },
-      ],
-    },
-  },
-};
-
-/**
- * Breadcrumb slot: custom element rendered right after the breadcrumb area.
- * Accepts any React node — badges, buttons, status chips, etc.
- */
-export const WithBreadcrumbSlot: Story = {
-  args: {
-    breadcrumbs: [
-      { label: 'Home', href: '/', icon: <Home className="size-4" /> },
-      { label: 'Deployments' },
-    ],
-    breadcrumbSlot: (
-      <div className="flex items-center gap-2">
-        <Badge variant="warning">Beta</Badge>
-        <Button variant="outline" size="sm">
-          <RefreshCw className="size-3.5" />
-          Sync
-        </Button>
-      </div>
-    ),
-    user: {
-      name: 'Pedro Duarte',
-      email: 'pedro@example.com',
-    },
-  },
-};
-
-/**
- * SPA Navigation: uses `renderLink` with React Router's `Link` component
- * to prevent full-page reloads when navigating breadcrumbs.
- */
-export const WithReactRouter: Story = {
-  args: {
-    breadcrumbs: [
-      { label: 'Home', href: '/', icon: <Home className="size-4" /> },
-      { label: 'Settings', href: '/settings', icon: <Settings className="size-4" /> },
-      { label: 'Users', href: '/settings/users', icon: <Users className="size-4" /> },
-      { label: 'Edit Profile' },
-    ],
-    renderLink: (href, props) => <Link to={href} {...props} />,
-    user: {
-      name: 'Maria Souza',
-      email: 'maria@xertica.ai',
-    },
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { Header } from './header';
+import { BrowserRouter, Link } from 'react-router-dom';
+import {
+  Home,
+  Bell,
+  Mail,
+  User,
+  Settings,
+  LogOut,
+  Users,
+  FileText,
+  FolderOpen,
+  RefreshCw,
+} from 'lucide-react';
+import React from 'react';
+import { Badge } from '../../ui/badge';
+import { Button } from '../../ui/button';
+
+const meta: Meta<typeof Header> = {
+  title: 'Layout/Header',
+  component: Header,
+  decorators: [
+    Story => (
+      <BrowserRouter>
+        <div className="w-full bg-muted/10 min-h-[200px]">
+          <Story />
+          <div className="p-8">Page Content Area</div>
+        </div>
+      </BrowserRouter>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Header>;
+
+/**
+ * Default story: breadcrumbs are the recommended primary pattern.
+ * Always use breadcrumbs when the page has a navigation hierarchy.
+ */
+export const Default: Story = {
+  args: {
+    breadcrumbs: [
+      { label: 'Home', href: '/', icon: <Home className="size-4" /> },
+      { label: 'Users', href: '/users' },
+      { label: 'Edit Profile' },
+    ],
+    user: {
+      name: 'Pedro Duarte',
+      email: 'pedro@example.com',
+      avatar: 'https://github.com/shadcn.png',
+    },
+    showSettings: true,
+    showLogout: true,
+  },
+};
+
+/**
+ * Deep navigation: breadcrumbs support unlimited hierarchy levels.
+ * This example shows 5 levels of navigation depth.
+ */
+export const DeepNavigation: Story = {
+  args: {
+    breadcrumbs: [
+      { label: 'Home', href: '/', icon: <Home className="size-4" /> },
+      { label: 'Settings', href: '/settings', icon: <Settings className="size-4" /> },
+      { label: 'Organization', href: '/settings/org', icon: <FolderOpen className="size-4" /> },
+      { label: 'Teams', href: '/settings/org/teams', icon: <Users className="size-4" /> },
+      { label: 'Engineering', href: '/settings/org/teams/engineering' },
+      { label: 'Access Policies' },
+    ],
+    user: {
+      name: 'Ana Costa',
+      email: 'ana.costa@xertica.ai',
+    },
+  },
+};
+
+/**
+ * Title-only mode: exception pattern for standalone pages with no navigation.
+ * Use `title` only when the page has no parent or breadcrumb context.
+ */
+export const TitleOnly: Story = {
+  args: {
+    title: 'Dashboard',
+    showLanguageSelector: true,
+    showThemeToggle: true,
+  },
+};
+
+/**
+ * With custom action buttons in the header toolbar.
+ */
+export const WithActions: Story = {
+  args: {
+    breadcrumbs: [
+      { label: 'Home', href: '/', icon: <Home className="size-4" /> },
+      { label: 'Messages' },
+    ],
+    actions: [
+      {
+        id: 'notifications',
+        icon: <Bell className="size-5" />,
+        onClick: () => alert('Notifications'),
+      },
+      {
+        id: 'mail',
+        label: 'Inbox',
+        icon: <Mail className="size-5" />,
+        onClick: () => alert('Mailbox'),
+      },
+    ],
+    user: {
+      name: 'John Doe',
+      avatar: 'https://github.com/johndoe.png',
+    },
+  },
+};
+
+/**
+ * Custom user profile dropdown menu items.
+ */
+export const CustomUserMenu: Story = {
+  args: {
+    breadcrumbs: [
+      { label: 'Home', href: '/', icon: <Home className="size-4" /> },
+      { label: 'Settings' },
+    ],
+    user: {
+      name: 'Admin User',
+      menuItems: [
+        {
+          id: 'profile',
+          label: 'My Profile',
+          icon: <User className="size-4" />,
+          onClick: () => {},
+        },
+        {
+          id: ' billing',
+          label: 'Billing',
+          icon: <Settings className="size-4" />,
+          onClick: () => {},
+        },
+        {
+          id: 'logout',
+          label: 'Sign Out',
+          icon: <LogOut className="size-4" />,
+          className: 'text-destructive focus:text-destructive',
+          onClick: () => {},
+        },
+      ],
+    },
+  },
+};
+
+/**
+ * Breadcrumb slot: custom element rendered right after the breadcrumb area.
+ * Accepts any React node — badges, buttons, status chips, etc.
+ */
+export const WithBreadcrumbSlot: Story = {
+  args: {
+    breadcrumbs: [
+      { label: 'Home', href: '/', icon: <Home className="size-4" /> },
+      { label: 'Deployments' },
+    ],
+    breadcrumbSlot: (
+      <div className="flex items-center gap-2">
+        <Badge variant="warning">Beta</Badge>
+        <Button variant="outline" size="sm">
+          <RefreshCw className="size-3.5" />
+          Sync
+        </Button>
+      </div>
+    ),
+    user: {
+      name: 'Pedro Duarte',
+      email: 'pedro@example.com',
+    },
+  },
+};
+
+/**
+ * SPA Navigation: uses `renderLink` with React Router's `Link` component
+ * to prevent full-page reloads when navigating breadcrumbs.
+ */
+export const WithReactRouter: Story = {
+  args: {
+    breadcrumbs: [
+      { label: 'Home', href: '/', icon: <Home className="size-4" /> },
+      { label: 'Settings', href: '/settings', icon: <Settings className="size-4" /> },
+      { label: 'Users', href: '/settings/users', icon: <Users className="size-4" /> },
+      { label: 'Edit Profile' },
+    ],
+    renderLink: (href, props) => <Link to={href} {...props} />,
+    user: {
+      name: 'Maria Souza',
+      email: 'maria@xertica.ai',
+    },
+  },
+};

package/components/layout/header/header.test.tsx

@@ -1,75 +1,75 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
-import { Header } from './header';
-import React from 'react';
-import { LayoutProvider } from '../../../contexts/LayoutContext';
-
-// Mock useLayout
-vi.mock('../../../contexts/LayoutContext', async () => {
-  const actual = await vi.importActual('../../../contexts/LayoutContext');
-  return {
-    ...actual,
-    useLayout: vi.fn(() => ({
-      sidebarExpanded: true,
-      toggleSidebar: vi.fn(),
-    })),
-  };
-});
-
-// Mock DropdownMenu to render content directly for testing
-vi.mock('../../ui/dropdown-menu', () => ({
-  DropdownMenu: ({ children }: any) => <div>{children}</div>,
-  DropdownMenuTrigger: ({ children }: any) => (
-    <button aria-label="Menu do usuário">{children}</button>
-  ),
-  DropdownMenuContent: ({ children }: any) => <div>{children}</div>,
-  DropdownMenuItem: ({ children }: any) => <div>{children}</div>,
-  DropdownMenuLabel: ({ children }: any) => <div>{children}</div>,
-  DropdownMenuSeparator: () => <hr />,
-  DropdownMenuGroup: ({ children }: any) => <div>{children}</div>,
-  DropdownMenuSub: ({ children }: any) => <div>{children}</div>,
-  DropdownMenuSubTrigger: ({ children }: any) => <div>{children}</div>,
-  DropdownMenuSubContent: ({ children }: any) => <div>{children}</div>,
-  DropdownMenuPortal: ({ children }: any) => <>{children}</>,
-}));
-
-describe('Header', () => {
-  it('renders without a LayoutProvider', () => {
-    render(<Header title="Standalone" />);
-
-    expect(screen.getByText('Standalone')).toBeInTheDocument();
-  });
-
-  it('renders correctly with title', () => {
-    render(
-      <LayoutProvider>
-        <Header title="Dashboard" />
-      </LayoutProvider>
-    );
-    expect(screen.getByText('Dashboard')).toBeInTheDocument();
-  });
-
-  it('renders breadcrumbs correctly', () => {
-    const breadcrumbs = [{ label: 'Home', href: '/' }, { label: 'Settings' }];
-    render(
-      <LayoutProvider>
-        <Header breadcrumbs={breadcrumbs} />
-      </LayoutProvider>
-    );
-    expect(screen.getByText('Home')).toBeInTheDocument();
-    expect(screen.getByText('Settings')).toBeInTheDocument();
-  });
-
-  it('shows user info when user prop is provided', () => {
-    const user = { name: 'John Doe', email: 'john@example.com' };
-    render(
-      <LayoutProvider>
-        <Header user={user} />
-      </LayoutProvider>
-    );
-
-    // With the mock, content should be directly visible or easily triggered
-    expect(screen.getByText('John Doe')).toBeInTheDocument();
-    expect(screen.getByText('john@example.com')).toBeInTheDocument();
-  });
-});
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Header } from './header';
+import React from 'react';
+import { LayoutProvider } from '../../../contexts/LayoutContext';
+
+// Mock useLayout
+vi.mock('../../../contexts/LayoutContext', async () => {
+  const actual = await vi.importActual('../../../contexts/LayoutContext');
+  return {
+    ...actual,
+    useLayout: vi.fn(() => ({
+      sidebarExpanded: true,
+      toggleSidebar: vi.fn(),
+    })),
+  };
+});
+
+// Mock DropdownMenu to render content directly for testing
+vi.mock('../../ui/dropdown-menu', () => ({
+  DropdownMenu: ({ children }: any) => <div>{children}</div>,
+  DropdownMenuTrigger: ({ children }: any) => (
+    <button aria-label="Menu do usuário">{children}</button>
+  ),
+  DropdownMenuContent: ({ children }: any) => <div>{children}</div>,
+  DropdownMenuItem: ({ children }: any) => <div>{children}</div>,
+  DropdownMenuLabel: ({ children }: any) => <div>{children}</div>,
+  DropdownMenuSeparator: () => <hr />,
+  DropdownMenuGroup: ({ children }: any) => <div>{children}</div>,
+  DropdownMenuSub: ({ children }: any) => <div>{children}</div>,
+  DropdownMenuSubTrigger: ({ children }: any) => <div>{children}</div>,
+  DropdownMenuSubContent: ({ children }: any) => <div>{children}</div>,
+  DropdownMenuPortal: ({ children }: any) => <>{children}</>,
+}));
+
+describe('Header', () => {
+  it('renders without a LayoutProvider', () => {
+    render(<Header title="Standalone" />);
+
+    expect(screen.getByText('Standalone')).toBeInTheDocument();
+  });
+
+  it('renders correctly with title', () => {
+    render(
+      <LayoutProvider>
+        <Header title="Dashboard" />
+      </LayoutProvider>
+    );
+    expect(screen.getByText('Dashboard')).toBeInTheDocument();
+  });
+
+  it('renders breadcrumbs correctly', () => {
+    const breadcrumbs = [{ label: 'Home', href: '/' }, { label: 'Settings' }];
+    render(
+      <LayoutProvider>
+        <Header breadcrumbs={breadcrumbs} />
+      </LayoutProvider>
+    );
+    expect(screen.getByText('Home')).toBeInTheDocument();
+    expect(screen.getByText('Settings')).toBeInTheDocument();
+  });
+
+  it('shows user info when user prop is provided', () => {
+    const user = { name: 'John Doe', email: 'john@example.com' };
+    render(
+      <LayoutProvider>
+        <Header user={user} />
+      </LayoutProvider>
+    );
+
+    // With the mock, content should be directly visible or easily triggered
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.getByText('john@example.com')).toBeInTheDocument();
+  });
+});