xertica-ui 2.5.3 → 2.7.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-page/HomePage.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { HomePage } from './HomePage';
 import { MemoryRouter } from 'react-router-dom';
 import { LayoutProvider } from '../../../contexts/LayoutContext';
+import { AuthProvider } from '../../../contexts/AuthContext';
 import React from 'react';
 
 const meta: Meta<typeof HomePage> = {
@@ -10,9 +11,11 @@ const meta: Meta<typeof HomePage> = {
   decorators: [
     Story => (
       <MemoryRouter initialEntries={['/home']}>
-        <LayoutProvider>
-          <Story />
-        </LayoutProvider>
+        <AuthProvider>
+          <LayoutProvider>
+            <Story />
+          </LayoutProvider>
+        </AuthProvider>
       </MemoryRouter>
     ),
   ],
@@ -24,16 +27,6 @@ const meta: Meta<typeof HomePage> = {
 export default meta;
 type Story = StoryObj<typeof HomePage>;
 
-export const Default: Story = {
-  args: {
-    user: { email: 'ariel@xertica.com' },
-    onLogout: () => {},
-  },
-};
+export const Default: Story = {};
 
-export const NoUser: Story = {
-  args: {
-    user: null,
-    onLogout: () => {},
-  },
-};
+export const NoUser: Story = {};

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,4 +1,5 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import { renderWithProviders as render } from '../../../test/render';
 import { describe, it, expect, vi } from 'vitest';
 import { HomePage } from './HomePage';
 import React from 'react';

package/components/pages/login-page/LoginPage.mdx

@@ -1,31 +1,31 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as LoginPageStories from './LoginPage.stories';
-
-<Meta of={LoginPageStories} />
-
-<Title />
-<Subtitle>A complete, responsive login screen with hero image and SSO support.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Features
-- **Responsive Layout**: Side-by-side on desktop, stacked on mobile.
-- **SSO Options**: Built-in support for Google, MT Login, and gov.br.
-- **Form States**: Integrated loading and error handling.
-
-<Canvas>
-  <LoginPageStories.Default />
-</Canvas>
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Logic** — Provide the `onLogin` callback to handle actual authentication.
-> - **Customization** — Customize hero images and SSO buttons as per project requirements.
-> - **Routing** — The page uses `useNavigate()` for the forgot-password flow.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as LoginPageStories from './LoginPage.stories';
+
+<Meta of={LoginPageStories} />
+
+<Title />
+<Subtitle>A complete, responsive login screen with hero image and SSO support.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Features
+- **Responsive Layout**: Side-by-side on desktop, stacked on mobile.
+- **SSO Options**: Built-in support for Google, MT Login, and gov.br.
+- **Form States**: Integrated loading and error handling.
+
+<Canvas>
+  <LoginPageStories.Default />
+</Canvas>
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Logic** — Provide the `onLogin` callback to handle actual authentication.
+> - **Customization** — Customize hero images and SSO buttons as per project requirements.
+> - **Routing** — The page uses `useNavigate()` for the forgot-password flow.