@archbase/components 3.0.25 → 4.0.1

package/src/filters/index.ts

@@ -1,5 +1,7 @@
 // Componente principal
 export { ArchbaseCompositeFilters } from './ArchbaseCompositeFilters';
+export { ArchbaseColumnSelector } from './ArchbaseColumnSelector';
+export type { ArchbaseColumnSelectorProps, ArchbaseColumnItem } from './ArchbaseColumnSelector';
 
 // Componentes
 export { FilterPill } from './components/FilterPill';

package/src/forms/ArchbaseFieldArray.tsx

@@ -0,0 +1,305 @@
+import React, { forwardRef, useCallback, ReactNode } from 'react';
+import {
+  Box,
+  Button,
+  ActionIcon,
+  Group,
+  Stack,
+  Text,
+  Paper,
+  MantineColor,
+  MantineSize,
+} from '@mantine/core';
+import { IconPlus, IconTrash, IconGripVertical } from '@tabler/icons-react';
+import { useFieldArray, UseFieldArrayReturn, Control, FieldValues, ArrayPath, FieldArrayWithId } from 'react-hook-form';
+
+export interface ArchbaseFieldArrayItemProps<T extends FieldValues> {
+  /** Índice do item */
+  index: number;
+  /** Dados do item */
+  item: FieldArrayWithId<T>;
+  /** Função para remover o item */
+  remove: () => void;
+  /** Se pode remover (baseado em minItems) */
+  canRemove: boolean;
+  /** Se pode arrastar */
+  canDrag: boolean;
+  /** Props de drag handle */
+  dragHandleProps?: Record<string, any>;
+}
+
+export interface ArchbaseFieldArrayProps<T extends FieldValues> {
+  /** Nome do campo no form */
+  name: ArrayPath<T>;
+  /** Control do react-hook-form */
+  control: Control<T>;
+  /** Renderizador do item */
+  renderItem: (props: ArchbaseFieldArrayItemProps<T>) => ReactNode;
+  /** Valor padrão para novos itens */
+  defaultValue?: Record<string, any>;
+  /** Mínimo de itens */
+  minItems?: number;
+  /** Máximo de itens */
+  maxItems?: number;
+  /** Label do botão adicionar */
+  addLabel?: string;
+  /** Componente de empty state */
+  emptyState?: ReactNode;
+  /** Se permite reordenar */
+  sortable?: boolean;
+  /** Se deve mostrar o header */
+  showHeader?: boolean;
+  /** Título do campo */
+  title?: string;
+  /** Descrição do campo */
+  description?: string;
+  /** Cor do botão adicionar */
+  addButtonColor?: MantineColor;
+  /** Variante do botão adicionar */
+  addButtonVariant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default';
+  /** Tamanho */
+  size?: MantineSize;
+  /** Se deve usar Paper em volta de cada item */
+  withPaper?: boolean;
+  /** Se deve mostrar índice */
+  showIndex?: boolean;
+  /** Espaçamento entre itens */
+  gap?: MantineSize | number;
+  /** Se está desabilitado */
+  disabled?: boolean;
+  /** Callback quando array muda */
+  onArrayChange?: (items: any[]) => void;
+  /** Classe CSS */
+  className?: string;
+  /** Estilo */
+  style?: React.CSSProperties;
+}
+
+function ArchbaseFieldArrayInner<T extends FieldValues>(
+  {
+    name,
+    control,
+    renderItem,
+    defaultValue = {},
+    minItems = 0,
+    maxItems,
+    addLabel = 'Adicionar',
+    emptyState,
+    sortable = false,
+    showHeader = true,
+    title,
+    description,
+    addButtonColor = 'blue',
+    addButtonVariant = 'light',
+    size = 'sm',
+    withPaper = true,
+    showIndex = false,
+    gap = 'sm',
+    disabled = false,
+    onArrayChange,
+    className,
+    style,
+  }: ArchbaseFieldArrayProps<T>,
+  ref: React.Ref<HTMLDivElement>
+) {
+  const { fields, append, remove, move, swap } = useFieldArray({
+    control,
+    name,
+  });
+
+  const handleAdd = useCallback(() => {
+    if (maxItems && fields.length >= maxItems) return;
+    append(defaultValue as any);
+    onArrayChange?.([...fields, defaultValue]);
+  }, [append, defaultValue, fields, maxItems, onArrayChange]);
+
+  const handleRemove = useCallback(
+    (index: number) => {
+      if (fields.length <= minItems) return;
+      remove(index);
+      onArrayChange?.(fields.filter((_, i) => i !== index));
+    },
+    [fields, minItems, onArrayChange, remove]
+  );
+
+  const canAdd = !maxItems || fields.length < maxItems;
+  const canRemove = fields.length > minItems;
+
+  const DefaultEmptyState = (
+    <Paper p="xl" withBorder style={{ textAlign: 'center' }}>
+      <Text c="dimmed" size="sm">
+        Nenhum item adicionado
+      </Text>
+      <Button
+        mt="sm"
+        variant={addButtonVariant}
+        color={addButtonColor}
+        size={size}
+        leftSection={<IconPlus size={16} />}
+        onClick={handleAdd}
+        disabled={disabled || !canAdd}
+      >
+        {addLabel}
+      </Button>
+    </Paper>
+  );
+
+  return (
+    <Stack ref={ref} gap={gap} className={className} style={style}>
+      {/* Header */}
+      {showHeader && (title || description) && (
+        <Box>
+          {title && (
+            <Text fw={500} size="sm">
+              {title}
+            </Text>
+          )}
+          {description && (
+            <Text size="xs" c="dimmed">
+              {description}
+            </Text>
+          )}
+        </Box>
+      )}
+
+      {/* Items */}
+      {fields.length === 0 ? (
+        emptyState || DefaultEmptyState
+      ) : (
+        <Stack gap={gap}>
+          {fields.map((field, index) => {
+            const itemContent = (
+              <Group gap="sm" wrap="nowrap" align="flex-start">
+                {/* Drag handle */}
+                {sortable && (
+                  <ActionIcon
+                    variant="subtle"
+                    color="gray"
+                    size={size}
+                    style={{ cursor: 'grab' }}
+                    disabled={disabled}
+                  >
+                    <IconGripVertical size={16} />
+                  </ActionIcon>
+                )}
+
+                {/* Index */}
+                {showIndex && (
+                  <Text size="sm" c="dimmed" w={30} ta="center">
+                    {index + 1}
+                  </Text>
+                )}
+
+                {/* Item content */}
+                <Box style={{ flex: 1 }}>
+                  {renderItem({
+                    index,
+                    item: field,
+                    remove: () => handleRemove(index),
+                    canRemove: canRemove && !disabled,
+                    canDrag: sortable && !disabled,
+                  })}
+                </Box>
+
+                {/* Remove button */}
+                <ActionIcon
+                  variant="subtle"
+                  color="red"
+                  size={size}
+                  onClick={() => handleRemove(index)}
+                  disabled={!canRemove || disabled}
+                  title="Remover"
+                >
+                  <IconTrash size={16} />
+                </ActionIcon>
+              </Group>
+            );
+
+            return withPaper ? (
+              <Paper key={field.id} p="sm" withBorder>
+                {itemContent}
+              </Paper>
+            ) : (
+              <Box key={field.id}>{itemContent}</Box>
+            );
+          })}
+
+          {/* Add button */}
+          {canAdd && (
+            <Button
+              variant={addButtonVariant}
+              color={addButtonColor}
+              size={size}
+              leftSection={<IconPlus size={16} />}
+              onClick={handleAdd}
+              disabled={disabled}
+            >
+              {addLabel}
+            </Button>
+          )}
+        </Stack>
+      )}
+    </Stack>
+  );
+}
+
+export const ArchbaseFieldArray = forwardRef(ArchbaseFieldArrayInner) as <T extends FieldValues>(
+  props: ArchbaseFieldArrayProps<T> & { ref?: React.Ref<HTMLDivElement> }
+) => React.ReactElement;
+
+(ArchbaseFieldArray as any).displayName = 'ArchbaseFieldArray';
+
+// ================== Hook simplificado ==================
+
+export interface UseArchbaseFieldArrayOptions<T extends FieldValues> {
+  name: ArrayPath<T>;
+  control: Control<T>;
+  minItems?: number;
+  maxItems?: number;
+  defaultValue?: Record<string, any>;
+}
+
+export interface UseArchbaseFieldArrayReturn<T extends FieldValues>
+  extends UseFieldArrayReturn<T> {
+  canAdd: boolean;
+  canRemove: boolean;
+  addItem: () => void;
+  removeItem: (index: number) => void;
+}
+
+export function useArchbaseFieldArray<T extends FieldValues>(
+  options: UseArchbaseFieldArrayOptions<T>
+): UseArchbaseFieldArrayReturn<T> {
+  const { minItems = 0, maxItems, defaultValue = {} } = options;
+
+  const fieldArray = useFieldArray({
+    control: options.control,
+    name: options.name,
+  });
+
+  const canAdd = !maxItems || fieldArray.fields.length < maxItems;
+  const canRemove = fieldArray.fields.length > minItems;
+
+  const addItem = useCallback(() => {
+    if (canAdd) {
+      fieldArray.append(defaultValue as any);
+    }
+  }, [canAdd, defaultValue, fieldArray]);
+
+  const removeItem = useCallback(
+    (index: number) => {
+      if (canRemove) {
+        fieldArray.remove(index);
+      }
+    },
+    [canRemove, fieldArray]
+  );
+
+  return {
+    ...fieldArray,
+    canAdd,
+    canRemove,
+    addItem,
+    removeItem,
+  };
+}

