@hellboy/ds 0.1.2 → 0.2.7

package/src/components/navbar/MenuGroup.tsx

@@ -1,288 +0,0 @@
-import * as React from "react";
-import { Icon } from "../icons";
-import { Popover } from "../popover";
-import { Tooltip } from "../tooltip";
-import { Button } from "../button";
-import { useNavbarTooltip } from "../../contexts/NavbarTooltipContext";
-
-export interface MenuGroupProps {
-  title: string;
-  icon?: string;
-  children: React.ReactNode;
-  defaultExpanded?: boolean;
-  autoExpand?: boolean;
-  expandable?: boolean;
-  isCollapsed?: boolean; // Nova prop para saber se o navbar está colapsado
-}
-
-export const MenuGroup: React.FC<MenuGroupProps> = ({
-  title,
-  icon,
-  children,
-  defaultExpanded = false,
-  autoExpand = false,
-  expandable = true,
-  isCollapsed = false
-}) => {
-  const [expanded, setExpanded] = React.useState(defaultExpanded);
-  const [userInteracted, setUserInteracted] = React.useState(false);
-  const { openPopover, closePopover, activePopoverId } = useNavbarTooltip();
-
-  // Gerar um ID único para este grupo
-  const groupId = React.useMemo(() => `menu-group-${title.replace(/\s+/g, '-').toLowerCase()}`, [title]);
-
-  // Estado local do popover baseado no contexto global
-  const popoverOpen = activePopoverId === groupId;
-
-  // Refs para gerenciar foco
-  const triggerRef = React.useRef<HTMLButtonElement>(null);
-  const popoverContentRef = React.useRef<HTMLDivElement>(null);
-
-  // Efeito para focar o primeiro filho quando o popover abre
-  React.useEffect(() => {
-    if (popoverOpen && popoverContentRef.current) {
-      // Pequeno delay para garantir que o popover foi renderizado
-      setTimeout(() => {
-        const firstFocusable = popoverContentRef.current?.querySelector(
-          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-        ) as HTMLElement;
-        firstFocusable?.focus();
-      }, 10);
-    }
-  }, [popoverOpen]);
-
-  // Função para encontrar o próximo elemento focável na raiz do navbar
-  const findNextFocusableElement = React.useCallback((currentElement: HTMLElement): HTMLElement | null => {
-    const navbar = currentElement.closest('.navbar');
-    if (!navbar) return null;
-
-    // Exclui elementos que estão dentro de popovers/popups
-    const focusableElements = navbar.querySelectorAll(
-      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-    );
-    
-    // Filtra elementos que não estão dentro de popover
-    const rootFocusableElements = Array.from(focusableElements).filter(el => {
-      return !el.closest('.popover');
-    });
-
-    const currentIndex = rootFocusableElements.indexOf(currentElement);
-    
-    if (currentIndex >= 0 && currentIndex < rootFocusableElements.length - 1) {
-      return rootFocusableElements[currentIndex + 1] as HTMLElement;
-    }
-    
-    return null;
-  }, []);
-
-  // Handler para navegação por tab
-  const handleKeyDown = React.useCallback((event: React.KeyboardEvent) => {
-    if (event.key === 'Tab' && !event.shiftKey) {
-      // Tab para frente
-      if (popoverContentRef.current) {
-        const focusableElements = popoverContentRef.current.querySelectorAll(
-          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-        );
-        const currentElement = event.target as HTMLElement;
-        const currentIndex = Array.from(focusableElements).indexOf(currentElement);
-        
-        if (currentIndex >= 0 && currentIndex === focusableElements.length - 1) {
-          // Estamos no último elemento focável do popover
-          event.preventDefault();
-          const nextElement = findNextFocusableElement(currentElement);
-          if (nextElement) {
-            nextElement.focus();
-          } else {
-            // Se não há próximo elemento, fecha o popover e volta para o trigger
-            closePopover(groupId);
-            triggerRef.current?.focus();
-          }
-        }
-      }
-    } else if (event.key === 'Tab' && event.shiftKey) {
-      // Shift+Tab para trás
-      if (popoverContentRef.current) {
-        const focusableElements = popoverContentRef.current.querySelectorAll(
-          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-        );
-        const currentElement = event.target as HTMLElement;
-        const currentIndex = Array.from(focusableElements).indexOf(currentElement);
-        
-        if (currentIndex === 0) {
-          // Estamos no primeiro elemento focável do popover, volta para o trigger
-          event.preventDefault();
-          triggerRef.current?.focus();
-        }
-      }
-    } else if (event.key === 'Escape') {
-      // Escape fecha o popover e retorna foco para o trigger
-      closePopover(groupId);
-      // Pequeno delay para garantir que o popover fechou antes de focar
-      setTimeout(() => {
-        triggerRef.current?.focus();
-      }, 10);
-    }
-  }, [closePopover, groupId, findNextFocusableElement]);
-
-  // Função para detectar se há itens ativos dentro do grupo
-  const hasActiveItem = React.useMemo(() => {
-    const checkForActiveItems = (children: React.ReactNode): boolean => {
-      return React.Children.toArray(children).some((child) => {
-        if (React.isValidElement(child)) {
-          if (child.props && child.props.active === true) {
-            return true;
-          }
-          if (child.props && child.props.children) {
-            return checkForActiveItems(child.props.children);
-          }
-        }
-        return false;
-      });
-    };
-
-    return checkForActiveItems(children);
-  }, [children]);
-
-  // Efeito para expansão automática quando há itens ativos
-  React.useEffect(() => {
-    if (autoExpand && hasActiveItem && !userInteracted) {
-      setExpanded(true);
-    }
-  }, [autoExpand, hasActiveItem, userInteracted]);
-
-  const toggleExpanded = () => {
-    setUserInteracted(true);
-    setExpanded(!expanded);
-  };
-
-  // Conteúdo do popover quando colapsado
-  const popoverContent = (
-    <div className="navbar__menu-group-popover">
-      <div className="navbar__menu-group-popover-title">{title}</div>
-      <div 
-        className="navbar__menu-group-popover-content" 
-        ref={popoverContentRef}
-        onKeyDown={handleKeyDown}
-        onClick={() => {
-          // Fecha o popover quando qualquer item filho é clicado
-          // Pequeno delay para garantir que a ação do item seja executada primeiro
-          setTimeout(() => {
-            closePopover(groupId);
-          }, 0);
-        }}
-      >
-        {React.Children.map(children, (child) => {
-          if (React.isValidElement(child)) {
-            return React.cloneElement(child, {
-              onKeyDown: (e: React.KeyboardEvent) => {
-                // Chama o onKeyDown original se existir
-                child.props.onKeyDown?.(e);
-                // E depois o nosso handler
-                handleKeyDown(e);
-              }
-            });
-          }
-          return child;
-        })}
-      </div>
-    </div>
-  );
-
-  // Comportamento quando expandido: clique expande/collapsa
-  const expandedHeader = !expandable ? (
-    <div className="navbar__menu-group-header navbar__menu-group-header--static">
-      {icon && (
-        <span className="navbar__menu-group-icon">
-          <Icon name={icon as any} size={16} />
-        </span>
-      )}
-      <span className="navbar__menu-group-title">{title}</span>
-    </div>
-  ) : (
-    <button
-      className={`navbar__menu-group-header ${!expanded && hasActiveItem ? 'navbar__menu-group-header--active' : ''}`}
-      onClick={toggleExpanded}
-      aria-expanded={expanded}
-      aria-controls={`menu-group-${title.replace(/\s+/g, '-').toLowerCase()}`}
-      type="button"
-    >
-      {icon && (
-        <span className="navbar__menu-group-icon">
-          <Icon name={icon as any} size={16} />
-        </span>
-      )}
-      <span className="navbar__menu-group-title">{title}</span>
-      <span className={`navbar__menu-group-chevron ${expanded ? 'navbar__menu-group-chevron--expanded' : ''}`}>
-        <Icon name="chevron-down" size={12} />
-      </span>
-    </button>
-  );
-
-  // Comportamento quando colapsado: clique abre popover
-  const collapsedHeader = (
-    <div>
-      <Popover
-        trigger={
-          <Tooltip content={title} placement="right" disabled={popoverOpen}>
-            <Button
-              ref={triggerRef}
-              variant={popoverOpen ? "secondary" : hasActiveItem ? "primary" : "ghost"}
-              iconOnly={true}
-              startIcon={icon as any}
-              aria-label={title}
-              aria-haspopup="menu"
-              aria-expanded={popoverOpen}
-              onKeyDown={(event: React.KeyboardEvent) => {
-                if (event.key === 'Tab' && !event.shiftKey && popoverOpen) {
-                  // Se o popover está aberto e estamos no trigger, Tab vai para o primeiro filho
-                  event.preventDefault();
-                  const firstFocusable = popoverContentRef.current?.querySelector(
-                    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-                  ) as HTMLElement;
-                  firstFocusable?.focus();
-                }
-              }}
-              onClick={() => {
-                if (popoverOpen) {
-                  closePopover(groupId);
-                } else {
-                  openPopover(groupId);
-                }
-              }}
-            />
-          </Tooltip>
-        }
-        isOpen={popoverOpen}
-        onToggle={() => {
-          if (popoverOpen) {
-            closePopover(groupId);
-          } else {
-            openPopover(groupId);
-          }
-        }}
-        placement="right"
-      >
-        {popoverContent}
-      </Popover>
-    </div>
-  );
-
-  return (
-    <div className="navbar__menu-group">
-      {/* Header - comportamento depende se está colapsado ou não */}
-      {isCollapsed ? collapsedHeader : expandedHeader}
-
-      {/* Conteúdo (só visível quando expandido e navbar expandido) */}
-      {!isCollapsed && (
-        <div
-          className="navbar__menu-group-content"
-          id={`menu-group-${title.replace(/\s+/g, '-').toLowerCase()}`}
-          aria-hidden={!expandable || !expanded}
-          style={{ display: expandable ? (expanded ? 'block' : 'none') : 'block' }}
-        >
-          {children}
-        </div>
-      )}
-    </div>
-  );
-};

