@fabio.caffarello/react-design-system 1.7.0 → 1.9.0

package/src/ui/organisms/SideNavbar/components/Navbar/Navbar.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+import React, { useState, useRef, useMemo, type HTMLAttributes, type ReactNode } from 'react';
+import { NavbarContext } from '../../contexts/NavbarContext';
+import { useSideNavbarStateRequired } from '../../contexts/SideNavbarStateContext';
+import { useSideNavbarThemeRequired } from '../../contexts/SideNavbarThemeContext';
+import { useSideNavbarConfigRequired } from '../../contexts/SideNavbarConfigContext';
+import { useSideNavbarToggleContextRequired } from '../../contexts/SideNavbarToggleContext';
+import { cn } from '../../../../utils';
+import type { NavbarProps, NavbarContextValue, NavbarTogglePosition } from '../../types';
+import NavbarToggle from './NavbarToggle';
+import NavbarItem from './NavbarItem';
+import NavbarSeparator from './NavbarSeparator';
+import { NavbarGroup } from './NavbarGroup';
+import SideNavbarToggle from '../SideNavbarToggle';
+
+/**
+ * Navbar subcomponent for SideNavbar
+ *
+ * Provides its own context that inherits from the root SideNavbar context.
+ * Contains the icon navigation column with optional internal toggle.
+ *
+ * @example
+ * ```tsx
+ * <SideNavbar.Navbar showToggle togglePosition="bottom">
+ *   <SideNavbar.Navbar.Item icon={<Home />} label="Home" />
+ *   <SideNavbar.Navbar.Item icon={<Settings />} label="Settings" />
+ * </SideNavbar.Navbar>
+ * ```
+ */
+function Navbar({
+  children,
+  showMainToggle: showMainToggleProp,
+  mainTogglePosition: mainTogglePositionProp,
+  showToggle = false,
+  togglePosition = 'bottom',
+  labelMode = 'tooltip',
+  expandedWidth = 200,
+  className = '',
+  style,
+  ...props
+}: NavbarProps) {
+  const rootState = useSideNavbarStateRequired();
+  const rootTheme = useSideNavbarThemeRequired();
+  const rootConfig = useSideNavbarConfigRequired();
+  const toggleContext = useSideNavbarToggleContextRequired();
+  const navbarRef = useRef<HTMLElement>(null);
+  const [activeItem, setActiveItem] = useState<string | null>(null);
+  const [isHovered, setIsHovered] = useState(false);
+
+  // Use props if provided, otherwise use context values
+  const showMainToggle = showMainToggleProp ?? toggleContext.showMainToggle;
+  const mainTogglePosition = mainTogglePositionProp ?? toggleContext.mainTogglePosition;
+
+  // When labelMode is 'inline', navbar should expand
+  const shouldExpand = labelMode === 'inline' && !rootState.collapsed;
+  const navbarWidth = shouldExpand 
+    ? (typeof expandedWidth === 'number' ? `${expandedWidth}px` : expandedWidth)
+    : rootTheme.navigationWidth;
+
+  const contextValue: NavbarContextValue = useMemo(
+    () => ({
+      // Inherited from root
+      collapsed: rootState.collapsed,
+      toggle: rootState.toggle,
+      // Navbar-specific
+      navbarRef,
+      activeItem,
+      setActiveItem,
+      isHovered,
+      showInternalToggle: showToggle,
+      togglePosition,
+      labelMode,
+    }),
+    [
+      rootState.collapsed,
+      rootState.toggle,
+      activeItem,
+      isHovered,
+      showToggle,
+      togglePosition,
+      labelMode,
+    ]
+  );
+
+  // Determine if main toggle should be shown
+  const shouldShowMainToggle = showMainToggle && rootConfig.mode !== 'navigation';
+
+  return (
+    <NavbarContext.Provider value={contextValue}>
+      <nav
+        ref={navbarRef}
+        className={cn(
+          'relative',
+          'flex-shrink-0',
+          'flex',
+          'flex-col',
+          'h-full',
+          shouldExpand ? 'items-stretch' : 'items-center',
+          className
+        )}
+        style={{
+          position: 'relative', // Ensure relative positioning for absolute children (toggle)
+          backgroundColor: 'var(--color-card)',
+          borderRight: '1px solid var(--color-border)',
+          width: navbarWidth,
+          transitionProperty: 'width',
+          transitionDuration: `${rootTheme.animationDuration}ms`,
+          transitionTimingFunction: rootTheme.animationEasing,
+          ...style,
+        }}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        aria-label="Side navigation"
+        {...props}
+      >
+        {/* Top toggle position (internal) */}
+        {showToggle && togglePosition === 'top' && (
+          <div 
+            className="flex-shrink-0 p-2"
+            style={{ borderBottom: '1px solid var(--color-border)' }}
+          >
+            <NavbarToggle />
+          </div>
+        )}
+
+        {/* Navigation items - vertical layout */}
+        <div 
+          className={cn(
+            'relative', // Create new stacking context
+            'flex-1',
+            'flex',
+            'flex-col',
+            'overflow-y-auto',
+            'overflow-x-hidden',
+            'p-2', // Padding consistente de 0.5rem (8px)
+            'gap-2', // Gap consistente de 0.5rem (8px) entre itens
+            'w-full',
+            'min-w-0', // Prevent flex items from overflowing
+            shouldExpand ? 'items-stretch' : 'items-center',
+            'justify-start'
+          )}
+          style={{
+            zIndex: 1, // z-index: 1 to ensure content is above toggle
+          }}
+        >
+          {children}
+        </div>
+
+        {/* Bottom toggle position (internal) */}
+        {showToggle && togglePosition === 'bottom' && (
+          <div 
+            className="flex-shrink-0 p-2"
+            style={{ borderTop: '1px solid var(--color-border)' }}
+          >
+            <NavbarToggle />
+          </div>
+        )}
+      </nav>
+    </NavbarContext.Provider>
+  );
+}
+
+// Attach compound components
+Navbar.Toggle = NavbarToggle;
+Navbar.Item = NavbarItem;
+Navbar.Separator = NavbarSeparator;
+Navbar.Group = NavbarGroup;
+
+// Add displayName for easier identification in cloneElement
+Navbar.displayName = 'Navbar';
+
+export default Navbar;

