xertica-ui 2.2.1 → 2.3.0

package/components/figma/ImageWithFallback.tsx

@@ -1,27 +1,27 @@
-import React, { useState } from 'react';
-
-const ERROR_IMG_SRC =
-  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg==';
-
-export function ImageWithFallback(props: React.ImgHTMLAttributes<HTMLImageElement>) {
-  const [didError, setDidError] = useState(false);
-
-  const handleError = () => {
-    setDidError(true);
-  };
-
-  const { src, alt, style, className, ...rest } = props;
-
-  return didError ? (
-    <div
-      className={`inline-block bg-gray-100 text-center align-middle ${className ?? ''}`}
-      style={style}
-    >
-      <div className="flex items-center justify-center w-full h-full">
-        <img src={ERROR_IMG_SRC} alt="Error loading image" {...rest} data-original-url={src} />
-      </div>
-    </div>
-  ) : (
-    <img src={src} alt={alt} className={className} style={style} {...rest} onError={handleError} />
-  );
-}
+import React, { useState } from 'react';
+
+const ERROR_IMG_SRC =
+  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg==';
+
+export function ImageWithFallback(props: React.ImgHTMLAttributes<HTMLImageElement>) {
+  const [didError, setDidError] = useState(false);
+
+  const handleError = () => {
+    setDidError(true);
+  };
+
+  const { src, alt, style, className, ...rest } = props;
+
+  return didError ? (
+    <div
+      className={`inline-block bg-gray-100 text-center align-middle ${className ?? ''}`}
+      style={style}
+    >
+      <div className="flex items-center justify-center w-full h-full">
+        <img src={ERROR_IMG_SRC} alt="Error loading image" {...rest} data-original-url={src} />
+      </div>
+    </div>
+  ) : (
+    <img src={src} alt={alt} className={className} style={style} {...rest} onError={handleError} />
+  );
+}

package/components/hooks/index.ts

@@ -1,13 +1,13 @@
-export * from '../../contexts/LayoutContext';
-export * from '../../contexts/ThemeContext';
-export * from '../../contexts/LanguageContext';
-export * from '../../contexts/BrandColorsContext';
-export * from '../../contexts/AssistenteContext';
-export * from '../../contexts/ApiKeyContext';
-export { useMobile, useIsMobile } from '../shared/use-mobile';
-export { useLayoutShortcuts } from './use-layout-shortcuts';
-export { useAudioPlayer } from '../media/audio-player/use-audio-player';
-export type {
-  UseAudioPlayerProps,
-  UseAudioPlayerReturn,
-} from '../media/audio-player/use-audio-player';
+export * from '../../contexts/LayoutContext';
+export * from '../../contexts/ThemeContext';
+export * from '../../contexts/LanguageContext';
+export * from '../../contexts/BrandColorsContext';
+export * from '../../contexts/AssistenteContext';
+export * from '../../contexts/ApiKeyContext';
+export { useMobile, useIsMobile } from '../shared/use-mobile';
+export { useLayoutShortcuts } from './use-layout-shortcuts';
+export { useAudioPlayer } from '../media/audio-player/use-audio-player';
+export type {
+  UseAudioPlayerProps,
+  UseAudioPlayerReturn,
+} from '../media/audio-player/use-audio-player';

package/components/hooks/use-layout-shortcuts.ts

@@ -1,43 +1,43 @@
-import { useEffect } from 'react';
-import { useLayout } from '../../contexts/LayoutContext';
-
-const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
-
-/**
- * `useLayoutShortcuts` — Registra atalhos de teclado globais para controle de layout.
- *
- * Deve ser usado uma única vez no componente raiz da aplicação (ex: `App.tsx` ou `Layout.tsx`).
- * Extrai a responsabilidade de atalhos de teclado do `LayoutContext`, seguindo o
- * princípio de responsabilidade única.
- *
- * **Atalhos registrados:**
- * - `Ctrl+B` / `Cmd+B` — Alterna a sidebar
- *
- * @example
- * ```tsx
- * // Em App.tsx ou no componente de layout raiz:
- * import { useLayoutShortcuts } from 'xertica-ui/hooks';
- *
- * function AppLayout({ children }: { children: React.ReactNode }) {
- *   useLayoutShortcuts(); // registra Ctrl+B para toggle da sidebar
- *   return <div>{children}</div>;
- * }
- * ```
- */
-export function useLayoutShortcuts() {
-  const { toggleSidebar } = useLayout();
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
-        event.preventDefault();
-        toggleSidebar();
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [toggleSidebar]);
-}
+import { useEffect } from 'react';
+import { useLayout } from '../../contexts/LayoutContext';
+
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+
+/**
+ * `useLayoutShortcuts` — Registra atalhos de teclado globais para controle de layout.
+ *
+ * Deve ser usado uma única vez no componente raiz da aplicação (ex: `App.tsx` ou `Layout.tsx`).
+ * Extrai a responsabilidade de atalhos de teclado do `LayoutContext`, seguindo o
+ * princípio de responsabilidade única.
+ *
+ * **Atalhos registrados:**
+ * - `Ctrl+B` / `Cmd+B` — Alterna a sidebar
+ *
+ * @example
+ * ```tsx
+ * // Em App.tsx ou no componente de layout raiz:
+ * import { useLayoutShortcuts } from 'xertica-ui/hooks';
+ *
+ * function AppLayout({ children }: { children: React.ReactNode }) {
+ *   useLayoutShortcuts(); // registra Ctrl+B para toggle da sidebar
+ *   return <div>{children}</div>;
+ * }
+ * ```
+ */
+export function useLayoutShortcuts() {
+  const { toggleSidebar } = useLayout();
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [toggleSidebar]);
+}

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',
+    },
+  },
+};