package/src/components/navbar/MenuItem.tsx

@@ -1,65 +0,0 @@
-import * as React from "react";
-import { Icon } from "../icons";
-import { Tooltip } from "../tooltip";
-import { Button } from "../button";
-import { useNavbarTooltip } from "../../contexts/NavbarTooltipContext";
-
-export interface MenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  icon?: string;
-  active?: boolean;
-  children: React.ReactNode;
-  as?: React.ElementType<any>;
-  isCollapsed?: boolean;
-  showTooltipWhenCollapsed?: boolean;
-  [key: string]: any;
-}
-
-export const MenuItem: React.FC<MenuItemProps> = ({
-  icon,
-  active = false,
-  children,
-  className = "",
-  as: Component = "button",
-  isCollapsed = false,
-  showTooltipWhenCollapsed = false,
-  ...props
-}) => {
-  const { hasOpenPopover } = useNavbarTooltip();
-  const classes = [
-    "navbar__menu-item",
-    active && "navbar__menu-item--active",
-    className
-  ].filter(Boolean).join(" ");
-
-  const menuItem = isCollapsed ? (
-    <Button 
-      variant={active ? "primary" : "ghost"}
-      iconOnly={true}
-      startIcon={icon as any}
-      {...props}
-    />
-  ) : (
-    <Component 
-      className={classes} 
-      type={Component === "button" ? "button" : undefined}
-      {...props}
-    >
-      {icon && (
-        <span className="navbar__menu-item-icon">
-          <Icon name={icon as any} size={16} />
-        </span>
-      )}
-      {!isCollapsed && <span className="navbar__menu-item-label">{children}</span>}
-    </Component>
-  );
-
-  if (showTooltipWhenCollapsed && isCollapsed) {
-    return (
-      <Tooltip content={typeof children === 'string' ? children : ''} placement="right" disabled={hasOpenPopover}>
-        {menuItem}
-      </Tooltip>
-    );
-  }
-
-  return menuItem;
-};

