@archbase/components 3.0.25 → 4.0.1

package/src/navigation/ArchbaseActionSheet.tsx

@@ -0,0 +1,301 @@
+import React, { forwardRef, useCallback, ReactNode } from 'react';
+import {
+  Drawer,
+  DrawerProps,
+  Menu,
+  Button,
+  Stack,
+  Group,
+  Text,
+  Divider,
+  Box,
+  MantineColor,
+  MantineSize,
+} from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
+
+export interface ArchbaseActionSheetItem {
+  /** Chave única */
+  key: string;
+  /** Tipo do item */
+  type?: 'item' | 'divider';
+  /** Label do item */
+  label?: string;
+  /** Descrição */
+  description?: string;
+  /** Ícone */
+  icon?: ReactNode;
+  /** Cor */
+  color?: MantineColor;
+  /** Se está desabilitado */
+  disabled?: boolean;
+  /** Callback ao clicar */
+  onClick?: () => void;
+}
+
+export interface ArchbaseActionSheetProps {
+  /** Itens do action sheet */
+  items: ArchbaseActionSheetItem[];
+  /** Se está aberto */
+  opened: boolean;
+  /** Callback ao fechar */
+  onClose: () => void;
+  /** Título */
+  title?: string;
+  /** Descrição */
+  description?: string;
+  /** Label do botão cancelar */
+  cancelLabel?: string;
+  /** Se deve mostrar botão cancelar */
+  showCancel?: boolean;
+  /** Breakpoint para mudar de drawer para menu */
+  breakpoint?: string;
+  /** Posição do menu no desktop */
+  menuPosition?: 'bottom' | 'top' | 'left' | 'right';
+  /** Elemento alvo do menu (desktop) */
+  target?: ReactNode;
+  /** Tamanho */
+  size?: MantineSize;
+  /** Raio das bordas do drawer */
+  radius?: MantineSize;
+  /** Se deve ter overlay */
+  withOverlay?: boolean;
+  /** Classe CSS */
+  className?: string;
+  /** Estilo */
+  style?: React.CSSProperties;
+}
+
+export const ArchbaseActionSheet = forwardRef<HTMLDivElement, ArchbaseActionSheetProps>(
+  (
+    {
+      items,
+      opened,
+      onClose,
+      title,
+      description,
+      cancelLabel = 'Cancelar',
+      showCancel = true,
+      breakpoint = '48em',
+      menuPosition = 'bottom',
+      target,
+      size = 'md',
+      radius = 'lg',
+      withOverlay = true,
+      className,
+      style,
+    },
+    ref
+  ) => {
+    const isMobile = useMediaQuery(`(max-width: ${breakpoint})`);
+
+    const handleItemClick = useCallback(
+      (item: ArchbaseActionSheetItem) => {
+        if (item.disabled) return;
+        item.onClick?.();
+        onClose();
+      },
+      [onClose]
+    );
+
+    const renderItem = (item: ArchbaseActionSheetItem) => {
+      if (item.type === 'divider') {
+        return <Divider key={item.key} my="xs" />;
+      }
+
+      return (
+        <Button
+          key={item.key}
+          variant="subtle"
+          color={item.color || 'dark'}
+          size={size}
+          fullWidth
+          justify="flex-start"
+          leftSection={item.icon}
+          disabled={item.disabled}
+          onClick={() => handleItemClick(item)}
+          styles={{
+            root: {
+              height: 'auto',
+              padding: '12px 16px',
+            },
+            inner: {
+              justifyContent: 'flex-start',
+            },
+          }}
+        >
+          <Stack gap={0} align="flex-start">
+            <Text size={size} fw={500}>
+              {item.label}
+            </Text>
+            {item.description && (
+              <Text size="xs" c="dimmed">
+                {item.description}
+              </Text>
+            )}
+          </Stack>
+        </Button>
+      );
+    };
+
+    // Mobile: Drawer from bottom
+    if (isMobile) {
+      return (
+        <Drawer
+          ref={ref}
+          opened={opened}
+          onClose={onClose}
+          position="bottom"
+          size="auto"
+          withOverlay={withOverlay}
+          radius={radius}
+          title={title}
+          className={className}
+          style={style}
+          styles={{
+            content: {
+              paddingBottom: 'env(safe-area-inset-bottom, 16px)',
+            },
+            header: {
+              paddingBottom: title ? 8 : 0,
+            },
+          }}
+        >
+          <Stack gap={0}>
+            {description && (
+              <Text size="sm" c="dimmed" mb="md">
+                {description}
+              </Text>
+            )}
+
+            {items.map(renderItem)}
+
+            {showCancel && (
+              <>
+                <Divider my="sm" />
+                <Button
+                  variant="subtle"
+                  color="gray"
+                  size={size}
+                  fullWidth
+                  onClick={onClose}
+                >
+                  {cancelLabel}
+                </Button>
+              </>
+            )}
+          </Stack>
+        </Drawer>
+      );
+    }
+
+    // Desktop: Menu dropdown
+    return (
+      <Menu
+        opened={opened}
+        onClose={onClose}
+        position={menuPosition}
+        shadow="md"
+        width={280}
+      >
+        <Menu.Target>{target || <Box />}</Menu.Target>
+        <Menu.Dropdown ref={ref} className={className} style={style}>
+          {title && <Menu.Label>{title}</Menu.Label>}
+          {description && (
+            <Text size="xs" c="dimmed" px="sm" pb="xs">
+              {description}
+            </Text>
+          )}
+
+          {items.map((item) => {
+            if (item.type === 'divider') {
+              return <Menu.Divider key={item.key} />;
+            }
+
+            return (
+              <Menu.Item
+                key={item.key}
+                leftSection={item.icon}
+                color={item.color}
+                disabled={item.disabled}
+                onClick={() => handleItemClick(item)}
+              >
+                <Stack gap={0}>
+                  <Text size="sm">{item.label}</Text>
+                  {item.description && (
+                    <Text size="xs" c="dimmed">
+                      {item.description}
+                    </Text>
+                  )}
+                </Stack>
+              </Menu.Item>
+            );
+          })}
+
+          {showCancel && (
+            <>
+              <Menu.Divider />
+              <Menu.Item color="gray" onClick={onClose}>
+                {cancelLabel}
+              </Menu.Item>
+            </>
+          )}
+        </Menu.Dropdown>
+      </Menu>
+    );
+  }
+);
+
+ArchbaseActionSheet.displayName = 'ArchbaseActionSheet';
+
+// ================== Hook para uso programático ==================
+
+export interface UseArchbaseActionSheetOptions {
+  items: ArchbaseActionSheetItem[];
+  title?: string;
+  description?: string;
+  cancelLabel?: string;
+  showCancel?: boolean;
+}
+
+export interface UseArchbaseActionSheetReturn {
+  opened: boolean;
+  open: () => void;
+  close: () => void;
+  toggle: () => void;
+  ActionSheet: React.FC<{ target?: ReactNode }>;
+}
+
+export function useArchbaseActionSheet(
+  options: UseArchbaseActionSheetOptions
+): UseArchbaseActionSheetReturn {
+  const [opened, setOpened] = React.useState(false);
+
+  const open = useCallback(() => setOpened(true), []);
+  const close = useCallback(() => setOpened(false), []);
+  const toggle = useCallback(() => setOpened((prev) => !prev), []);
+
+  const ActionSheetComponent: React.FC<{ target?: ReactNode }> = useCallback(
+    ({ target }) => (
+      <ArchbaseActionSheet
+        items={options.items}
+        opened={opened}
+        onClose={close}
+        title={options.title}
+        description={options.description}
+        cancelLabel={options.cancelLabel}
+        showCancel={options.showCancel}
+        target={target}
+      />
+    ),
+    [close, opened, options]
+  );
+
+  return {
+    opened,
+    open,
+    close,
+    toggle,
+    ActionSheet: ActionSheetComponent,
+  };
+}

