xertica-ui 2.4.0 → 2.4.1

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.tsx

@@ -1,78 +1,78 @@
-import React from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { Sidebar } from '../../layout/sidebar';
-import { HomeContent } from '../home-content/HomeContent';
-import { XerticaAssistant } from '../../assistant/xertica-assistant/xertica-assistant';
-import { gerarResposta } from '../../shared/assistant-utils';
-import { routes } from '../../shared/navigation';
-import { useOptionalLayout } from '../../../contexts/LayoutContext';
-import { useAuth } from '../../../contexts/AuthContext';
-import {
-  useAssistantConfig,
-  getMockRichSuggestions,
-  getMockFeedbackOptions,
-} from '../../../features/assistant';
-
-/**
- * Root Dashboard page component.
- *
- * @description
- * Assembles Sidebar, HomeContent, and XerticaAssistant. Assistant configuration
- * (suggestions, feedback options) is fetched via `useAssistantConfig` (React Query).
- * To use a real API, replace `fetchAssistantConfig` in `features/assistant/data/mock.ts`.
- *
- * @ai-rules
- * 1. Data: Assistant config comes from `useAssistantConfig()` — never hardcode suggestions here.
- * 2. Composition: Keep this as a thin layout shell; delegate all content to children.
- * 3. State: Relies on `LayoutContext` for sidebar / assistant visibility.
- */
-export function HomePage() {
-  const { user, logout } = useAuth();
-  const layout = useOptionalLayout();
-  const [localSidebarExpanded, setLocalSidebarExpanded] = React.useState(false);
-  const [localAssistantExpanded, setLocalAssistantExpanded] = React.useState(false);
-  const sidebarExpanded = layout?.sidebarExpanded ?? localSidebarExpanded;
-  const sidebarWidth = layout?.sidebarWidth ?? 280;
-  const assistenteExpanded = layout?.assistenteExpanded ?? localAssistantExpanded;
-  const toggleSidebar = layout?.toggleSidebar ?? (() => setLocalSidebarExpanded(value => !value));
-  const toggleAssistente =
-    layout?.toggleAssistente ?? (() => setLocalAssistantExpanded(value => !value));
-  const location = useLocation();
-  const navigate = useNavigate();
-
-  const { data: assistantConfig } = useAssistantConfig();
-
-  return (
-    <div className="h-screen flex bg-muted overflow-hidden relative">
-      <Sidebar
-        expanded={sidebarExpanded}
-        width={sidebarWidth}
-        onToggle={toggleSidebar}
-        user={{
-          ...user,
-          name: 'Ariel Santos',
-          avatar: 'https://github.com/shadcn.png',
-        }}
-        onLogout={logout}
-        onSettingsClick={() => navigate('/settings')}
-        location={location}
-        navigate={navigate}
-        routes={routes}
-      />
-      <HomeContent />
-      <XerticaAssistant
-        isExpanded={assistenteExpanded}
-        onToggle={toggleAssistente}
-        defaultTab="chat"
-        demoMode={true}
-        responseGenerator={gerarResposta}
-        suggestions={assistantConfig?.suggestions}
-        richSuggestions={assistantConfig?.richSuggestions ?? getMockRichSuggestions()}
-        feedbackOptions={assistantConfig?.feedbackOptions ?? getMockFeedbackOptions()}
-        onEvaluation={() => {
-          // Wire your feedback persistence logic here
-        }}
-      />
-    </div>
-  );
-}
+import React from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { Sidebar } from '../../layout/sidebar';
+import { HomeContent } from '../home-content/HomeContent';
+import { XerticaAssistant } from '../../assistant/xertica-assistant/xertica-assistant';
+import { gerarResposta } from '../../shared/assistant-utils';
+import { routes } from '../../shared/navigation';
+import { useOptionalLayout } from '../../../contexts/LayoutContext';
+import { useAuth } from '../../../contexts/AuthContext';
+import {
+  useAssistantConfig,
+  getMockRichSuggestions,
+  getMockFeedbackOptions,
+} from '../../../features/assistant';
+
+/**
+ * Root Dashboard page component.
+ *
+ * @description
+ * Assembles Sidebar, HomeContent, and XerticaAssistant. Assistant configuration
+ * (suggestions, feedback options) is fetched via `useAssistantConfig` (React Query).
+ * To use a real API, replace `fetchAssistantConfig` in `features/assistant/data/mock.ts`.
+ *
+ * @ai-rules
+ * 1. Data: Assistant config comes from `useAssistantConfig()` — never hardcode suggestions here.
+ * 2. Composition: Keep this as a thin layout shell; delegate all content to children.
+ * 3. State: Relies on `LayoutContext` for sidebar / assistant visibility.
+ */
+export function HomePage() {
+  const { user, logout } = useAuth();
+  const layout = useOptionalLayout();
+  const [localSidebarExpanded, setLocalSidebarExpanded] = React.useState(false);
+  const [localAssistantExpanded, setLocalAssistantExpanded] = React.useState(false);
+  const sidebarExpanded = layout?.sidebarExpanded ?? localSidebarExpanded;
+  const sidebarWidth = layout?.sidebarWidth ?? 280;
+  const assistenteExpanded = layout?.assistenteExpanded ?? localAssistantExpanded;
+  const toggleSidebar = layout?.toggleSidebar ?? (() => setLocalSidebarExpanded(value => !value));
+  const toggleAssistente =
+    layout?.toggleAssistente ?? (() => setLocalAssistantExpanded(value => !value));
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const { data: assistantConfig } = useAssistantConfig();
+
+  return (
+    <div className="h-screen flex bg-muted overflow-hidden relative">
+      <Sidebar
+        expanded={sidebarExpanded}
+        width={sidebarWidth}
+        onToggle={toggleSidebar}
+        user={{
+          ...user,
+          name: 'Ariel Santos',
+          avatar: 'https://github.com/shadcn.png',
+        }}
+        onLogout={logout}
+        onSettingsClick={() => navigate('/settings')}
+        location={location}
+        navigate={navigate}
+        routes={routes}
+      />
+      <HomeContent />
+      <XerticaAssistant
+        isExpanded={assistenteExpanded}
+        onToggle={toggleAssistente}
+        defaultTab="chat"
+        demoMode={true}
+        responseGenerator={gerarResposta}
+        suggestions={assistantConfig?.suggestions}
+        richSuggestions={assistantConfig?.richSuggestions ?? getMockRichSuggestions()}
+        feedbackOptions={assistantConfig?.feedbackOptions ?? getMockFeedbackOptions()}
+        onEvaluation={() => {
+          // Wire your feedback persistence logic here
+        }}
+      />
+    </div>
+  );
+}

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`.