@archbase/components 3.0.25 → 4.0.1

package/src/navigation/ArchbaseBottomNavigation.tsx

@@ -0,0 +1,243 @@
+import React, { forwardRef, useCallback, useState, ReactNode } from 'react';
+import {
+  Box,
+  Text,
+  Badge,
+  MantineColor,
+  MantineSize,
+} from '@mantine/core';
+
+export interface ArchbaseBottomNavigationItem {
+  /** Chave única */
+  key: string;
+  /** Label do item */
+  label: string;
+  /** Ícone */
+  icon: ReactNode;
+  /** Ícone quando ativo */
+  activeIcon?: ReactNode;
+  /** Badge */
+  badge?: number | string;
+  /** Cor do badge */
+  badgeColor?: MantineColor;
+  /** Se está desabilitado */
+  disabled?: boolean;
+  /** Link (navegação) */
+  href?: string;
+  /** Callback ao clicar */
+  onClick?: () => void;
+}
+
+export interface ArchbaseBottomNavigationProps {
+  /** Itens da navegação */
+  items: ArchbaseBottomNavigationItem[];
+  /** Item ativo (controlado) */
+  value?: string;
+  /** Item ativo padrão */
+  defaultValue?: string;
+  /** Callback ao mudar */
+  onChange?: (value: string) => void;
+  /** Altura da barra */
+  height?: number;
+  /** Cor de destaque */
+  activeColor?: MantineColor;
+  /** Cor inativa */
+  inactiveColor?: MantineColor;
+  /** Tamanho do ícone */
+  iconSize?: number;
+  /** Tamanho do texto */
+  labelSize?: MantineSize;
+  /** Se deve mostrar labels */
+  showLabels?: boolean;
+  /** Se deve mostrar labels apenas no ativo */
+  showActiveLabel?: boolean;
+  /** Se deve ter sombra */
+  withShadow?: boolean;
+  /** Se deve ter borda superior */
+  withBorder?: boolean;
+  /** Cor de fundo */
+  backgroundColor?: string;
+  /** Se está fixo na parte inferior */
+  fixed?: boolean;
+  /** Z-index quando fixo */
+  zIndex?: number;
+  /** Classe CSS */
+  className?: string;
+  /** Estilo */
+  style?: React.CSSProperties;
+}
+
+export const ArchbaseBottomNavigation = forwardRef<HTMLDivElement, ArchbaseBottomNavigationProps>(
+  (
+    {
+      items,
+      value: controlledValue,
+      defaultValue,
+      onChange,
+      height = 64,
+      activeColor = 'blue',
+      inactiveColor = 'gray',
+      iconSize = 24,
+      labelSize = 'xs',
+      showLabels = true,
+      showActiveLabel = false,
+      withShadow = true,
+      withBorder = true,
+      backgroundColor = 'var(--mantine-color-body)',
+      fixed = true,
+      zIndex = 100,
+      className,
+      style,
+    },
+    ref
+  ) => {
+    const [internalValue, setInternalValue] = useState(defaultValue || items[0]?.key);
+
+    const currentValue = controlledValue !== undefined ? controlledValue : internalValue;
+
+    const handleItemClick = useCallback(
+      (item: ArchbaseBottomNavigationItem) => {
+        if (item.disabled) return;
+
+        if (controlledValue === undefined) {
+          setInternalValue(item.key);
+        }
+        onChange?.(item.key);
+        item.onClick?.();
+      },
+      [controlledValue, onChange]
+    );
+
+    return (
+      <Box
+        ref={ref}
+        className={className}
+        style={{
+          ...style,
+          position: fixed ? 'fixed' : 'relative',
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height,
+          backgroundColor,
+          borderTop: withBorder ? '1px solid var(--mantine-color-gray-3)' : undefined,
+          boxShadow: withShadow ? '0 -2px 10px rgba(0, 0, 0, 0.1)' : undefined,
+          zIndex: fixed ? zIndex : undefined,
+          paddingBottom: 'env(safe-area-inset-bottom, 0px)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-around',
+        }}
+      >
+        {items.map((item) => {
+          const isActive = currentValue === item.key;
+          const shouldShowLabel = showLabels || (showActiveLabel && isActive);
+          const color = isActive ? activeColor : inactiveColor;
+          const icon = isActive && item.activeIcon ? item.activeIcon : item.icon;
+
+          const content = (
+            <Box
+              key={item.key}
+              onClick={() => handleItemClick(item)}
+              style={{
+                flex: 1,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '100%',
+                cursor: item.disabled ? 'not-allowed' : 'pointer',
+                opacity: item.disabled ? 0.5 : 1,
+                transition: 'all 0.2s ease',
+                position: 'relative',
+              }}
+            >
+              {/* Badge */}
+              {item.badge !== undefined && (
+                <Badge
+                  color={item.badgeColor || 'red'}
+                  size="xs"
+                  variant="filled"
+                  style={{
+                    position: 'absolute',
+                    top: 4,
+                    right: '50%',
+                    transform: 'translateX(calc(50% + 12px))',
+                    minWidth: 18,
+                    height: 18,
+                    padding: '0 4px',
+                  }}
+                >
+                  {typeof item.badge === 'number' && item.badge > 99 ? '99+' : item.badge}
+                </Badge>
+              )}
+
+              {/* Icon */}
+              <Box
+                style={{
+                  color: `var(--mantine-color-${color}-6)`,
+                  transition: 'transform 0.2s ease, color 0.2s ease',
+                  transform: isActive ? 'scale(1.1)' : 'scale(1)',
+                }}
+              >
+                {React.isValidElement(icon) ? React.cloneElement(icon, { size: iconSize } as Record<string, unknown>) : icon}
+              </Box>
+
+              {/* Label */}
+              {shouldShowLabel && (
+                <Text
+                  size={labelSize}
+                  c={`${color}.6`}
+                  mt={2}
+                  fw={isActive ? 600 : 400}
+                  style={{
+                    transition: 'color 0.2s ease',
+                  }}
+                >
+                  {item.label}
+                </Text>
+              )}
+
+              {/* Active indicator */}
+              {isActive && (
+                <Box
+                  style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                    width: 32,
+                    height: 3,
+                    backgroundColor: `var(--mantine-color-${activeColor}-6)`,
+                    borderRadius: '0 0 4px 4px',
+                  }}
+                />
+              )}
+            </Box>
+          );
+
+          // Se tem href, renderiza como link
+          if (item.href) {
+            return (
+              <Box
+                key={item.key}
+                component="a"
+                href={item.href}
+                style={{
+                  flex: 1,
+                  textDecoration: 'none',
+                }}
+              >
+                {content}
+              </Box>
+            );
+          }
+
+          return content;
+        })}
+      </Box>
+    );
+  }
+);
+
+ArchbaseBottomNavigation.displayName = 'ArchbaseBottomNavigation';

