@archbase/components 3.0.23 → 4.0.0

package/src/datagrid/export/ArchbaseDataGridExcelExport.tsx

@@ -0,0 +1,293 @@
+import React, { useCallback, useState } from 'react';
+import { Button, ActionIcon, Tooltip, MantineSize, MantineColor } from '@mantine/core';
+import { IconFileSpreadsheet, IconDownload } from '@tabler/icons-react';
+import * as XLSX from 'xlsx';
+import { getI18nextInstance } from '@archbase/core';
+
+export interface ExcelExportColumn {
+  /** Campo/key do dado */
+  field: string;
+  /** Label do cabeçalho */
+  header: string;
+  /** Largura da coluna em caracteres */
+  width?: number;
+  /** Formatador de valor */
+  formatter?: (value: any, row: any) => string | number;
+  /** Se a coluna deve ser incluída na exportação */
+  visible?: boolean;
+}
+
+export interface ArchbaseDataGridExcelExportProps<T = any> {
+  /** Dados a serem exportados */
+  data: T[];
+  /** Colunas a serem exportadas */
+  columns: ExcelExportColumn[];
+  /** Nome do arquivo (sem extensão) */
+  filename?: string;
+  /** Nome da planilha */
+  sheetName?: string;
+  /** Se deve incluir apenas dados filtrados (se aplicável) */
+  includeFiltered?: boolean;
+  /** Formato de data para colunas de data */
+  dateFormat?: string;
+  /** Formato de número para colunas numéricas */
+  numberFormat?: string;
+  /** Se deve incluir cabeçalhos */
+  includeHeaders?: boolean;
+  /** Callback antes da exportação */
+  onBeforeExport?: (data: T[]) => T[] | Promise<T[]>;
+  /** Callback após exportação bem sucedida */
+  onExportSuccess?: () => void;
+  /** Callback em caso de erro */
+  onExportError?: (error: Error) => void;
+  /** Variante do botão */
+  variant?: 'button' | 'icon';
+  /** Label do botão */
+  label?: string;
+  /** Tamanho do botão */
+  size?: MantineSize;
+  /** Cor do botão */
+  color?: MantineColor;
+  /** Se o botão está desabilitado */
+  disabled?: boolean;
+  /** Tooltip */
+  tooltip?: string;
+  /** Classe CSS */
+  className?: string;
+  /** Estilo */
+  style?: React.CSSProperties;
+}
+
+export function ArchbaseDataGridExcelExport<T = any>({
+  data,
+  columns,
+  filename = 'export',
+  sheetName = 'Dados',
+  includeFiltered = true,
+  dateFormat = 'dd/mm/yyyy',
+  numberFormat,
+  includeHeaders = true,
+  onBeforeExport,
+  onExportSuccess,
+  onExportError,
+  variant = 'button',
+  label,
+  size = 'sm',
+  color,
+  disabled = false,
+  tooltip,
+  className,
+  style,
+}: ArchbaseDataGridExcelExportProps<T>) {
+  const t = getI18nextInstance().t;
+  const [isExporting, setIsExporting] = useState(false);
+
+  const formatValue = useCallback(
+    (value: any, column: ExcelExportColumn, row: T): any => {
+      if (value === null || value === undefined) {
+        return '';
+      }
+
+      // Usa formatador customizado se disponível
+      if (column.formatter) {
+        return column.formatter(value, row);
+      }
+
+      // Formata datas
+      if (value instanceof Date) {
+        return value.toLocaleDateString('pt-BR');
+      }
+
+      // Formata booleanos
+      if (typeof value === 'boolean') {
+        return value ? 'Sim' : 'Não';
+      }
+
+      // Retorna valor como está
+      return value;
+    },
+    []
+  );
+
+  const exportToExcel = useCallback(async () => {
+    setIsExporting(true);
+
+    try {
+      // Filtra colunas visíveis
+      const visibleColumns = columns.filter((col) => col.visible !== false);
+
+      // Prepara dados
+      let exportData = data;
+      if (onBeforeExport) {
+        exportData = await onBeforeExport(data);
+      }
+
+      // Cria array de arrays para o worksheet
+      const wsData: any[][] = [];
+
+      // Adiciona cabeçalhos
+      if (includeHeaders) {
+        wsData.push(visibleColumns.map((col) => col.header));
+      }
+
+      // Adiciona dados
+      exportData.forEach((row) => {
+        const rowData = visibleColumns.map((col) => {
+          const value = (row as any)[col.field];
+          return formatValue(value, col, row);
+        });
+        wsData.push(rowData);
+      });
+
+      // Cria worksheet
+      const ws = XLSX.utils.aoa_to_sheet(wsData);
+
+      // Define larguras das colunas
+      const colWidths = visibleColumns.map((col) => ({
+        wch: col.width || Math.max(col.header.length, 15),
+      }));
+      ws['!cols'] = colWidths;
+
+      // Cria workbook
+      const wb = XLSX.utils.book_new();
+      XLSX.utils.book_append_sheet(wb, ws, sheetName);
+
+      // Gera arquivo e faz download
+      const timestamp = new Date().toISOString().slice(0, 10);
+      const finalFilename = `${filename}_${timestamp}.xlsx`;
+
+      XLSX.writeFile(wb, finalFilename);
+
+      onExportSuccess?.();
+    } catch (error) {
+      const err = error instanceof Error ? error : new Error('Erro ao exportar');
+      onExportError?.(err);
+    } finally {
+      setIsExporting(false);
+    }
+  }, [
+    columns,
+    data,
+    filename,
+    formatValue,
+    includeHeaders,
+    onBeforeExport,
+    onExportError,
+    onExportSuccess,
+    sheetName,
+  ]);
+
+  const buttonLabel = label || t('archbase:Exportar Excel');
+  const tooltipText = tooltip || t('archbase:Exportar dados para Excel');
+
+  if (variant === 'icon') {
+    return (
+      <Tooltip label={tooltipText}>
+        <ActionIcon
+          variant="subtle"
+          size={size}
+          color={color}
+          onClick={exportToExcel}
+          loading={isExporting}
+          disabled={disabled || data.length === 0}
+          className={className}
+          style={style}
+          aria-label={buttonLabel}
+        >
+          <IconFileSpreadsheet size={18} />
+        </ActionIcon>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <Tooltip label={tooltipText} disabled={!tooltip}>
+      <Button
+        variant="light"
+        size={size}
+        color={color}
+        leftSection={<IconFileSpreadsheet size={18} />}
+        onClick={exportToExcel}
+        loading={isExporting}
+        disabled={disabled || data.length === 0}
+        className={className}
+        style={style}
+      >
+        {buttonLabel}
+      </Button>
+    </Tooltip>
+  );
+}
+
+ArchbaseDataGridExcelExport.displayName = 'ArchbaseDataGridExcelExport';
+
+// Hook para usar a exportação programaticamente
+export function useArchbaseExcelExport<T = any>() {
+  const [isExporting, setIsExporting] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const exportToExcel = useCallback(
+    async (
+      data: T[],
+      columns: ExcelExportColumn[],
+      options: {
+        filename?: string;
+        sheetName?: string;
+        includeHeaders?: boolean;
+      } = {}
+    ) => {
+      const { filename = 'export', sheetName = 'Dados', includeHeaders = true } = options;
+
+      setIsExporting(true);
+      setError(null);
+
+      try {
+        const visibleColumns = columns.filter((col) => col.visible !== false);
+        const wsData: any[][] = [];
+
+        if (includeHeaders) {
+          wsData.push(visibleColumns.map((col) => col.header));
+        }
+
+        data.forEach((row) => {
+          const rowData = visibleColumns.map((col) => {
+            const value = (row as any)[col.field];
+            if (col.formatter) {
+              return col.formatter(value, row);
+            }
+            if (value instanceof Date) {
+              return value.toLocaleDateString('pt-BR');
+            }
+            if (typeof value === 'boolean') {
+              return value ? 'Sim' : 'Não';
+            }
+            return value ?? '';
+          });
+          wsData.push(rowData);
+        });
+
+        const ws = XLSX.utils.aoa_to_sheet(wsData);
+        ws['!cols'] = visibleColumns.map((col) => ({
+          wch: col.width || Math.max(col.header.length, 15),
+        }));
+
+        const wb = XLSX.utils.book_new();
+        XLSX.utils.book_append_sheet(wb, ws, sheetName);
+
+        const timestamp = new Date().toISOString().slice(0, 10);
+        XLSX.writeFile(wb, `${filename}_${timestamp}.xlsx`);
+
+        return true;
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error('Erro ao exportar');
+        setError(error);
+        return false;
+      } finally {
+        setIsExporting(false);
+      }
+    },
+    []
+  );
+
+  return { exportToExcel, isExporting, error };
+}

package/src/datagrid/export/index.ts

@@ -0,0 +1,8 @@
+export {
+  ArchbaseDataGridExcelExport,
+  useArchbaseExcelExport,
+} from './ArchbaseDataGridExcelExport';
+export type {
+  ArchbaseDataGridExcelExportProps,
+  ExcelExportColumn,
+} from './ArchbaseDataGridExcelExport';

package/src/datagrid/index.tsx

@@ -10,3 +10,5 @@ export * from './utils';
 export * from './modals';
 // Exportar types
 export * from './types';
+// Exportar excel export
+export * from './export';

package/src/display/ArchbaseAnimationWrapper.tsx

@@ -0,0 +1,272 @@
+import React, { forwardRef, ReactNode, Children, cloneElement, isValidElement } from 'react';
+import { Transition, TransitionProps, Box } from '@mantine/core';
+
+export type ArchbaseAnimationPreset =
+  | 'fade'
+  | 'scale'
+  | 'scale-y'
+  | 'scale-x'
+  | 'skew-up'
+  | 'skew-down'
+  | 'rotate-left'
+  | 'rotate-right'
+  | 'slide-down'
+  | 'slide-up'
+  | 'slide-left'
+  | 'slide-right'
+  | 'pop'
+  | 'pop-bottom-left'
+  | 'pop-bottom-right'
+  | 'pop-top-left'
+  | 'pop-top-right';
+
+export interface ArchbaseAnimationWrapperProps {
+  /** Conteúdo a ser animado */
+  children: ReactNode;
+  /** Se o conteúdo está visível */
+  visible?: boolean;
+  /** Preset de animação */
+  preset?: ArchbaseAnimationPreset;
+  /** Duração da animação em ms */
+  duration?: number;
+  /** Delay antes de iniciar em ms */
+  delay?: number;
+  /** Função de timing */
+  timingFunction?: string;
+  /** Se deve manter montado quando invisível */
+  keepMounted?: boolean;
+  /** Callback quando a animação de entrada completa */
+  onEntered?: () => void;
+  /** Callback quando a animação de saída completa */
+  onExited?: () => void;
+  /** Callback quando a animação de entrada inicia */
+  onEnter?: () => void;
+  /** Callback quando a animação de saída inicia */
+  onExit?: () => void;
+  /** Classe CSS */
+  className?: string;
+  /** Estilo */
+  style?: React.CSSProperties;
+}
+
+export const ArchbaseAnimationWrapper = forwardRef<HTMLDivElement, ArchbaseAnimationWrapperProps>(
+  (
+    {
+      children,
+      visible = true,
+      preset = 'fade',
+      duration = 200,
+      delay = 0,
+      timingFunction = 'ease',
+      keepMounted = false,
+      onEntered,
+      onExited,
+      onEnter,
+      onExit,
+      className,
+      style,
+    },
+    ref
+  ) => {
+    return (
+      <Transition
+        mounted={visible}
+        transition={preset}
+        duration={duration}
+        timingFunction={timingFunction}
+        keepMounted={keepMounted}
+        onEntered={onEntered}
+        onExited={onExited}
+        onEnter={onEnter}
+        onExit={onExit}
+      >
+        {(styles) => (
+          <Box
+            ref={ref}
+            className={className}
+            style={{
+              ...style,
+              ...styles,
+              transitionDelay: delay ? `${delay}ms` : undefined,
+            }}
+          >
+            {children}
+          </Box>
+        )}
+      </Transition>
+    );
+  }
+);
+
+ArchbaseAnimationWrapper.displayName = 'ArchbaseAnimationWrapper';
+
+// ================== Animated List ==================
+
+export interface ArchbaseAnimatedListProps {
+  /** Itens da lista */
+  children: ReactNode;
+  /** Se os itens estão visíveis */
+  visible?: boolean;
+  /** Preset de animação */
+  preset?: ArchbaseAnimationPreset;
+  /** Duração da animação em ms */
+  duration?: number;
+  /** Delay base em ms */
+  baseDelay?: number;
+  /** Delay incremental entre itens em ms */
+  staggerDelay?: number;
+  /** Função de timing */
+  timingFunction?: string;
+  /** Se deve animar na ordem reversa */
+  reverse?: boolean;
+  /** Classe CSS do container */
+  className?: string;
+  /** Estilo do container */
+  style?: React.CSSProperties;
+}
+
+export const ArchbaseAnimatedList = forwardRef<HTMLDivElement, ArchbaseAnimatedListProps>(
+  (
+    {
+      children,
+      visible = true,
+      preset = 'slide-up',
+      duration = 200,
+      baseDelay = 0,
+      staggerDelay = 50,
+      timingFunction = 'ease',
+      reverse = false,
+      className,
+      style,
+    },
+    ref
+  ) => {
+    const childArray = Children.toArray(children);
+    const count = childArray.length;
+
+    return (
+      <Box ref={ref} className={className} style={style}>
+        {childArray.map((child, index) => {
+          const itemIndex = reverse ? count - 1 - index : index;
+          const delay = baseDelay + itemIndex * staggerDelay;
+
+          return (
+            <Transition
+              key={index}
+              mounted={visible}
+              transition={preset}
+              duration={duration}
+              timingFunction={timingFunction}
+            >
+              {(styles) => (
+                <Box
+                  style={{
+                    ...styles,
+                    transitionDelay: `${delay}ms`,
+                  }}
+                >
+                  {child}
+                </Box>
+              )}
+            </Transition>
+          );
+        })}
+      </Box>
+    );
+  }
+);
+
+ArchbaseAnimatedList.displayName = 'ArchbaseAnimatedList';
+
+// ================== Fade In When Visible ==================
+
+export interface ArchbaseFadeInWhenVisibleProps {
+  /** Conteúdo a ser animado */
+  children: ReactNode;
+  /** Preset de animação */
+  preset?: ArchbaseAnimationPreset;
+  /** Duração da animação em ms */
+  duration?: number;
+  /** Delay antes de iniciar em ms */
+  delay?: number;
+  /** Threshold de visibilidade (0-1) */
+  threshold?: number;
+  /** Se deve animar apenas uma vez */
+  once?: boolean;
+  /** Classe CSS */
+  className?: string;
+  /** Estilo */
+  style?: React.CSSProperties;
+}
+
+export const ArchbaseFadeInWhenVisible = forwardRef<HTMLDivElement, ArchbaseFadeInWhenVisibleProps>(
+  (
+    {
+      children,
+      preset = 'fade',
+      duration = 400,
+      delay = 0,
+      threshold = 0.1,
+      once = true,
+      className,
+      style,
+    },
+    ref
+  ) => {
+    const [isVisible, setIsVisible] = React.useState(false);
+    const elementRef = React.useRef<HTMLDivElement>(null);
+
+    React.useEffect(() => {
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          if (entry.isIntersecting) {
+            setIsVisible(true);
+            if (once && elementRef.current) {
+              observer.unobserve(elementRef.current);
+            }
+          } else if (!once) {
+            setIsVisible(false);
+          }
+        },
+        { threshold }
+      );
+
+      if (elementRef.current) {
+        observer.observe(elementRef.current);
+      }
+
+      return () => {
+        if (elementRef.current) {
+          observer.unobserve(elementRef.current);
+        }
+      };
+    }, [once, threshold]);
+
+    return (
+      <Box ref={elementRef}>
+        <Transition
+          mounted={isVisible}
+          transition={preset}
+          duration={duration}
+          timingFunction="ease"
+        >
+          {(styles) => (
+            <Box
+              ref={ref}
+              className={className}
+              style={{
+                ...style,
+                ...styles,
+                transitionDelay: delay ? `${delay}ms` : undefined,
+              }}
+            >
+              {children}
+            </Box>
+          )}
+        </Transition>
+      </Box>
+    );
+  }
+);
+
+ArchbaseFadeInWhenVisible.displayName = 'ArchbaseFadeInWhenVisible';