package/src/ui/organisms/SideNavbar/components/Navbar/NavbarGroup.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import React, { useState, type HTMLAttributes } from 'react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { cn } from '../../../../utils';
+import type { NavbarGroupProps } from '../../types';
+
+/**
+ * NavbarGroup Component
+ *
+ * Groups navbar items with optional label and collapsible behavior.
+ *
+ * @example
+ * ```tsx
+ * <SideNavbar.Navbar>
+ *   <SideNavbar.Navbar.Group label="Main" collapsible>
+ *     <SideNavbar.Navbar.Item icon={<Home />} label="Home" />
+ *     <SideNavbar.Navbar.Item icon={<Settings />} label="Settings" />
+ *   </SideNavbar.Navbar.Group>
+ * </SideNavbar.Navbar>
+ * ```
+ */
+export function NavbarGroup({
+  id,
+  label,
+  collapsible = false,
+  defaultCollapsed = false,
+  children,
+  className,
+  ...props
+}: NavbarGroupProps) {
+  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+
+  return (
+    <div
+      id={id}
+      className={cn('flex flex-col', className)}
+      {...props}
+    >
+      {label && (
+        <div
+          className={cn(
+            'px-2 py-1.5 text-xs text-gray-500 uppercase tracking-wider', // py-1.5 para melhor espaçamento vertical
+            collapsible && 'cursor-pointer hover:text-gray-700'
+          )}
+          onClick={collapsible ? () => setIsCollapsed(!isCollapsed) : undefined}
+        >
+          <div className="flex items-center gap-1.5"> {/* gap-1.5 para melhor espaçamento entre chevron e label */}
+            {collapsible && (
+              <span className="shrink-0">
+                {isCollapsed ? (
+                  <ChevronRight className="w-3 h-3" style={{ transition: 'none', transform: 'none' }} />
+                ) : (
+                  <ChevronDown className="w-3 h-3" style={{ transition: 'none', transform: 'none' }} />
+                )}
+              </span>
+            )}
+            <span>{label}</span>
+          </div>
+        </div>
+      )}
+      {!isCollapsed && (
+        <div className="flex flex-col gap-2"> {/* gap-2 para consistência com outros componentes */}
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/ui/organisms/SideNavbar/components/Navbar/NavbarItem.tsx

@@ -0,0 +1,287 @@
+'use client';
+
+import React from 'react';
+import { useNavbarRequired } from '../../contexts/NavbarContext';
+import { cn } from '../../../../utils';
+import Tooltip from '../../../../atoms/Tooltip/Tooltip';
+import type { NavbarItemProps, NavbarLabelMode } from '../../types';
+
+/**
+ * Size configuration for navbar items
+ */
+const SIZE_CLASSES = {
+  sm: {
+    container: 'w-8 h-8',
+    icon: 'w-4 h-4',
+    badge: 'min-w-[14px] h-[14px] text-[10px]',
+  },
+  md: {
+    container: 'w-10 h-10',
+    icon: 'w-5 h-5',
+    badge: 'min-w-[18px] h-[18px] text-xs',
+  },
+  lg: {
+    container: 'w-12 h-12',
+    icon: 'w-6 h-6',
+    badge: 'min-w-[20px] h-[20px] text-xs',
+  },
+} as const;
+
+/**
+ * Badge variant colors
+ */
+const BADGE_VARIANTS = {
+  default: 'bg-red-500',
+  success: 'bg-green-500',
+  warning: 'bg-amber-500',
+  danger: 'bg-red-600',
+} as const;
+
+/**
+ * Navigation item for the Navbar subcomponent
+ *
+ * Displays an icon button with optional tooltip, badge, and active state.
+ * Supports multiple sizes, variants, and can render as a link when href is provided.
+ *
+ * @example
+ * ```tsx
+ * // Basic button
+ * <SideNavbar.Navbar.Item
+ *   icon={<Home />}
+ *   label="Home"
+ *   onClick={() => navigate('/')}
+ * />
+ *
+ * // As a link
+ * <SideNavbar.Navbar.Item
+ *   icon={<Docs />}
+ *   label="Documentation"
+ *   href="/docs"
+ * />
+ *
+ * // With badge
+ * <SideNavbar.Navbar.Item
+ *   icon={<Bell />}
+ *   label="Notifications"
+ *   badge={5}
+ *   badgeVariant="danger"
+ * />
+ * ```
+ */
+const LABEL_STYLES: Record<NavbarLabelMode, string> = {
+  tooltip: '', // Uses existing tooltip behavior
+  inline: 'flex-row gap-2 w-full px-3',
+  below: 'flex-col gap-1.5', // Aumentado de gap-1 para gap-1.5 para melhor espaçamento
+};
+
+export default function NavbarItem({
+  id,
+  icon,
+  label,
+  labelMode,
+  showLabel = true,
+  active = false,
+  showTooltip = true,
+  badge,
+  badgeVariant = 'default',
+  variant = 'default',
+  size = 'md',
+  href,
+  target,
+  onClick,
+  disabled = false,
+  className = '',
+  ...props
+}: NavbarItemProps) {
+  const { activeItem, setActiveItem, labelMode: contextLabelMode } = useNavbarRequired();
+  
+  // Use prop labelMode or fallback to context labelMode or 'tooltip'
+  const effectiveLabelMode = labelMode ?? contextLabelMode ?? 'tooltip';
+
+  const isActive = active || (id && activeItem === id);
+  const sizeConfig = SIZE_CLASSES[size];
+
+  const handleClick = (e: React.MouseEvent) => {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+    if (id) {
+      setActiveItem(id);
+    }
+    onClick?.();
+  };
+
+  // Label element (for inline and below modes)
+  const labelElement = effectiveLabelMode !== 'tooltip' && showLabel && label && (
+    <span 
+      className={cn(
+        'text-xs',
+        'flex-shrink-0', // Prevenir que label encolha
+        'relative z-10', // Garantir que label fique na frente do ícone
+        effectiveLabelMode === 'below' && 'text-center',
+        effectiveLabelMode === 'inline' && 'truncate'
+      )}
+      style={{
+        // Garantir que label não seja afetada por transformações
+        willChange: 'auto',
+        transform: 'none',
+        zIndex: 10, // Garantir que label fique na frente do ícone
+      }}
+    >
+      {label}
+    </span>
+  );
+
+  // Base classes for the item
+  // Removido transition-colors e duration-150 para eliminar animações
+  // Adicionado box-border para estabilidade dimensional
+  const baseClasses = cn(
+    'relative',
+    'flex',
+    'items-center',
+    effectiveLabelMode === 'inline' ? 'justify-start' : 'justify-center',
+    effectiveLabelMode === 'below' && 'flex-col',
+    'rounded-lg',
+    'box-border', // Garantir box-sizing consistente
+    'focus:outline-none',
+    'focus:ring-2',
+    'focus:ring-[var(--color-primary-500)]',
+    'focus:ring-offset-1',
+    'w-full', // Ensure full width for vertical layout
+    'flex-shrink-0', // Prevent items from shrinking
+    'min-w-0', // Prevent flex items from overflowing
+    // Remover todas as transições que possam causar movimento
+    '[&>*]:!transition-none',
+    '[&>*]:!transform-none',
+    effectiveLabelMode === 'tooltip' ? sizeConfig.container : 'px-2 py-1.5',
+    effectiveLabelMode !== 'tooltip' && LABEL_STYLES[effectiveLabelMode],
+    disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
+    className
+  );
+
+  // Variant-specific classes usando variáveis CSS via Tailwind arbitrary values
+  // Estados hover/active sem transições para evitar movimento
+  const variantClasses = {
+    default: isActive
+      ? 'bg-[var(--color-primary-100)] text-[var(--color-primary-600)]'
+      : disabled
+        ? 'text-[var(--color-neutral-400)]'
+        : 'text-[var(--color-neutral-600)] hover:bg-[var(--color-neutral-100)] hover:text-[var(--color-neutral-900)] [&:hover]:!transform-none',
+    ghost: isActive
+      ? 'text-[var(--color-primary-600)]'
+      : disabled
+        ? 'text-[var(--color-neutral-400)]'
+        : 'text-[var(--color-neutral-600)] hover:text-[var(--color-neutral-900)] [&:hover]:!transform-none',
+    subtle: isActive
+      ? 'bg-[var(--color-neutral-100)] text-[var(--color-neutral-900)]'
+      : disabled
+        ? 'text-[var(--color-neutral-400)]'
+        : 'text-[var(--color-neutral-500)] hover:bg-[var(--color-neutral-50)] hover:text-[var(--color-neutral-700)] [&:hover]:!transform-none',
+  };
+
+  const content = (
+    <>
+      {/* Wrapper do ícone - sem animações, com estabilidade dimensional */}
+      <span 
+        className={cn(
+          'flex-shrink-0',
+          sizeConfig.icon,
+          '[&>svg]:transition-none',
+          '[&>svg]:!transform-none',
+          '[&>svg]:!will-change-auto',
+          'box-border',
+          'flex items-center justify-center',
+          // Garantir que ícone não sobreponha label - z-index menor que label
+          effectiveLabelMode === 'tooltip' ? 'relative z-0' : 'relative z-0'
+        )}
+        style={{
+          // Garantir dimensões mínimas fixas para evitar "pular"
+          minWidth: sizeConfig.icon === 'w-4 h-4' ? '1rem' : sizeConfig.icon === 'w-5 h-5' ? '1.25rem' : '1.5rem',
+          minHeight: sizeConfig.icon === 'w-4 h-4' ? '1rem' : sizeConfig.icon === 'w-5 h-5' ? '1.25rem' : '1.5rem',
+          // Forçar sem animações ou transformações
+          willChange: 'auto',
+          transform: 'none',
+          transition: 'none',
+          // Garantir que ícone fique atrás do label quando ambos estão visíveis
+          zIndex: effectiveLabelMode !== 'tooltip' ? 0 : 'auto',
+        }}
+      >
+        {icon}
+      </span>
+      
+      {/* Label (for inline and below modes) - posicionada após o ícone */}
+      {labelElement}
+
+      {/* Badge */}
+      {badge !== undefined && badge !== null && (
+        <span
+          className={cn(
+            'absolute',
+            '-top-1',
+            '-right-1',
+            'flex',
+            'items-center',
+            'justify-center',
+            'px-1',
+            'font-medium',
+            'text-white',
+            'rounded-full',
+            sizeConfig.badge,
+            BADGE_VARIANTS[badgeVariant]
+          )}
+        >
+          {badge}
+        </span>
+      )}
+    </>
+  );
+
+  // Render as link if href is provided
+  // Adicionar style inline para garantir que não há transformações em hover
+  const elementStyle = {
+    willChange: 'auto',
+    transform: 'none',
+    transition: 'none',
+  };
+
+  const element = href ? (
+    <a
+      href={href}
+      target={target}
+      rel={target === '_blank' ? 'noopener noreferrer' : undefined}
+      onClick={handleClick}
+      className={cn(baseClasses, variantClasses[variant])}
+      style={elementStyle}
+      aria-label={label}
+      aria-current={isActive ? 'page' : undefined}
+      aria-disabled={disabled}
+    >
+      {content}
+    </a>
+  ) : (
+    <button
+      type="button"
+      onClick={handleClick}
+      disabled={disabled}
+      className={cn(baseClasses, variantClasses[variant])}
+      style={elementStyle}
+      aria-label={label}
+      aria-current={isActive ? 'page' : undefined}
+      {...props}
+    >
+      {content}
+    </button>
+  );
+
+  // Wrap with tooltip only if mode is 'tooltip'
+  if (effectiveLabelMode === 'tooltip' && showTooltip && label && !disabled) {
+    return (
+      <Tooltip content={label} position="right">
+        {element}
+      </Tooltip>
+    );
+  }
+
+  return element;
+}

package/src/ui/organisms/SideNavbar/components/Navbar/NavbarSeparator.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import React from 'react';
+import { cn } from '../../../../utils';
+import type { NavbarSeparatorProps } from '../../types';
+
+/**
+ * Separator for the Navbar subcomponent
+ *
+ * Creates visual separation between groups of navigation items.
+ *
+ * @example
+ * ```tsx
+ * <SideNavbar.Navbar>
+ *   <SideNavbar.Navbar.Item icon={<Home />} label="Home" />
+ *   <SideNavbar.Navbar.Separator />
+ *   <SideNavbar.Navbar.Item icon={<Settings />} label="Settings" />
+ * </SideNavbar.Navbar>
+ * ```
+ */
+export default function NavbarSeparator({
+  orientation = 'horizontal',
+  className = '',
+  ...props
+}: NavbarSeparatorProps) {
+  if (orientation === 'vertical') {
+    return (
+      <div
+        className={cn(
+          'w-px',
+          'h-6',
+          'bg-[var(--color-border)]',
+          'mx-auto',
+          className
+        )}
+        role="separator"
+        aria-orientation="vertical"
+        {...props}
+      />
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'w-full',
+        'h-px',
+        'bg-[var(--color-border)]',
+        'my-2', // my-2 (8px) para consistência com gap-2 usado em outros lugares
+        'flex-shrink-0', // Prevenir que separator encolha
+        className
+      )}
+      role="separator"
+      aria-orientation="horizontal"
+      style={{
+        // Garantir que separator não seja afetado por transformações
+        willChange: 'auto',
+        transform: 'none',
+      }}
+      {...props}
+    />
+  );
+}

package/src/ui/organisms/SideNavbar/components/Navbar/NavbarToggle.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useNavbarRequired } from '../../contexts/NavbarContext';
+import Tooltip from '../../../../atoms/Tooltip/Tooltip';
+import type { NavbarToggleProps } from '../../types';
+
+/**
+ * Toggle button for the Navbar subcomponent
+ *
+ * Uses the NavbarContext to control the sidebar collapse state.
+ * Can be customized with different icons, sizes, and variants.
+ *
+ * @example
+ * ```tsx
+ * <SideNavbar.Navbar.Toggle
+ *   variant="ghost"
+ *   icon={(collapsed) => collapsed ? <ChevronRight /> : <ChevronLeft />}
+ * />
+ * ```
+ */
+export default function NavbarToggle({
+  icon,
+  size = 'sm',
+  variant = 'ghost',
+  className = '',
+  ...props
+}: NavbarToggleProps) {
+  const { collapsed, toggle } = useNavbarRequired();
+
+  // Render the icon
+  const renderIcon = () => {
+    if (icon) {
+      return typeof icon === 'function' ? icon(collapsed) : icon;
+    }
+    const Icon = collapsed ? ChevronRight : ChevronLeft;
+    return (
+      <Icon 
+        className={iconSizeClasses[size]} 
+        style={{
+          transition: 'none',
+          transform: 'none',
+          willChange: 'auto',
+        }}
+      />
+    );
+  };
+
+  const sizeClasses = {
+    xs: 'w-6 h-6',
+    sm: 'w-8 h-8',
+    md: 'w-10 h-10',
+  };
+
+  const iconSizeClasses = {
+    xs: 'w-3 h-3',
+    sm: 'w-4 h-4',
+    md: 'w-5 h-5',
+  };
+
+  const variantClasses = {
+    default: 'bg-white border border-gray-200 shadow-sm hover:bg-gray-50',
+    ghost: 'hover:bg-gray-100',
+    outline: 'border border-gray-300 hover:bg-gray-50',
+  };
+
+  return (
+    <Tooltip
+      content={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+      position="right"
+    >
+      <button
+        type="button"
+        onClick={toggle}
+        className={`
+          flex
+          items-center
+          justify-center
+          rounded-md
+          text-gray-600
+          hover:text-gray-900
+          focus:outline-none
+          focus:ring-2
+          focus:ring-indigo-500
+          focus:ring-offset-1
+          ${sizeClasses[size]}
+          ${variantClasses[variant]}
+          [&:hover]:!transform-none
+          ${className}
+        `}
+        style={{
+          // Remover transições que possam causar movimento
+          willChange: 'auto',
+          transform: 'none',
+          transition: 'none',
+        }}
+        aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+        aria-expanded={!collapsed}
+        {...props}
+      >
+        {renderIcon()}
+      </button>
+    </Tooltip>
+  );
+}

package/src/ui/organisms/SideNavbar/components/Navbar/index.ts

@@ -0,0 +1,5 @@
+export { default as Navbar } from './Navbar';
+export { default as NavbarToggle } from './NavbarToggle';
+export { default as NavbarItem } from './NavbarItem';
+export { default as NavbarSeparator } from './NavbarSeparator';
+export { NavbarGroup } from './NavbarGroup';