xertica-ui 2.2.1 → 2.3.0

package/components/pages/home-content/home-content.mdx

@@ -1,62 +1,62 @@
-import { Meta, Title, Subtitle } from '@storybook/addon-docs/blocks';
-
-<Meta title="Pages/HomeContent" />
-
-<Title>HomeContent</Title>
-<Subtitle>Main dashboard landing area with breadcrumb header and feature card grid.</Subtitle>
-
----
-
-## Overview
-
-`HomeContent` is the top-level content component for the application's home/dashboard route. It renders:
-
-- A sticky `Header` with breadcrumbs and optional theme/language controls.
-- A `PageHeader` welcoming the user.
-- A responsive card grid for navigating to application features.
-
-It reads sidebar state from `LayoutContext` when available and falls back to safe local defaults when rendered outside `XerticaProvider`.
-
-**Requires:** React Router v6. `XerticaProvider` is recommended for synchronized layout state, but no longer required for rendering.
-
-```tsx
-import { HomeContent } from 'xertica-ui';
-
-<HomeContent user={currentUser} onLogout={handleLogout} />
-```
-
----
-
-## Props
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `user` | `{ name?: string; email?: string; avatar?: string } \| null` | - | Currently authenticated user. Passed to the header for display. |
-| `onLogout` | `() => void` | - | Called when the user triggers logout from the header. |
-| `onSettings` | `() => void` | - | Called when the user opens account settings from the header. |
-
----
-
-## Layout Dependency
-
-`HomeContent` uses optional layout state. When wrapped in `XerticaProvider`, it synchronizes with the global sidebar width and expanded state. Without the provider, it renders using collapsed-sidebar defaults.
-
-```tsx
-// Recommended - synchronized app layout
-<XerticaProvider>
-  <HomeContent />
-</XerticaProvider>
-
-// Also safe - uses local fallback layout values
-<HomeContent />
-```
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Provider fallback** - `HomeContent` renders without `XerticaProvider`, but the provider is recommended for synchronized sidebar state.
-> - **Feature cards** - The card grid is currently hardcoded to the "Template CLI" feature. To add cards, fork the component and extend the grid section.
-> - **Breadcrumbs** - Breadcrumb labels are resolved via a local `labelTranslations` map and `getRouteByPath`. Ensure your route definitions include a `label` field for correct breadcrumb rendering.
-> - **Background color** - The outer container uses `bg-muted` from the design system tokens. Override with `className` if a different background is needed.
+import { Meta, Title, Subtitle } from '@storybook/addon-docs/blocks';
+
+<Meta title="Pages/HomeContent" />
+
+<Title>HomeContent</Title>
+<Subtitle>Main dashboard landing area with breadcrumb header and feature card grid.</Subtitle>
+
+---
+
+## Overview
+
+`HomeContent` is the top-level content component for the application's home/dashboard route. It renders:
+
+- A sticky `Header` with breadcrumbs and optional theme/language controls.
+- A `PageHeader` welcoming the user.
+- A responsive card grid for navigating to application features.
+
+It reads sidebar state from `LayoutContext` when available and falls back to safe local defaults when rendered outside `XerticaProvider`.
+
+**Requires:** React Router v6. `XerticaProvider` is recommended for synchronized layout state, but no longer required for rendering.
+
+```tsx
+import { HomeContent } from 'xertica-ui';
+
+<HomeContent user={currentUser} onLogout={handleLogout} />
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `user` | `{ name?: string; email?: string; avatar?: string } \| null` | - | Currently authenticated user. Passed to the header for display. |
+| `onLogout` | `() => void` | - | Called when the user triggers logout from the header. |
+| `onSettings` | `() => void` | - | Called when the user opens account settings from the header. |
+
+---
+
+## Layout Dependency
+
+`HomeContent` uses optional layout state. When wrapped in `XerticaProvider`, it synchronizes with the global sidebar width and expanded state. Without the provider, it renders using collapsed-sidebar defaults.
+
+```tsx
+// Recommended - synchronized app layout
+<XerticaProvider>
+  <HomeContent />
+</XerticaProvider>
+
+// Also safe - uses local fallback layout values
+<HomeContent />
+```
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Provider fallback** - `HomeContent` renders without `XerticaProvider`, but the provider is recommended for synchronized sidebar state.
+> - **Feature cards** - The card grid is currently hardcoded to the "Template CLI" feature. To add cards, fork the component and extend the grid section.
+> - **Breadcrumbs** - Breadcrumb labels are resolved via a local `labelTranslations` map and `getRouteByPath`. Ensure your route definitions include a `label` field for correct breadcrumb rendering.
+> - **Background color** - The outer container uses `bg-muted` from the design system tokens. Override with `className` if a different background is needed.

package/components/pages/home-content/index.ts

@@ -1 +1 @@
-export * from './HomeContent';
+export * from './HomeContent';

package/components/pages/home-page/HomePage.stories.tsx

@@ -1,39 +1,39 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { HomePage } from './HomePage';
-import { MemoryRouter } from 'react-router-dom';
-import { LayoutProvider } from '../../../contexts/LayoutContext';
-import React from 'react';
-
-const meta: Meta<typeof HomePage> = {
-  title: 'Pages/HomePage',
-  component: HomePage,
-  decorators: [
-    Story => (
-      <MemoryRouter initialEntries={['/home']}>
-        <LayoutProvider>
-          <Story />
-        </LayoutProvider>
-      </MemoryRouter>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof HomePage>;
-
-export const Default: Story = {
-  args: {
-    user: { email: 'ariel@xertica.com' },
-    onLogout: () => {},
-  },
-};
-
-export const NoUser: Story = {
-  args: {
-    user: null,
-    onLogout: () => {},
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { HomePage } from './HomePage';
+import { MemoryRouter } from 'react-router-dom';
+import { LayoutProvider } from '../../../contexts/LayoutContext';
+import React from 'react';
+
+const meta: Meta<typeof HomePage> = {
+  title: 'Pages/HomePage',
+  component: HomePage,
+  decorators: [
+    Story => (
+      <MemoryRouter initialEntries={['/home']}>
+        <LayoutProvider>
+          <Story />
+        </LayoutProvider>
+      </MemoryRouter>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof HomePage>;
+
+export const Default: Story = {
+  args: {
+    user: { email: 'ariel@xertica.com' },
+    onLogout: () => {},
+  },
+};
+
+export const NoUser: Story = {
+  args: {
+    user: null,
+    onLogout: () => {},
+  },
+};

package/components/pages/home-page/home-page.mdx

@@ -1,53 +1,53 @@
-import { Meta, Title, Subtitle } from '@storybook/addon-docs/blocks';
-import * as HomePageStories from './HomePage.stories';
-
-<Meta of={HomePageStories} />
-
-<Title>HomePage</Title>
-<Subtitle>Full application shell composed from Sidebar, HomeContent, and XerticaAssistant.</Subtitle>
-
----
-
-## Overview
-
-`HomePage` is the root authenticated page. It assembles the three major layout pillars:
-
-- **Sidebar** - Primary navigation.
-- **HomeContent** - Dashboard area with breadcrumb header and feature card grid.
-- **XerticaAssistant** - Floating AI assistant panel.
-
-When `XerticaProvider` is present, the page synchronizes sidebar width, sidebar expansion, and assistant visibility through `LayoutContext`. Without the provider, it renders with local fallback layout state.
-
-**Requires:** React Router v6. `XerticaProvider` is recommended for app-level synchronization.
-
----
-
-## Props
-
-| Prop | Type | Required | Description |
-|---|---|---|---|
-| `user` | `{ email: string } \| null` | Yes | Currently authenticated user. Passed to Sidebar and HomeContent for display. |
-| `onLogout` | `() => void` | Yes | Called when the user triggers logout from the Sidebar or Header. |
-
----
-
-## Composition
-
-```tsx
-import { HomePage } from 'xertica-ui';
-
-<Route
-  path="/home"
-  element={<HomePage user={currentUser} onLogout={handleLogout} />}
-/>
-```
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Top-level only** - `HomePage` is a full-screen layout component. Do not nest it inside other layouts.
-> - **No logic here** - Keep business logic in `HomeContent` or lower-level components.
-> - **Provider fallback** - The page renders without `XerticaProvider`, but the provider is recommended for synchronized app layout.
-> - **Extend via HomeContent** - To add dashboard sections, edit `HomeContent`, not `HomePage`.
+import { Meta, Title, Subtitle } from '@storybook/addon-docs/blocks';
+import * as HomePageStories from './HomePage.stories';
+
+<Meta of={HomePageStories} />
+
+<Title>HomePage</Title>
+<Subtitle>Full application shell composed from Sidebar, HomeContent, and XerticaAssistant.</Subtitle>
+
+---
+
+## Overview
+
+`HomePage` is the root authenticated page. It assembles the three major layout pillars:
+
+- **Sidebar** - Primary navigation.
+- **HomeContent** - Dashboard area with breadcrumb header and feature card grid.
+- **XerticaAssistant** - Floating AI assistant panel.
+
+When `XerticaProvider` is present, the page synchronizes sidebar width, sidebar expansion, and assistant visibility through `LayoutContext`. Without the provider, it renders with local fallback layout state.
+
+**Requires:** React Router v6. `XerticaProvider` is recommended for app-level synchronization.
+
+---
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `user` | `{ email: string } \| null` | Yes | Currently authenticated user. Passed to Sidebar and HomeContent for display. |
+| `onLogout` | `() => void` | Yes | Called when the user triggers logout from the Sidebar or Header. |
+
+---
+
+## Composition
+
+```tsx
+import { HomePage } from 'xertica-ui';
+
+<Route
+  path="/home"
+  element={<HomePage user={currentUser} onLogout={handleLogout} />}
+/>
+```
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Top-level only** - `HomePage` is a full-screen layout component. Do not nest it inside other layouts.
+> - **No logic here** - Keep business logic in `HomeContent` or lower-level components.
+> - **Provider fallback** - The page renders without `XerticaProvider`, but the provider is recommended for synchronized app layout.
+> - **Extend via HomeContent** - To add dashboard sections, edit `HomeContent`, not `HomePage`.

package/components/pages/home-page/home-page.test.tsx

@@ -1,53 +1,53 @@
-import { render, screen } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
-import { HomePage } from './HomePage';
-import React from 'react';
-import { LayoutProvider } from '../../../contexts/LayoutContext';
-
-// Mock react-router
-vi.mock('react-router-dom', () => ({
-  useLocation: () => ({ pathname: '/' }),
-  useNavigate: () => vi.fn(),
-  Link: ({ to, children, ...props }: any) => (
-    <a href={to} {...props}>
-      {children}
-    </a>
-  ),
-}));
-
-// Mock navigation (moved from root routes.tsx)
-vi.mock('../../shared/navigation', () => ({
-  routes: [],
-  getRouteByPath: vi.fn(path => ({ path, label: 'Test Route' })),
-  isValidRoute: vi.fn(() => true),
-}));
-
-// Mock AuthContext so the component can consume useAuth without a real provider
-vi.mock('../../../contexts/AuthContext', () => ({
-  useAuth: () => ({
-    user: { email: 'user@example.com' },
-    isLoading: false,
-    login: vi.fn(),
-    logout: vi.fn(),
-  }),
-}));
-
-// Mock assistant components that might be heavy
-vi.mock('../../assistant/xertica-assistant/xertica-assistant', () => ({
-  XerticaAssistant: () => <div data-testid="assistant">Assistant</div>,
-}));
-
-describe('HomePage', () => {
-  it('renders correctly with sidebar and content', () => {
-    render(
-      <LayoutProvider>
-        <HomePage />
-      </LayoutProvider>
-    );
-
-    // Check if assistant is rendered
-    expect(screen.getByTestId('assistant')).toBeInTheDocument();
-    // Logo should be in sidebar
-    expect(document.querySelector('svg')).toBeInTheDocument();
-  });
-});
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { HomePage } from './HomePage';
+import React from 'react';
+import { LayoutProvider } from '../../../contexts/LayoutContext';
+
+// Mock react-router
+vi.mock('react-router-dom', () => ({
+  useLocation: () => ({ pathname: '/' }),
+  useNavigate: () => vi.fn(),
+  Link: ({ to, children, ...props }: any) => (
+    <a href={to} {...props}>
+      {children}
+    </a>
+  ),
+}));
+
+// Mock navigation (moved from root routes.tsx)
+vi.mock('../../shared/navigation', () => ({
+  routes: [],
+  getRouteByPath: vi.fn(path => ({ path, label: 'Test Route' })),
+  isValidRoute: vi.fn(() => true),
+}));
+
+// Mock AuthContext so the component can consume useAuth without a real provider
+vi.mock('../../../contexts/AuthContext', () => ({
+  useAuth: () => ({
+    user: { email: 'user@example.com' },
+    isLoading: false,
+    login: vi.fn(),
+    logout: vi.fn(),
+  }),
+}));
+
+// Mock assistant components that might be heavy
+vi.mock('../../assistant/xertica-assistant/xertica-assistant', () => ({
+  XerticaAssistant: () => <div data-testid="assistant">Assistant</div>,
+}));
+
+describe('HomePage', () => {
+  it('renders correctly with sidebar and content', () => {
+    render(
+      <LayoutProvider>
+        <HomePage />
+      </LayoutProvider>
+    );
+
+    // Check if assistant is rendered
+    expect(screen.getByTestId('assistant')).toBeInTheDocument();
+    // Logo should be in sidebar
+    expect(document.querySelector('svg')).toBeInTheDocument();
+  });
+});

package/components/pages/home-page/index.ts

@@ -1 +1 @@
-export * from './HomePage';
+export * from './HomePage';

package/components/pages/index.ts

@@ -1,8 +1,8 @@
-export * from './forgot-password-page';
-export * from './home-content';
-export * from './home-page';
-export * from './login-page';
-export * from './reset-password-page';
-export * from './template-content';
-export * from './template-page';
-export * from './verify-email-page';
+export * from './forgot-password-page';
+export * from './home-content';
+export * from './home-page';
+export * from './login-page';
+export * from './reset-password-page';
+export * from './template-content';
+export * from './template-page';
+export * from './verify-email-page';

package/components/pages/login-page/LoginPage.stories.tsx

@@ -1,39 +1,39 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { LoginPage } from './LoginPage';
-import { BrowserRouter } from 'react-router-dom';
-import React from 'react';
-
-const meta: Meta<typeof LoginPage> = {
-  title: 'Pages/LoginPage',
-  component: LoginPage,
-  decorators: [
-    Story => (
-      <BrowserRouter>
-        <Story />
-      </BrowserRouter>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof LoginPage>;
-
-export const Default: Story = {
-  args: {
-    onLogin: (email, password) => {
-      console.log('Login attempt:', { email, password });
-      return true;
-    },
-  },
-};
-
-export const ValidationFailed: Story = {
-  args: {
-    onLogin: (email, password) => {
-      return false;
-    },
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { LoginPage } from './LoginPage';
+import { BrowserRouter } from 'react-router-dom';
+import React from 'react';
+
+const meta: Meta<typeof LoginPage> = {
+  title: 'Pages/LoginPage',
+  component: LoginPage,
+  decorators: [
+    Story => (
+      <BrowserRouter>
+        <Story />
+      </BrowserRouter>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof LoginPage>;
+
+export const Default: Story = {
+  args: {
+    onLogin: (email, password) => {
+      console.log('Login attempt:', { email, password });
+      return true;
+    },
+  },
+};
+
+export const ValidationFailed: Story = {
+  args: {
+    onLogin: (email, password) => {
+      return false;
+    },
+  },
+};

package/components/pages/login-page/index.ts

@@ -1 +1 @@
-export * from './LoginPage';
+export * from './LoginPage';

package/components/pages/login-page/login-page.test.tsx

@@ -1,63 +1,63 @@
-import { render, screen, fireEvent, act, waitFor } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { LoginPage } from './LoginPage';
-import React from 'react';
-
-// Mock react-router
-const mockNavigate = vi.fn();
-vi.mock('react-router-dom', () => ({
-  useNavigate: () => mockNavigate,
-}));
-
-describe('LoginPage', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('submits form with credentials', async () => {
-    const onLogin = vi.fn(() => true);
-    render(<LoginPage onLogin={onLogin} />);
-
-    const emailInput = screen.getByLabelText('E-mail');
-    const passwordInput = screen.getByLabelText('Senha');
-    const submitButton = screen.getByRole('button', { name: 'Entrar' });
-
-    fireEvent.change(emailInput, { target: { value: 'test@example.com' } });
-    fireEvent.change(passwordInput, { target: { value: 'password123' } });
-
-    fireEvent.click(submitButton);
-
-    expect(screen.getByText('Entrando...')).toBeInTheDocument();
-
-    await act(async () => {
-      await new Promise(resolve => setTimeout(resolve, 1100));
-    });
-
-    expect(onLogin).toHaveBeenCalledWith('test@example.com', 'password123');
-  });
-
-  it('shows error if validation fails', async () => {
-    const onLogin = vi.fn(() => false);
-    render(<LoginPage onLogin={onLogin} />);
-
-    const emailInput = screen.getByLabelText('E-mail');
-    const passwordInput = screen.getByLabelText('Senha');
-    fireEvent.change(emailInput, { target: { value: 'test@example.com' } });
-    fireEvent.change(passwordInput, { target: { value: 'wrong' } });
-
-    fireEvent.click(screen.getByRole('button', { name: 'Entrar' }));
-
-    await waitFor(
-      () => {
-        expect(screen.getByText('Por favor, preencha todos os campos')).toBeInTheDocument();
-      },
-      { timeout: 3000 }
-    );
-  });
-
-  it('navigates to forgot password', () => {
-    render(<LoginPage onLogin={vi.fn()} />);
-    fireEvent.click(screen.getByText('Esqueceu sua senha?'));
-    expect(mockNavigate).toHaveBeenCalledWith('/forgot-password');
-  });
-});
+import { render, screen, fireEvent, act, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { LoginPage } from './LoginPage';
+import React from 'react';
+
+// Mock react-router
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', () => ({
+  useNavigate: () => mockNavigate,
+}));
+
+describe('LoginPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('submits form with credentials', async () => {
+    const onLogin = vi.fn(() => true);
+    render(<LoginPage onLogin={onLogin} />);
+
+    const emailInput = screen.getByLabelText('E-mail');
+    const passwordInput = screen.getByLabelText('Senha');
+    const submitButton = screen.getByRole('button', { name: 'Entrar' });
+
+    fireEvent.change(emailInput, { target: { value: 'test@example.com' } });
+    fireEvent.change(passwordInput, { target: { value: 'password123' } });
+
+    fireEvent.click(submitButton);
+
+    expect(screen.getByText('Entrando...')).toBeInTheDocument();
+
+    await act(async () => {
+      await new Promise(resolve => setTimeout(resolve, 1100));
+    });
+
+    expect(onLogin).toHaveBeenCalledWith('test@example.com', 'password123');
+  });
+
+  it('shows error if validation fails', async () => {
+    const onLogin = vi.fn(() => false);
+    render(<LoginPage onLogin={onLogin} />);
+
+    const emailInput = screen.getByLabelText('E-mail');
+    const passwordInput = screen.getByLabelText('Senha');
+    fireEvent.change(emailInput, { target: { value: 'test@example.com' } });
+    fireEvent.change(passwordInput, { target: { value: 'wrong' } });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Entrar' }));
+
+    await waitFor(
+      () => {
+        expect(screen.getByText('Por favor, preencha todos os campos')).toBeInTheDocument();
+      },
+      { timeout: 3000 }
+    );
+  });
+
+  it('navigates to forgot password', () => {
+    render(<LoginPage onLogin={vi.fn()} />);
+    fireEvent.click(screen.getByText('Esqueceu sua senha?'));
+    expect(mockNavigate).toHaveBeenCalledWith('/forgot-password');
+  });
+});