@archbase/components 3.0.25 → 4.0.1

package/src/feedback/ArchbaseSkeleton.tsx

@@ -0,0 +1,419 @@
+import React, { forwardRef } from 'react';
+import { Skeleton, Stack, Group, Box, MantineRadius } from '@mantine/core';
+
+// ================== DataGrid Skeleton ==================
+
+export interface ArchbaseDataGridSkeletonProps {
+  /** Número de linhas */
+  rows?: number;
+  /** Número de colunas */
+  columns?: number;
+  /** Se deve mostrar header */
+  showHeader?: boolean;
+  /** Altura da linha */
+  rowHeight?: number;
+  /** Espaçamento entre linhas */
+  gap?: number;
+  /** Raio das bordas */
+  radius?: MantineRadius;
+  /** Se deve animar */
+  animate?: boolean;
+  /** Classe CSS */
+  className?: string;
+  /** Estilo */
+  style?: React.CSSProperties;
+}
+
+export const ArchbaseDataGridSkeleton = forwardRef<HTMLDivElement, ArchbaseDataGridSkeletonProps>(
+  (
+    {
+      rows = 5,
+      columns = 4,
+      showHeader = true,
+      rowHeight = 40,
+      gap = 8,
+      radius = 'sm',
+      animate = true,
+      className,
+      style,
+    },
+    ref
+  ) => {
+    const columnWidths = Array.from({ length: columns }, (_, i) => {
+      // Primeira coluna menor (checkbox), última maior
+      if (i === 0) return '40px';
+      if (i === columns - 1) return '1fr';
+      return `${Math.floor(Math.random() * 50) + 100}px`;
+    });
+
+    return (
+      <Stack ref={ref} gap={gap} className={className} style={style}>
+        {/* Header */}
+        {showHeader && (
+          <Group gap={gap} style={{ display: 'grid', gridTemplateColumns: columnWidths.join(' ') }}>
+            {Array.from({ length: columns }).map((_, i) => (
+              <Skeleton key={i} height={rowHeight} radius={radius} animate={animate} />
+            ))}
+          </Group>
+        )}
+
+        {/* Rows */}
+        {Array.from({ length: rows }).map((_, rowIndex) => (
+          <Group
+            key={rowIndex}
+            gap={gap}
+            style={{ display: 'grid', gridTemplateColumns: columnWidths.join(' ') }}
+          >
+            {Array.from({ length: columns }).map((_, colIndex) => (
+              <Skeleton key={colIndex} height={rowHeight} radius={radius} animate={animate} />
+            ))}
+          </Group>
+        ))}
+      </Stack>
+    );
+  }
+);
+
+ArchbaseDataGridSkeleton.displayName = 'ArchbaseDataGridSkeleton';
+
+// ================== Form Skeleton ==================
+
+export interface ArchbaseFormSkeletonProps {
+  /** Número de campos */
+  fields?: number;
+  /** Número de colunas do form */
+  columns?: number;
+  /** Se deve mostrar labels */
+  showLabels?: boolean;
+  /** Altura do input */
+  inputHeight?: number;
+  /** Altura do label */
+  labelHeight?: number;
+  /** Espaçamento */
+  gap?: number;
+  /** Raio das bordas */
+  radius?: MantineRadius;
+  /** Se deve animar */
+  animate?: boolean;
+  /** Se deve mostrar botões de ação */
+  showActions?: boolean;
+  /** Classe CSS */
+  className?: string;
+  /** Estilo */
+  style?: React.CSSProperties;
+}
+
+export const ArchbaseFormSkeleton = forwardRef<HTMLDivElement, ArchbaseFormSkeletonProps>(
+  (
+    {
+      fields = 6,
+      columns = 2,
+      showLabels = true,
+      inputHeight = 36,
+      labelHeight = 14,
+      gap = 16,
+      radius = 'sm',
+      animate = true,
+      showActions = true,
+      className,
+      style,
+    },
+    ref
+  ) => {
+    const fieldGroups = Math.ceil(fields / columns);
+
+    return (
+      <Stack ref={ref} gap={gap} className={className} style={style}>
+        {Array.from({ length: fieldGroups }).map((_, groupIndex) => (
+          <Group key={groupIndex} gap={gap} grow>
+            {Array.from({ length: Math.min(columns, fields - groupIndex * columns) }).map(
+              (_, fieldIndex) => (
+                <Stack key={fieldIndex} gap={4}>
+                  {showLabels && (
+                    <Skeleton
+                      height={labelHeight}
+                      width={`${Math.floor(Math.random() * 30) + 40}%`}
+                      radius={radius}
+                      animate={animate}
+                    />
+                  )}
+                  <Skeleton height={inputHeight} radius={radius} animate={animate} />
+                </Stack>
+              )
+            )}
+          </Group>
+        ))}
+
+        {/* Actions */}
+        {showActions && (
+          <Group justify="flex-end" gap={gap} mt="md">
+            <Skeleton height={36} width={100} radius={radius} animate={animate} />
+            <Skeleton height={36} width={100} radius={radius} animate={animate} />
+          </Group>
+        )}
+      </Stack>
+    );
+  }
+);
+
+ArchbaseFormSkeleton.displayName = 'ArchbaseFormSkeleton';
+
+// ================== Card Skeleton ==================
+
+export interface ArchbaseCardSkeletonProps {
+  /** Se deve mostrar avatar */
+  showAvatar?: boolean;
+  /** Tamanho do avatar */
+  avatarSize?: number;
+  /** Número de linhas de texto */
+  lines?: number;
+  /** Se deve mostrar imagem no topo */
+  showImage?: boolean;
+  /** Altura da imagem */
+  imageHeight?: number;
+  /** Se deve mostrar ações */
+  showActions?: boolean;
+  /** Raio das bordas */
+  radius?: MantineRadius;
+  /** Se deve animar */
+  animate?: boolean;
+  /** Classe CSS */
+  className?: string;
+  /** Estilo */
+  style?: React.CSSProperties;
+}
+
+export const ArchbaseCardSkeleton = forwardRef<HTMLDivElement, ArchbaseCardSkeletonProps>(
+  (
+    {
+      showAvatar = true,
+      avatarSize = 40,
+      lines = 3,
+      showImage = false,
+      imageHeight = 160,
+      showActions = false,
+      radius = 'md',
+      animate = true,
+      className,
+      style,
+    },
+    ref
+  ) => {
+    return (
+      <Box
+        ref={ref}
+        className={className}
+        style={{
+          ...style,
+          border: '1px solid var(--mantine-color-gray-3)',
+          borderRadius: `var(--mantine-radius-${radius})`,
+          padding: 16,
+          backgroundColor: 'var(--mantine-color-body)',
+        }}
+      >
+        <Stack gap="sm">
+          {/* Image */}
+          {showImage && (
+            <Skeleton height={imageHeight} radius={radius} animate={animate} mb="sm" />
+          )}
+
+          {/* Avatar + Title */}
+          <Group gap="sm">
+            {showAvatar && (
+              <Skeleton height={avatarSize} width={avatarSize} circle animate={animate} />
+            )}
+            <Stack gap={4} style={{ flex: 1 }}>
+              <Skeleton height={16} width="60%" radius={radius} animate={animate} />
+              <Skeleton height={12} width="40%" radius={radius} animate={animate} />
+            </Stack>
+          </Group>
+
+          {/* Content lines */}
+          <Stack gap={8}>
+            {Array.from({ length: lines }).map((_, i) => (
+              <Skeleton
+                key={i}
+                height={12}
+                width={i === lines - 1 ? `${Math.floor(Math.random() * 30) + 50}%` : '100%'}
+                radius={radius}
+                animate={animate}
+              />
+            ))}
+          </Stack>
+
+          {/* Actions */}
+          {showActions && (
+            <Group gap="sm" mt="sm">
+              <Skeleton height={32} width={80} radius={radius} animate={animate} />
+              <Skeleton height={32} width={80} radius={radius} animate={animate} />
+            </Group>
+          )}
+        </Stack>
+      </Box>
+    );
+  }
+);
+
+ArchbaseCardSkeleton.displayName = 'ArchbaseCardSkeleton';
+
+// ================== Kanban Skeleton ==================
+
+export interface ArchbaseKanbanSkeletonProps {
+  /** Número de colunas */
+  columns?: number;
+  /** Número de cards por coluna */
+  cardsPerColumn?: number;
+  /** Largura da coluna */
+  columnWidth?: number;
+  /** Altura do card */
+  cardHeight?: number;
+  /** Espaçamento */
+  gap?: number;
+  /** Raio das bordas */
+  radius?: MantineRadius;
+  /** Se deve animar */
+  animate?: boolean;
+  /** Classe CSS */
+  className?: string;
+  /** Estilo */
+  style?: React.CSSProperties;
+}
+
+export const ArchbaseKanbanSkeleton = forwardRef<HTMLDivElement, ArchbaseKanbanSkeletonProps>(
+  (
+    {
+      columns = 3,
+      cardsPerColumn = 3,
+      columnWidth = 280,
+      cardHeight = 100,
+      gap = 16,
+      radius = 'md',
+      animate = true,
+      className,
+      style,
+    },
+    ref
+  ) => {
+    return (
+      <Group ref={ref} gap={gap} align="flex-start" className={className} style={style}>
+        {Array.from({ length: columns }).map((_, colIndex) => (
+          <Box
+            key={colIndex}
+            style={{
+              width: columnWidth,
+              backgroundColor: 'var(--mantine-color-gray-1)',
+              borderRadius: `var(--mantine-radius-${radius})`,
+              padding: 12,
+            }}
+          >
+            <Stack gap={gap}>
+              {/* Column header */}
+              <Group justify="space-between">
+                <Skeleton height={20} width={100} radius={radius} animate={animate} />
+                <Skeleton height={20} width={24} radius="xl" animate={animate} />
+              </Group>
+
+              {/* Cards */}
+              {Array.from({ length: cardsPerColumn }).map((_, cardIndex) => (
+                <Box
+                  key={cardIndex}
+                  style={{
+                    backgroundColor: 'var(--mantine-color-body)',
+                    borderRadius: `var(--mantine-radius-${radius})`,
+                    padding: 12,
+                    boxShadow: 'var(--mantine-shadow-xs)',
+                  }}
+                >
+                  <Stack gap={8}>
+                    <Skeleton height={14} width="80%" radius={radius} animate={animate} />
+                    <Skeleton height={12} width="60%" radius={radius} animate={animate} />
+                    <Group gap={8} mt={4}>
+                      <Skeleton height={24} width={24} circle animate={animate} />
+                      <Skeleton height={16} width={60} radius={radius} animate={animate} />
+                    </Group>
+                  </Stack>
+                </Box>
+              ))}
+            </Stack>
+          </Box>
+        ))}
+      </Group>
+    );
+  }
+);
+
+ArchbaseKanbanSkeleton.displayName = 'ArchbaseKanbanSkeleton';
+
+// ================== List Skeleton ==================
+
+export interface ArchbaseListSkeletonProps {
+  /** Número de itens */
+  items?: number;
+  /** Se deve mostrar avatar */
+  showAvatar?: boolean;
+  /** Tamanho do avatar */
+  avatarSize?: number;
+  /** Se deve mostrar descrição */
+  showDescription?: boolean;
+  /** Se deve mostrar ação à direita */
+  showAction?: boolean;
+  /** Espaçamento */
+  gap?: number;
+  /** Raio das bordas */
+  radius?: MantineRadius;
+  /** Se deve animar */
+  animate?: boolean;
+  /** Classe CSS */
+  className?: string;
+  /** Estilo */
+  style?: React.CSSProperties;
+}
+
+export const ArchbaseListSkeleton = forwardRef<HTMLDivElement, ArchbaseListSkeletonProps>(
+  (
+    {
+      items = 5,
+      showAvatar = true,
+      avatarSize = 40,
+      showDescription = true,
+      showAction = false,
+      gap = 12,
+      radius = 'sm',
+      animate = true,
+      className,
+      style,
+    },
+    ref
+  ) => {
+    return (
+      <Stack ref={ref} gap={gap} className={className} style={style}>
+        {Array.from({ length: items }).map((_, i) => (
+          <Group key={i} gap="sm" wrap="nowrap">
+            {showAvatar && (
+              <Skeleton height={avatarSize} width={avatarSize} circle animate={animate} />
+            )}
+            <Stack gap={4} style={{ flex: 1 }}>
+              <Skeleton
+                height={14}
+                width={`${Math.floor(Math.random() * 30) + 50}%`}
+                radius={radius}
+                animate={animate}
+              />
+              {showDescription && (
+                <Skeleton
+                  height={12}
+                  width={`${Math.floor(Math.random() * 20) + 30}%`}
+                  radius={radius}
+                  animate={animate}
+                />
+              )}
+            </Stack>
+            {showAction && <Skeleton height={32} width={32} radius={radius} animate={animate} />}
+          </Group>
+        ))}
+      </Stack>
+    );
+  }
+);
+
+ArchbaseListSkeleton.displayName = 'ArchbaseListSkeleton';