package/src/navigation/ArchbaseAppBar.tsx

@@ -0,0 +1,233 @@
+import React, { forwardRef, ReactNode } from 'react';
+import {
+  Box,
+  Group,
+  ActionIcon,
+  Text,
+  Menu,
+  Burger,
+  MantineColor,
+  MantineSize,
+} from '@mantine/core';
+import { useMediaQuery, useDisclosure } from '@mantine/hooks';
+import { IconDotsVertical } from '@tabler/icons-react';
+
+export interface ArchbaseAppBarAction {
+  /** Chave única */
+  key: string;
+  /** Ícone */
+  icon: ReactNode;
+  /** Label (para menu mobile) */
+  label: string;
+  /** Callback ao clicar */
+  onClick: () => void;
+  /** Cor */
+  color?: MantineColor;
+  /** Se está desabilitado */
+  disabled?: boolean;
+  /** Se deve esconder no mobile */
+  hideOnMobile?: boolean;
+  /** Se deve mostrar sempre (não ir para menu) */
+  alwaysVisible?: boolean;
+}
+
+export interface ArchbaseAppBarProps {
+  /** Seção esquerda (logo, back button, menu) */
+  leftSection?: ReactNode;
+  /** Seção central (título, busca) */
+  centerSection?: ReactNode;
+  /** Seção direita (ações, avatar) */
+  rightSection?: ReactNode;
+  /** Ações (alternativa ao rightSection) */
+  actions?: ArchbaseAppBarAction[];
+  /** Título */
+  title?: string;
+  /** Subtítulo */
+  subtitle?: string;
+  /** Altura */
+  height?: number;
+  /** Cor de fundo */
+  backgroundColor?: string;
+  /** Cor do texto */
+  textColor?: MantineColor;
+  /** Se deve ter sombra */
+  withShadow?: boolean;
+  /** Se deve ter borda inferior */
+  withBorder?: boolean;
+  /** Se está fixo no topo */
+  fixed?: boolean;
+  /** Z-index quando fixo */
+  zIndex?: number;
+  /** Breakpoint para modo mobile */
+  mobileBreakpoint?: string;
+  /** Callback do burger (para abrir drawer) */
+  onBurgerClick?: () => void;
+  /** Se o burger está aberto */
+  burgerOpened?: boolean;
+  /** Padding horizontal */
+  px?: MantineSize | number;
+  /** Tamanho das ações */
+  actionSize?: MantineSize;
+  /** Classe CSS */
+  className?: string;
+  /** Estilo */
+  style?: React.CSSProperties;
+}
+
+export const ArchbaseAppBar = forwardRef<HTMLElement, ArchbaseAppBarProps>(
+  (
+    {
+      leftSection,
+      centerSection,
+      rightSection,
+      actions,
+      title,
+      subtitle,
+      height = 60,
+      backgroundColor = 'var(--mantine-color-body)',
+      textColor,
+      withShadow = true,
+      withBorder = true,
+      fixed = true,
+      zIndex = 100,
+      mobileBreakpoint = '48em',
+      onBurgerClick,
+      burgerOpened = false,
+      px = 'md',
+      actionSize = 'md',
+      className,
+      style,
+    },
+    ref
+  ) => {
+    const isMobile = useMediaQuery(`(max-width: ${mobileBreakpoint})`);
+    const [menuOpened, { toggle: toggleMenu, close: closeMenu }] = useDisclosure(false);
+
+    // Filtra ações visíveis
+    const visibleActions = actions?.filter((action) => {
+      if (isMobile && action.hideOnMobile) return false;
+      if (isMobile && !action.alwaysVisible) return false;
+      return true;
+    }) || [];
+
+    // Ações que vão para o menu no mobile
+    const menuActions = actions?.filter((action) => {
+      if (!isMobile) return false;
+      if (action.hideOnMobile) return false;
+      if (action.alwaysVisible) return false;
+      return true;
+    }) || [];
+
+    const renderActions = () => {
+      if (rightSection) return rightSection;
+      if (!actions || actions.length === 0) return null;
+
+      return (
+        <Group gap="xs">
+          {/* Ações visíveis */}
+          {visibleActions.map((action) => (
+            <ActionIcon
+              key={action.key}
+              variant="subtle"
+              color={action.color || 'gray'}
+              size={actionSize}
+              onClick={action.onClick}
+              disabled={action.disabled}
+            >
+              {action.icon}
+            </ActionIcon>
+          ))}
+
+          {/* Menu para ações extras no mobile */}
+          {menuActions.length > 0 && (
+            <Menu opened={menuOpened} onClose={closeMenu} position="bottom-end">
+              <Menu.Target>
+                <ActionIcon variant="subtle" color="gray" size={actionSize} onClick={toggleMenu}>
+                  <IconDotsVertical size={20} />
+                </ActionIcon>
+              </Menu.Target>
+              <Menu.Dropdown>
+                {menuActions.map((action) => (
+                  <Menu.Item
+                    key={action.key}
+                    leftSection={action.icon}
+                    color={action.color}
+                    disabled={action.disabled}
+                    onClick={() => {
+                      action.onClick();
+                      closeMenu();
+                    }}
+                  >
+                    {action.label}
+                  </Menu.Item>
+                ))}
+              </Menu.Dropdown>
+            </Menu>
+          )}
+        </Group>
+      );
+    };
+
+    return (
+      <Box
+        ref={ref}
+        component="header"
+        className={className}
+        style={{
+          ...style,
+          position: fixed ? 'fixed' : 'relative',
+          top: 0,
+          left: 0,
+          right: 0,
+          height,
+          backgroundColor,
+          borderBottom: withBorder ? '1px solid var(--mantine-color-gray-3)' : undefined,
+          boxShadow: withShadow ? '0 2px 4px rgba(0, 0, 0, 0.1)' : undefined,
+          zIndex: fixed ? zIndex : undefined,
+          display: 'flex',
+          alignItems: 'center',
+          paddingLeft: typeof px === 'number' ? px : `var(--mantine-spacing-${px})`,
+          paddingRight: typeof px === 'number' ? px : `var(--mantine-spacing-${px})`,
+        }}
+      >
+        {/* Left Section */}
+        <Group gap="sm" style={{ minWidth: 0 }}>
+          {/* Burger for mobile menu */}
+          {onBurgerClick && isMobile && (
+            <Burger opened={burgerOpened} onClick={onBurgerClick} size="sm" />
+          )}
+          {leftSection}
+        </Group>
+
+        {/* Center Section */}
+        <Box style={{ flex: 1, minWidth: 0, marginLeft: 16, marginRight: 16 }}>
+          {centerSection || (
+            <>
+              {title && (
+                <Text
+                  size="md"
+                  fw={600}
+                  c={textColor}
+                  truncate
+                  style={{ lineHeight: 1.2 }}
+                >
+                  {title}
+                </Text>
+              )}
+              {subtitle && (
+                <Text size="xs" c="dimmed" truncate>
+                  {subtitle}
+                </Text>
+              )}
+            </>
+          )}
+        </Box>
+
+        {/* Right Section */}
+        {renderActions()}
+      </Box>
+    );
+  }
+);
+
+ArchbaseAppBar.displayName = 'ArchbaseAppBar';