package/src/components/navbar/Navbar.tsx

@@ -1,23 +0,0 @@
-import * as React from "react";
-
-export interface NavbarProps {
-  children: React.ReactNode;
-  className?: string;
-  /** Default width (px) the navbar should assume when expanded and no user preference exists */
-  defaultExpandedWidth?: number;
-}
-
-export const Navbar: React.FC<NavbarProps> = ({
-  children,
-  className = ""
-}) => {
-  const classes = ["navbar", className].filter(Boolean).join(" ");
-
-  return (
-    <nav className={classes} role="navigation" aria-label="Main navigation">
-      <div className="navbar__content">
-        {children}
-      </div>
-    </nav>
-  );
-};

package/src/components/navbar/index.ts

@@ -1,4 +0,0 @@
-export * from "./Navbar";
-export * from "./MenuItem";
-export * from "./MenuGroup";
-export * from "./MenuCategory";

package/src/components/page/index.ts

@@ -1 +0,0 @@
-export { Page, type PageProps, type PageWidth } from './page';

package/src/components/page/page.tsx

@@ -1,46 +0,0 @@
-import React, { ReactNode } from 'react';
-
-export type PageWidth = 'full' | 'wide' | 'medium' | 'narrow';
-
-export interface PageProps {
-  /**
-   * Page content width
-   * - full: 100% width
-   * - wide: 1400px max
-   * - medium: 1200px max (default)
-   * - narrow: 800px max
-   * @default 'medium'
-   */
-  width?: PageWidth;
-
-  /**
-   * Page content
-   */
-  children: ReactNode;
-
-  /**
-   * Custom class name
-   */
-  className?: string;
-}
-
-/**
- * Page Component
- * Main content container with responsive width control
- * Use inside Layout's children for consistent content sizing
- */
-export const Page: React.FC<PageProps> = ({ width = 'medium', children, className }) => {
-  const pageClasses = [
-    'page',
-    `page--${width}`,
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  return (
-    <main className={pageClasses}>
-      {children}
-    </main>
-  );
-};