package/src/feedback/index.ts

@@ -2,4 +2,25 @@
 export { Alert as ArchbaseMantineAlert } from '@mantine/core';
 export { Notification as ArchbaseNotification } from '@mantine/core';
 export { Loader as ArchbaseLoader } from '@mantine/core';
-export { Progress as ArchbaseProgress } from '@mantine/core';
+export { Progress as ArchbaseProgress } from '@mantine/core';
+
+export { ArchbaseChunkProgressBar } from './ArchbaseChunkProgressBar';
+export type { ArchbaseChunkProgressBarProps } from './ArchbaseChunkProgressBar';
+
+export {
+  ArchbaseDataGridSkeleton,
+  ArchbaseFormSkeleton,
+  ArchbaseCardSkeleton,
+  ArchbaseKanbanSkeleton,
+  ArchbaseListSkeleton,
+} from './ArchbaseSkeleton';
+export type {
+  ArchbaseDataGridSkeletonProps,
+  ArchbaseFormSkeletonProps,
+  ArchbaseCardSkeletonProps,
+  ArchbaseKanbanSkeletonProps,
+  ArchbaseListSkeletonProps,
+} from './ArchbaseSkeleton';
+
+export { ArchbaseRipple, useArchbaseRipple } from './ArchbaseRipple';
+export type { ArchbaseRippleProps, UseArchbaseRippleOptions, UseArchbaseRippleReturn } from './ArchbaseRipple';