package/src/forms/ArchbaseFormWizard.tsx

@@ -0,0 +1,284 @@
+import React, { forwardRef, ReactNode, useCallback, useMemo } from 'react';
+import {
+  Stepper,
+  Button,
+  Group,
+  Stack,
+  Paper,
+  MantineColor,
+  MantineSize,
+  Box,
+  Alert,
+  Loader,
+} from '@mantine/core';
+import { IconAlertCircle, IconCheck, IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
+import { ArchbaseDataSource } from '@archbase/data';
+import { getI18nextInstance } from '@archbase/core';
+import { useArchbaseFormWizard, FormWizardStep } from './useArchbaseFormWizard';
+
+export interface ArchbaseFormWizardStep<T = any> extends FormWizardStep<T> {
+  /** Componente React a ser renderizado no step */
+  component: ReactNode | ((props: { data: T; stepIndex: number }) => ReactNode);
+}
+
+export interface ArchbaseFormWizardProps<T extends object, ID = string> {
+  /** Lista de steps do wizard */
+  steps: ArchbaseFormWizardStep<T>[];
+  /** DataSource vinculado ao formulário */
+  dataSource?: ArchbaseDataSource<T, ID>;
+  /** Step inicial */
+  initialStep?: number;
+  /** Callback ao completar todos os steps */
+  onComplete?: (data: T) => void | Promise<void>;
+  /** Callback ao mudar de step */
+  onStepChange?: (fromStep: number, toStep: number, data: T) => void;
+  /** Se deve validar ao avançar */
+  validateOnNext?: boolean;
+  /** Se permite voltar para steps anteriores */
+  allowBack?: boolean;
+  /** Se permite clicar nos steps para navegar */
+  allowStepClick?: boolean;
+  /** Orientação do stepper */
+  orientation?: 'horizontal' | 'vertical';
+  /** Tamanho do stepper */
+  size?: MantineSize;
+  /** Cor do stepper */
+  color?: MantineColor;
+  /** Label do botão anterior */
+  backLabel?: string;
+  /** Label do botão próximo */
+  nextLabel?: string;
+  /** Label do botão finalizar */
+  completeLabel?: string;
+  /** Ícone do botão anterior */
+  backIcon?: ReactNode;
+  /** Ícone do botão próximo */
+  nextIcon?: ReactNode;
+  /** Ícone do botão finalizar */
+  completeIcon?: ReactNode;
+  /** Se deve mostrar os botões de navegação */
+  showNavigation?: boolean;
+  /** Posição dos botões de navegação */
+  navigationPosition?: 'top' | 'bottom' | 'both';
+  /** Componente de revisão final (opcional) */
+  reviewComponent?: ReactNode | ((props: { data: T }) => ReactNode);
+  /** Componente de conclusão */
+  completedComponent?: ReactNode | ((props: { data: T; onReset: () => void }) => ReactNode);
+  /** Se deve mostrar o step de revisão */
+  showReviewStep?: boolean;
+  /** Padding do conteúdo */
+  contentPadding?: number | string;
+  /** Altura mínima do conteúdo */
+  contentMinHeight?: number | string;
+  /** Classe CSS adicional */
+  className?: string;
+  /** Estilos adicionais */
+  style?: React.CSSProperties;
+}
+
+export const ArchbaseFormWizard = forwardRef<HTMLDivElement, ArchbaseFormWizardProps<any, any>>(
+  <T extends object, ID = string>(
+    {
+      steps,
+      dataSource,
+      initialStep = 0,
+      onComplete,
+      onStepChange,
+      validateOnNext = true,
+      allowBack = true,
+      allowStepClick = false,
+      orientation = 'horizontal',
+      size = 'md',
+      color,
+      backLabel,
+      nextLabel,
+      completeLabel,
+      backIcon = <IconChevronLeft size={16} />,
+      nextIcon = <IconChevronRight size={16} />,
+      completeIcon = <IconCheck size={16} />,
+      showNavigation = true,
+      navigationPosition = 'bottom',
+      reviewComponent,
+      completedComponent,
+      showReviewStep = false,
+      contentPadding = 'md',
+      contentMinHeight = 300,
+      className,
+      style,
+    }: ArchbaseFormWizardProps<T, ID>,
+    ref: React.Ref<HTMLDivElement>
+  ) => {
+    const t = getI18nextInstance().t;
+
+    const wizardSteps = useMemo(() => {
+      const baseSteps = [...steps];
+      if (showReviewStep && reviewComponent) {
+        baseSteps.push({
+          id: '__review__',
+          title: t('archbase:Revisão'),
+          description: t('archbase:Revise suas informações'),
+          component: reviewComponent,
+        });
+      }
+      return baseSteps;
+    }, [steps, showReviewStep, reviewComponent, t]);
+
+    const wizard = useArchbaseFormWizard<T, ID>({
+      steps: wizardSteps,
+      dataSource,
+      initialStep,
+      onComplete,
+      onStepChange,
+      validateOnNext,
+      allowBack,
+    });
+
+    const getData = useCallback((): T => {
+      if (dataSource) {
+        return dataSource.getCurrentRecord() as T;
+      }
+      return {} as T;
+    }, [dataSource]);
+
+    const handleStepClick = useCallback(
+      async (stepIndex: number) => {
+        if (!allowStepClick) return;
+        await wizard.goToStep(stepIndex);
+      },
+      [allowStepClick, wizard]
+    );
+
+    const renderStepContent = useCallback(
+      (step: ArchbaseFormWizardStep<T>, index: number) => {
+        if (typeof step.component === 'function') {
+          return step.component({ data: getData(), stepIndex: index });
+        }
+        return step.component;
+      },
+      [getData]
+    );
+
+    const renderNavigation = useCallback(() => {
+      if (!showNavigation) return null;
+
+      return (
+        <Group justify="space-between" mt="xl">
+          <Button
+            variant="default"
+            onClick={wizard.prevStep}
+            disabled={!wizard.canGoBack}
+            leftSection={backIcon}
+          >
+            {backLabel || t('archbase:Anterior')}
+          </Button>
+
+          {wizard.isLastStep ? (
+            <Button
+              onClick={wizard.complete}
+              loading={wizard.isValidating}
+              rightSection={completeIcon}
+              color={color}
+            >
+              {completeLabel || t('archbase:Finalizar')}
+            </Button>
+          ) : (
+            <Button
+              onClick={wizard.nextStep}
+              loading={wizard.isValidating}
+              rightSection={nextIcon}
+              color={color}
+            >
+              {nextLabel || t('archbase:Próximo')}
+            </Button>
+          )}
+        </Group>
+      );
+    }, [
+      backIcon,
+      backLabel,
+      color,
+      completeIcon,
+      completeLabel,
+      nextIcon,
+      nextLabel,
+      showNavigation,
+      t,
+      wizard,
+    ]);
+
+    const renderCompleted = useCallback(() => {
+      if (completedComponent) {
+        if (typeof completedComponent === 'function') {
+          return completedComponent({ data: getData(), onReset: wizard.reset });
+        }
+        return completedComponent;
+      }
+
+      return (
+        <Stack align="center" gap="md" py="xl">
+          <IconCheck size={64} color="var(--mantine-color-green-6)" />
+          <Box ta="center">
+            <h3>{t('archbase:Concluído!')}</h3>
+            <p>{t('archbase:Todos os passos foram completados com sucesso.')}</p>
+          </Box>
+          <Button variant="light" onClick={wizard.reset}>
+            {t('archbase:Recomeçar')}
+          </Button>
+        </Stack>
+      );
+    }, [completedComponent, getData, t, wizard.reset]);
+
+    if (wizard.isCompleted) {
+      return (
+        <Paper ref={ref} p={contentPadding} className={className} style={style}>
+          {renderCompleted()}
+        </Paper>
+      );
+    }
+
+    return (
+      <Stack ref={ref} className={className} style={style} gap="md">
+        {navigationPosition === 'top' && renderNavigation()}
+
+        <Stepper
+          active={wizard.currentStep}
+          onStepClick={allowStepClick ? handleStepClick : undefined}
+          orientation={orientation}
+          size={size}
+          color={color}
+        >
+          {wizardSteps.map((step, index) => (
+            <Stepper.Step
+              key={step.id || index}
+              label={step.title}
+              description={step.description}
+              icon={step.icon}
+              allowStepSelect={allowStepClick && wizard.isStepCompleted(index)}
+              completedIcon={wizard.isStepCompleted(index) ? <IconCheck size={16} /> : undefined}
+            >
+              <Box mih={contentMinHeight} py={contentPadding}>
+                {wizard.validationError && (
+                  <Alert
+                    icon={<IconAlertCircle size={16} />}
+                    title={t('archbase:Erro de validação')}
+                    color="red"
+                    mb="md"
+                  >
+                    {wizard.validationError}
+                  </Alert>
+                )}
+                {renderStepContent(step, index)}
+              </Box>
+            </Stepper.Step>
+          ))}
+        </Stepper>
+
+        {(navigationPosition === 'bottom' || navigationPosition === 'both') && renderNavigation()}
+      </Stack>
+    );
+  }
+) as <T extends object, ID = string>(
+  props: ArchbaseFormWizardProps<T, ID> & { ref?: React.Ref<HTMLDivElement> }
+) => React.ReactElement;
+
+(ArchbaseFormWizard as any).displayName = 'ArchbaseFormWizard';