package/src/navigation/ArchbaseContextMenu.tsx

@@ -0,0 +1,298 @@
+import React, { forwardRef, useCallback, useState, ReactNode, MouseEvent as ReactMouseEvent } from 'react';
+import {
+  Menu,
+  MenuProps,
+  Box,
+  Text,
+  Divider,
+  MantineColor,
+  MantineSize,
+  Kbd,
+} from '@mantine/core';
+import { IconChevronRight } from '@tabler/icons-react';
+
+export interface ArchbaseContextMenuItem {
+  /** Chave única do item */
+  key: string;
+  /** Tipo do item */
+  type?: 'item' | 'divider' | 'label';
+  /** Label do item */
+  label?: string;
+  /** Ícone do item */
+  icon?: ReactNode;
+  /** Ícone à direita */
+  rightSection?: ReactNode;
+  /** Atalho de teclado */
+  shortcut?: string;
+  /** Cor do item */
+  color?: MantineColor;
+  /** Se está desabilitado */
+  disabled?: boolean;
+  /** Callback ao clicar */
+  onClick?: () => void;
+  /** Subitems (submenu) */
+  children?: ArchbaseContextMenuItem[];
+}
+
+export interface ArchbaseContextMenuProps {
+  /** Itens do menu */
+  items: ArchbaseContextMenuItem[];
+  /** Elemento alvo (elemento que abre o menu ao clicar com botão direito) */
+  children: ReactNode;
+  /** Se está desabilitado */
+  disabled?: boolean;
+  /** Tamanho do menu */
+  size?: MantineSize;
+  /** Largura do menu */
+  width?: number | string;
+  /** Se deve mostrar sombra */
+  shadow?: MantineSize;
+  /** Raio das bordas */
+  radius?: MantineSize;
+  /** Offset do menu */
+  offset?: number;
+  /** Classe CSS do menu */
+  menuClassName?: string;
+  /** Estilo do menu */
+  menuStyle?: React.CSSProperties;
+  /** Callback ao abrir */
+  onOpen?: () => void;
+  /** Callback ao fechar */
+  onClose?: () => void;
+  /** Classe CSS */
+  className?: string;
+  /** Estilo */
+  style?: React.CSSProperties;
+}
+
+const ContextMenuItemComponent: React.FC<{
+  item: ArchbaseContextMenuItem;
+  onClose: () => void;
+}> = ({ item, onClose }) => {
+  if (item.type === 'divider') {
+    return <Menu.Divider />;
+  }
+
+  if (item.type === 'label') {
+    return <Menu.Label>{item.label}</Menu.Label>;
+  }
+
+  // Se tem filhos, é um submenu
+  if (item.children && item.children.length > 0) {
+    return (
+      <Menu.Item
+        disabled={item.disabled}
+        color={item.color}
+        leftSection={item.icon}
+        rightSection={<IconChevronRight size={14} />}
+      >
+        <Menu trigger="hover" position="right-start" offset={5}>
+          <Menu.Target>
+            <Text size="sm">{item.label}</Text>
+          </Menu.Target>
+          <Menu.Dropdown>
+            {item.children.map((child) => (
+              <ContextMenuItemComponent key={child.key} item={child} onClose={onClose} />
+            ))}
+          </Menu.Dropdown>
+        </Menu>
+      </Menu.Item>
+    );
+  }
+
+  return (
+    <Menu.Item
+      disabled={item.disabled}
+      color={item.color}
+      leftSection={item.icon}
+      rightSection={
+        item.shortcut ? (
+          <Kbd size="xs">{item.shortcut}</Kbd>
+        ) : (
+          item.rightSection
+        )
+      }
+      onClick={() => {
+        item.onClick?.();
+        onClose();
+      }}
+    >
+      {item.label}
+    </Menu.Item>
+  );
+};
+
+export const ArchbaseContextMenu = forwardRef<HTMLDivElement, ArchbaseContextMenuProps>(
+  (
+    {
+      items,
+      children,
+      disabled = false,
+      size,
+      width = 200,
+      shadow = 'md',
+      radius = 'sm',
+      offset = 5,
+      menuClassName,
+      menuStyle,
+      onOpen,
+      onClose,
+      className,
+      style,
+    },
+    ref
+  ) => {
+    const [opened, setOpened] = useState(false);
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+
+    const handleContextMenu = useCallback(
+      (event: ReactMouseEvent) => {
+        if (disabled) return;
+
+        event.preventDefault();
+        event.stopPropagation();
+
+        setPosition({ x: event.clientX, y: event.clientY });
+        setOpened(true);
+        onOpen?.();
+      },
+      [disabled, onOpen]
+    );
+
+    const handleClose = useCallback(() => {
+      setOpened(false);
+      onClose?.();
+    }, [onClose]);
+
+    return (
+      <>
+        <Box
+          ref={ref}
+          className={className}
+          style={style}
+          onContextMenu={handleContextMenu}
+        >
+          {children}
+        </Box>
+
+        <Menu
+          opened={opened}
+          onClose={handleClose}
+          position="bottom-start"
+          offset={offset}
+          shadow={shadow}
+          radius={radius}
+          width={width}
+          styles={{
+            dropdown: {
+              position: 'fixed',
+              left: position.x,
+              top: position.y,
+              ...menuStyle,
+            },
+          }}
+          classNames={{ dropdown: menuClassName }}
+        >
+          <Menu.Target>
+            <div style={{ position: 'fixed', left: position.x, top: position.y, width: 1, height: 1 }} />
+          </Menu.Target>
+          <Menu.Dropdown>
+            {items.map((item) => (
+              <ContextMenuItemComponent key={item.key} item={item} onClose={handleClose} />
+            ))}
+          </Menu.Dropdown>
+        </Menu>
+      </>
+    );
+  }
+);
+
+ArchbaseContextMenu.displayName = 'ArchbaseContextMenu';
+
+// Hook para uso programático
+export interface UseArchbaseContextMenuOptions {
+  items: ArchbaseContextMenuItem[];
+  onOpen?: () => void;
+  onClose?: () => void;
+}
+
+export interface UseArchbaseContextMenuReturn {
+  opened: boolean;
+  position: { x: number; y: number };
+  open: (event: ReactMouseEvent) => void;
+  close: () => void;
+  getHandlers: () => {
+    onContextMenu: (event: ReactMouseEvent) => void;
+  };
+  Menu: React.FC<{ children?: ReactNode }>;
+}
+
+export function useArchbaseContextMenu(
+  options: UseArchbaseContextMenuOptions
+): UseArchbaseContextMenuReturn {
+  const [opened, setOpened] = useState(false);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+
+  const open = useCallback(
+    (event: ReactMouseEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+      setPosition({ x: event.clientX, y: event.clientY });
+      setOpened(true);
+      options.onOpen?.();
+    },
+    [options]
+  );
+
+  const close = useCallback(() => {
+    setOpened(false);
+    options.onClose?.();
+  }, [options]);
+
+  const getHandlers = useCallback(
+    () => ({
+      onContextMenu: open,
+    }),
+    [open]
+  );
+
+  const ContextMenuComponent: React.FC<{ children?: ReactNode }> = useCallback(
+    () => (
+      <Menu
+        opened={opened}
+        onClose={close}
+        position="bottom-start"
+        offset={5}
+        shadow="md"
+        radius="sm"
+        width={200}
+        styles={{
+          dropdown: {
+            position: 'fixed',
+            left: position.x,
+            top: position.y,
+          },
+        }}
+      >
+        <Menu.Target>
+          <div style={{ position: 'fixed', left: position.x, top: position.y, width: 1, height: 1 }} />
+        </Menu.Target>
+        <Menu.Dropdown>
+          {options.items.map((item) => (
+            <ContextMenuItemComponent key={item.key} item={item} onClose={close} />
+          ))}
+        </Menu.Dropdown>
+      </Menu>
+    ),
+    [close, opened, options.items, position.x, position.y]
+  );
+
+  return {
+    opened,
+    position,
+    open,
+    close,
+    getHandlers,
+    Menu: ContextMenuComponent,
+  };
+}