xertica-ui 2.1.2 → 2.1.3

package/components/layout/sidebar/sidebar.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Sidebar } from './sidebar';
+import { Sidebar, useSidebar } from './sidebar';
 import { useLayout } from '../../../contexts/LayoutContext';
 import { BrowserRouter } from 'react-router-dom';
 import {
@@ -12,6 +12,7 @@ import {
   FileEdit,
   ArrowRightLeft,
   PanelLeft,
+  Menu,
   Trash2,
   Map,
   Archive
@@ -63,8 +64,8 @@ export const Default: Story = {
     const { sidebarWidth: contextWidth } = useLayout();
     const [isExpanded, setIsExpanded] = useState(args.expanded);
 
-    // In Storybook, we match the sidebar widths (256 expanded, 80 collapsed)
-    const currentWidth = isExpanded ? 256 : 80;
+    // In Storybook, we match the sidebar widths (280 expanded, 80 collapsed)
+    const currentWidth = isExpanded ? 280 : 80;
 
     return (
       <div className="relative h-screen w-full border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden" style={{ transform: "translateZ(0)" }}>
@@ -136,7 +137,7 @@ export const DefaultWithGroups: Story = {
   },
   render: (args) => {
     const [isExpanded, setIsExpanded] = useState(args.expanded);
-    const currentWidth = isExpanded ? 256 : 80;
+    const currentWidth = isExpanded ? 280 : 80;
 
     return (
       <div className="relative h-screen w-full border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden" style={{ transform: "translateZ(0)" }}>
@@ -249,7 +250,7 @@ export const Assistant: Story = {
   },
   render: (args) => {
     const [isExpanded, setIsExpanded] = useState(args.expanded);
-    const currentWidth = isExpanded ? 256 : 80;
+    const currentWidth = isExpanded ? 280 : 80;
 
     return (
       <div className="relative h-screen w-full border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden" style={{ transform: "translateZ(0)" }}>
@@ -278,7 +279,7 @@ export const Collapsed: Story = {
   },
   render: (args) => {
     const [isExpanded, setIsExpanded] = useState(args.expanded);
-    const currentWidth = isExpanded ? 256 : 80;
+    const currentWidth = isExpanded ? 280 : 80;
 
     return (
       <div className="relative h-screen w-full border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden" style={{ transform: "translateZ(0)" }}>
@@ -306,7 +307,7 @@ export const NoFooter: Story = {
   },
   render: (args) => {
     const [isExpanded, setIsExpanded] = useState(args.expanded);
-    const currentWidth = isExpanded ? 256 : 80;
+    const currentWidth = isExpanded ? 280 : 80;
 
     return (
       <div className="relative h-screen w-full border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden" style={{ transform: "translateZ(0)" }}>
@@ -344,7 +345,7 @@ export const Autonomous: Story = {
           <div className="text-center max-w-md">
             <p className="text-muted-foreground font-bold">Autonomous Sidebar</p>
             <p className="text-sm text-muted-foreground/80 mt-2">
-              This instance is managing its own state internally. 
+              This instance is managing its own state internally.
               No `expanded` or `onToggle` props are passed.
             </p>
             <p className="text-xs text-muted-foreground mt-4">
@@ -356,3 +357,154 @@ export const Autonomous: Story = {
     );
   },
 };
+
+/**
+ * Compound Component API — demonstrates using Sidebar.Root + sub-components
+ * for full layout control. This is the recommended pattern for advanced
+ * customization without forking the component.
+ */
+export const CompoundComponentAPI: Story = {
+  name: 'Compound Component API',
+  render: () => {
+    const [isExpanded, setIsExpanded] = React.useState(true);
+    const currentWidth = isExpanded ? 280 : 80;
+    const groups = [
+      {
+        id: 'main',
+        label: 'Principal',
+        items: [
+          { path: '/home', label: 'Início', icon: Home },
+          { path: '/dashboard', label: 'Dashboard', icon: BarChart },
+        ],
+      },
+      {
+        id: 'admin',
+        label: 'Administração',
+        items: [
+          { path: '/users', label: 'Usuários', icon: Users },
+          { path: '/settings', label: 'Configurações', icon: Settings },
+        ],
+      },
+    ];
+
+    return (
+      <div className="relative h-screen w-full border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden" style={{ transform: "translateZ(0)" }}>
+        {/* Compound Component usage */}
+        <Sidebar.Root
+          expanded={isExpanded}
+          onToggle={() => setIsExpanded(prev => !prev)}
+          width={currentWidth}
+          location={{ pathname: '/home' }}
+          navigate={() => { }}
+        >
+          <Sidebar.Header />
+          <Sidebar.Nav navigationGroups={groups} />
+          <Sidebar.Footer
+            user={{ name: 'Admin', email: 'admin@example.com' }}
+            onLogout={() => console.log('logout')}
+            showUser
+            showSettings
+            showLogout
+          />
+        </Sidebar.Root>
+
+        <div
+          className="absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300"
+          style={{ left: `${currentWidth}px` }}
+        >
+          <div className="text-center max-w-md space-y-3">
+            <p className="text-muted-foreground font-bold">Compound Component API</p>
+            <p className="text-sm text-muted-foreground/80">
+              Built with <code className="bg-muted px-1 rounded text-xs">&lt;Sidebar.Root&gt;</code>,{' '}
+              <code className="bg-muted px-1 rounded text-xs">&lt;Sidebar.Header&gt;</code>,{' '}
+              <code className="bg-muted px-1 rounded text-xs">&lt;Sidebar.Nav&gt;</code>, and{' '}
+              <code className="bg-muted px-1 rounded text-xs">&lt;Sidebar.Footer&gt;</code>.
+            </p>
+            <p className="text-xs text-muted-foreground">
+              Each sub-component reads shared state from <code className="bg-muted px-1 rounded text-xs">SidebarContext</code> via <code className="bg-muted px-1 rounded text-xs">Sidebar.Root</code>.
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+/**
+ * Headless Hook — demonstrates using `useSidebar` directly for fully custom rendering.
+ * The hook manages all state; the UI is entirely up to the consumer.
+ */
+export const HeadlessHook: Story = {
+  name: 'Headless Hook (useSidebar)',
+  render: () => {
+    const groups = [
+      {
+        id: 'main',
+        label: 'Principal',
+        items: [
+          { path: '/home', label: 'Início', icon: Home },
+          { path: '/dashboard', label: 'Dashboard', icon: BarChart },
+          { path: '/users', label: 'Usuários', icon: Users },
+        ],
+      },
+    ];
+
+    const {
+      expanded,
+      toggleExpanded,
+      navigationGroups: resolvedGroups,
+    } = useSidebar({ defaultExpanded: true, navigationGroups: groups });
+
+    const width = expanded ? 280 : 80;
+
+    return (
+      <div className="relative h-screen w-full border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden" style={{ transform: "translateZ(0)" }}>
+        {/* Fully custom sidebar built with useSidebar hook */}
+        <div
+          className="absolute inset-y-0 left-0 bg-sidebar text-sidebar-foreground flex flex-col transition-all duration-300 z-50"
+          style={{ width: `${width}px` }}
+        >
+          <div className="p-4">
+            <button
+              onClick={toggleExpanded}
+              className="w-full h-10 flex items-center justify-center rounded-md bg-sidebar-foreground/10 hover:bg-sidebar-foreground/20 text-sidebar-foreground transition-colors"
+              aria-label={expanded ? 'Collapse' : 'Expand'}
+            >
+              {expanded ? <PanelLeft className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+            </button>
+          </div>
+          <nav className="flex-1 px-3 space-y-1">
+            {resolvedGroups.flatMap(g => g.items).map(item => {
+              const Icon = item.icon;
+              return (
+                <button
+                  key={item.path}
+                  className="w-full h-10 flex items-center gap-3 px-3 rounded-md text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground transition-colors"
+                >
+                  {Icon && <Icon className="w-5 h-5 flex-shrink-0" />}
+                  {expanded && <span className="truncate text-sm">{item.label}</span>}
+                </button>
+              );
+            })}
+          </nav>
+        </div>
+
+        <div
+          className="absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300"
+          style={{ left: `${width}px` }}
+        >
+          <div className="text-center max-w-md space-y-3">
+            <p className="text-muted-foreground font-bold">Headless Hook</p>
+            <p className="text-sm text-muted-foreground/80">
+              State managed by <code className="bg-muted px-1 rounded text-xs">useSidebar()</code>.
+              The entire UI is custom — no Sidebar component used.
+            </p>
+            <p className="text-xs text-muted-foreground">
+              Sidebar is currently: <strong>{expanded ? 'Expanded' : 'Collapsed'}</strong>
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};

package/components/layout/sidebar/sidebar.test.tsx

@@ -12,7 +12,7 @@ vi.mock('framer-motion', () => ({
   AnimatePresence: ({ children }: any) => <>{children}</>,
 }));
 
-describe('Sidebar', () => {
+describe('Sidebar', () => {
   const defaultProps = {
     expanded: true,
     onToggle: vi.fn(),
@@ -26,19 +26,19 @@ describe('Sidebar', () => {
     ]
   };
 
-  beforeEach(() => {
+  beforeEach(() => {
     vi.clearAllMocks();
     // Mock clientHeight for overflow detection
     Object.defineProperty(HTMLElement.prototype, 'clientHeight', { configurable: true, value: 1000 });
-  });
-
-  it('renders with local fallback state when no LayoutProvider is present', () => {
-    render(<Sidebar routes={defaultProps.routes} location={{ pathname: '/' }} />);
-
-    expect(screen.getByLabelText('Expandir menu')).toBeInTheDocument();
-  });
-
-  it('renders correctly when expanded', async () => {
+  });
+
+  it('renders with local fallback state when no LayoutProvider is present', () => {
+    render(<Sidebar routes={defaultProps.routes} location={{ pathname: '/' }} />);
+
+    expect(screen.getByLabelText('Expandir menu')).toBeInTheDocument();
+  });
+
+  it('renders correctly when expanded', async () => {
     render(<Sidebar {...defaultProps} />);
     await waitFor(() => {
       expect(screen.getByText('Início')).toBeInTheDocument(); // Translated from Home