package/src/filters/ArchbaseColumnSelector.tsx

@@ -0,0 +1,268 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import {
+  Paper,
+  Text,
+  TextInput,
+  Checkbox,
+  Group,
+  Button,
+  ActionIcon,
+  ScrollArea,
+  Stack,
+  Box,
+} from '@mantine/core';
+import {
+  IconSearch,
+  IconArrowUp,
+  IconArrowDown,
+  IconGripVertical,
+} from '@tabler/icons-react';
+
+export interface ArchbaseColumnItem {
+  field: string;
+  label: string;
+  visible: boolean;
+  order?: number;
+}
+
+export interface ArchbaseColumnSelectorProps {
+  /** Lista de colunas com configuração de visibilidade e ordem */
+  columns: ArchbaseColumnItem[];
+  /** Callback chamado quando a configuração de colunas muda */
+  onChange: (columns: Array<{ field: string; label: string; visible: boolean; order: number }>) => void;
+  /** Rótulo exibido no topo do componente */
+  label?: string;
+  /** Descrição exibida abaixo do rótulo */
+  description?: string;
+  /** Exibir campo de busca */
+  showSearch?: boolean;
+  /** Exibir botões Selecionar Todos / Desmarcar Todos */
+  showSelectAll?: boolean;
+  /** Altura máxima da lista de colunas */
+  maxHeight?: number;
+  /** Estilos inline */
+  style?: React.CSSProperties;
+  /** Classe CSS */
+  className?: string;
+  /** Largura do componente */
+  width?: number | string;
+}
+
+function normalizeColumns(columns: ArchbaseColumnItem[]): Array<{ field: string; label: string; visible: boolean; order: number }> {
+  return columns.map((col, index) => ({
+    field: col.field,
+    label: col.label,
+    visible: col.visible,
+    order: col.order ?? index,
+  }));
+}
+
+function sortByOrder<T extends { order: number }>(items: T[]): T[] {
+  return [...items].sort((a, b) => a.order - b.order);
+}
+
+export function ArchbaseColumnSelector({
+  columns,
+  onChange,
+  label,
+  description,
+  showSearch = true,
+  showSelectAll = true,
+  maxHeight = 400,
+  style,
+  className,
+  width,
+}: ArchbaseColumnSelectorProps) {
+  const [internalColumns, setInternalColumns] = useState(() =>
+    sortByOrder(normalizeColumns(columns)),
+  );
+  const [search, setSearch] = useState('');
+
+  const filteredColumns = useMemo(() => {
+    if (!search.trim()) return internalColumns;
+    const term = search.toLowerCase();
+    return internalColumns.filter((col) =>
+      col.label.toLowerCase().includes(term),
+    );
+  }, [internalColumns, search]);
+
+  const emitChange = useCallback(
+    (updated: Array<{ field: string; label: string; visible: boolean; order: number }>) => {
+      setInternalColumns(updated);
+      onChange(updated);
+    },
+    [onChange],
+  );
+
+  const handleToggle = useCallback(
+    (field: string) => {
+      const updated = internalColumns.map((col) =>
+        col.field === field ? { ...col, visible: !col.visible } : col,
+      );
+      emitChange(updated);
+    },
+    [internalColumns, emitChange],
+  );
+
+  const handleSelectAll = useCallback(() => {
+    const updated = internalColumns.map((col) => ({ ...col, visible: true }));
+    emitChange(updated);
+  }, [internalColumns, emitChange]);
+
+  const handleDeselectAll = useCallback(() => {
+    const updated = internalColumns.map((col) => ({ ...col, visible: false }));
+    emitChange(updated);
+  }, [internalColumns, emitChange]);
+
+  const handleMoveUp = useCallback(
+    (field: string) => {
+      const index = internalColumns.findIndex((col) => col.field === field);
+      if (index <= 0) return;
+      const updated = [...internalColumns];
+      const prevOrder = updated[index - 1].order;
+      updated[index - 1] = { ...updated[index - 1], order: updated[index].order };
+      updated[index] = { ...updated[index], order: prevOrder };
+      emitChange(sortByOrder(updated));
+    },
+    [internalColumns, emitChange],
+  );
+
+  const handleMoveDown = useCallback(
+    (field: string) => {
+      const index = internalColumns.findIndex((col) => col.field === field);
+      if (index < 0 || index >= internalColumns.length - 1) return;
+      const updated = [...internalColumns];
+      const nextOrder = updated[index + 1].order;
+      updated[index + 1] = { ...updated[index + 1], order: updated[index].order };
+      updated[index] = { ...updated[index], order: nextOrder };
+      emitChange(sortByOrder(updated));
+    },
+    [internalColumns, emitChange],
+  );
+
+  const allSelected = internalColumns.every((col) => col.visible);
+  const noneSelected = internalColumns.every((col) => !col.visible);
+
+  return (
+    <Paper
+      shadow="xs"
+      p="md"
+      withBorder
+      style={{ width, ...style }}
+      className={className}
+    >
+      <Stack gap="sm">
+        {label && (
+          <Box>
+            <Text fw={600} size="sm">
+              {label}
+            </Text>
+            {description && (
+              <Text size="xs" c="dimmed">
+                {description}
+              </Text>
+            )}
+          </Box>
+        )}
+
+        {showSearch && (
+          <TextInput
+            placeholder="Buscar colunas..."
+            leftSection={<IconSearch size={16} />}
+            value={search}
+            onChange={(e) => setSearch(e.currentTarget.value)}
+            size="sm"
+          />
+        )}
+
+        {showSelectAll && (
+          <Group gap="xs">
+            <Button
+              variant="subtle"
+              size="xs"
+              onClick={handleSelectAll}
+              disabled={allSelected}
+            >
+              Selecionar todos
+            </Button>
+            <Button
+              variant="subtle"
+              size="xs"
+              onClick={handleDeselectAll}
+              disabled={noneSelected}
+            >
+              Desmarcar todos
+            </Button>
+          </Group>
+        )}
+
+        <ScrollArea.Autosize mah={maxHeight}>
+          <Stack gap={4}>
+            {filteredColumns.map((col, idx) => {
+              const isFirst = idx === 0;
+              const isLast = idx === filteredColumns.length - 1;
+              const isSearching = search.trim().length > 0;
+
+              return (
+                <Group
+                  key={col.field}
+                  gap="xs"
+                  wrap="nowrap"
+                  p={4}
+                  style={{
+                    borderRadius: 'var(--mantine-radius-sm)',
+                    cursor: 'default',
+                  }}
+                >
+                  <IconGripVertical
+                    size={16}
+                    style={{ color: 'var(--mantine-color-dimmed)', flexShrink: 0 }}
+                  />
+
+                  <Checkbox
+                    checked={col.visible}
+                    onChange={() => handleToggle(col.field)}
+                    label={col.label}
+                    size="sm"
+                    style={{ flex: 1 }}
+                  />
+
+                  {!isSearching && (
+                    <Group gap={2} wrap="nowrap" style={{ flexShrink: 0 }}>
+                      <ActionIcon
+                        variant="subtle"
+                        size="sm"
+                        disabled={isFirst}
+                        onClick={() => handleMoveUp(col.field)}
+                        aria-label={`Mover ${col.label} para cima`}
+                      >
+                        <IconArrowUp size={14} />
+                      </ActionIcon>
+                      <ActionIcon
+                        variant="subtle"
+                        size="sm"
+                        disabled={isLast}
+                        onClick={() => handleMoveDown(col.field)}
+                        aria-label={`Mover ${col.label} para baixo`}
+                      >
+                        <IconArrowDown size={14} />
+                      </ActionIcon>
+                    </Group>
+                  )}
+                </Group>
+              );
+            })}
+
+            {filteredColumns.length === 0 && (
+              <Text size="sm" c="dimmed" ta="center" py="md">
+                Nenhuma coluna encontrada
+              </Text>
+            )}
+          </Stack>
+        </ScrollArea.Autosize>
+      </Stack>
+    </Paper>
+  );
+}
+
+ArchbaseColumnSelector.displayName = 'ArchbaseColumnSelector';