@archbase/components 3.0.25 → 4.0.1

package/src/forms/ArchbaseStepper.tsx

@@ -0,0 +1,137 @@
+import React, { forwardRef, ReactNode, useState, useCallback } from 'react';
+import {
+  Stepper,
+  StepperProps,
+  StepperStepProps,
+  Button,
+  Group,
+  MantineColor,
+  MantineSize,
+} from '@mantine/core';
+import { getI18nextInstance } from '@archbase/core';
+
+export interface ArchbaseStepperStep {
+  /** Identificador único do step */
+  id?: string;
+  /** Título do step */
+  title: string;
+  /** Descrição do step */
+  description?: string;
+  /** Ícone do step */
+  icon?: ReactNode;
+  /** Cor do step quando ativo */
+  color?: MantineColor;
+  /** Se o step pode ser clicado para navegar diretamente */
+  allowStepSelect?: boolean;
+  /** Se o step está desabilitado */
+  disabled?: boolean;
+  /** Conteúdo do step */
+  children?: ReactNode;
+  /** Estado de carregamento do step */
+  loading?: boolean;
+}
+
+export interface ArchbaseStepperProps extends Omit<StepperProps, 'children' | 'active' | 'onStepClick'> {
+  /** Lista de steps */
+  steps: ArchbaseStepperStep[];
+  /** Step ativo (controlado) */
+  active?: number;
+  /** Step ativo inicial (não controlado) */
+  defaultActive?: number;
+  /** Callback quando o step muda */
+  onStepChange?: (nextStep: number, prevStep: number) => void;
+  /** 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;
+  /** Ícone de step completado */
+  completedIcon?: ReactNode;
+  /** Ícone de step em progresso */
+  progressIcon?: ReactNode;
+  /** Raio do ícone do step */
+  iconSize?: number;
+  /** Estilo do conector entre steps */
+  contentPadding?: number;
+  /** Se deve mostrar a barra de progresso */
+  withProgress?: boolean;
+}
+
+export const ArchbaseStepper = forwardRef<HTMLDivElement, ArchbaseStepperProps>(
+  (
+    {
+      steps,
+      active: controlledActive,
+      defaultActive = 0,
+      onStepChange,
+      allowStepClick = false,
+      orientation = 'horizontal',
+      size = 'md',
+      color,
+      completedIcon,
+      progressIcon,
+      iconSize,
+      contentPadding,
+      withProgress = false,
+      ...rest
+    },
+    ref
+  ) => {
+    const [uncontrolledActive, setUncontrolledActive] = useState(defaultActive);
+    const active = controlledActive !== undefined ? controlledActive : uncontrolledActive;
+
+    const handleStepClick = useCallback(
+      (stepIndex: number) => {
+        if (!allowStepClick) return;
+
+        const step = steps[stepIndex];
+        if (step?.disabled || step?.allowStepSelect === false) return;
+
+        const prevStep = active;
+        if (controlledActive === undefined) {
+          setUncontrolledActive(stepIndex);
+        }
+        onStepChange?.(stepIndex, prevStep);
+      },
+      [active, allowStepClick, controlledActive, onStepChange, steps]
+    );
+
+    return (
+      <Stepper
+        ref={ref}
+        active={active}
+        onStepClick={allowStepClick ? handleStepClick : undefined}
+        orientation={orientation}
+        size={size}
+        color={color}
+        completedIcon={completedIcon}
+        progressIcon={progressIcon}
+        iconSize={iconSize}
+        contentPadding={contentPadding}
+        {...rest}
+      >
+        {steps.map((step, index) => (
+          <Stepper.Step
+            key={step.id || index}
+            label={step.title}
+            description={step.description}
+            icon={step.icon}
+            color={step.color}
+            allowStepSelect={step.allowStepSelect ?? allowStepClick}
+            loading={step.loading}
+          >
+            {step.children}
+          </Stepper.Step>
+        ))}
+        <Stepper.Completed>
+          {getI18nextInstance().t('archbase:Todos os passos foram concluídos!')}
+        </Stepper.Completed>
+      </Stepper>
+    );
+  }
+);
+
+ArchbaseStepper.displayName = 'ArchbaseStepper';

package/src/forms/index.ts

@@ -1,4 +1,26 @@
-// Form Components - TODO: Implement
+// Form Components
 export { Button as ArchbaseButton } from '@mantine/core';
 export { ActionIcon as ArchbaseActionIcon } from '@mantine/core';
-export { Fieldset as ArchbaseFieldset } from '@mantine/core';
+export { Fieldset as ArchbaseFieldset } from '@mantine/core';
+
+// Stepper & Form Wizard
+export { ArchbaseStepper } from './ArchbaseStepper';
+export type { ArchbaseStepperProps, ArchbaseStepperStep } from './ArchbaseStepper';
+
+export { ArchbaseFormWizard } from './ArchbaseFormWizard';
+export type { ArchbaseFormWizardProps, ArchbaseFormWizardStep } from './ArchbaseFormWizard';
+
+export { useArchbaseFormWizard } from './useArchbaseFormWizard';
+export type {
+  FormWizardStep,
+  UseArchbaseFormWizardOptions,
+  UseArchbaseFormWizardReturn,
+} from './useArchbaseFormWizard';
+
+export { ArchbaseFieldArray, useArchbaseFieldArray } from './ArchbaseFieldArray';
+export type {
+  ArchbaseFieldArrayProps,
+  ArchbaseFieldArrayItemProps,
+  UseArchbaseFieldArrayOptions,
+  UseArchbaseFieldArrayReturn,
+} from './ArchbaseFieldArray';

package/src/forms/useArchbaseFormWizard.ts

@@ -0,0 +1,283 @@
+import { useState, useCallback, useMemo } from 'react';
+import { ArchbaseDataSource } from '@archbase/data';
+
+export interface FormWizardStep<T = any> {
+  /** Identificador único do step */
+  id: string;
+  /** Título do step */
+  title: string;
+  /** Descrição do step */
+  description?: string;
+  /** Ícone do step */
+  icon?: React.ReactNode;
+  /** Função de validação do step - retorna true se válido, string com erro se inválido */
+  validate?: (data: T) => boolean | string | Promise<boolean | string>;
+  /** Se o step é opcional */
+  optional?: boolean;
+  /** Campos do DataSource que pertencem a este step (para validação parcial) */
+  fields?: string[];
+}
+
+export interface UseArchbaseFormWizardOptions<T extends object, ID> {
+  /** Lista de steps do wizard */
+  steps: FormWizardStep<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 pular steps opcionais */
+  allowSkipOptional?: boolean;
+}
+
+export interface UseArchbaseFormWizardReturn<T> {
+  /** Step atual (0-indexed) */
+  currentStep: number;
+  /** Total de steps */
+  totalSteps: number;
+  /** Se está no primeiro step */
+  isFirstStep: boolean;
+  /** Se está no último step */
+  isLastStep: boolean;
+  /** Se o wizard foi completado */
+  isCompleted: boolean;
+  /** Se está validando */
+  isValidating: boolean;
+  /** Erro de validação do step atual */
+  validationError: string | null;
+  /** Dados do step atual */
+  currentStepData: FormWizardStep<T>;
+  /** Steps completados */
+  completedSteps: Set<number>;
+  /** Avançar para o próximo step */
+  nextStep: () => Promise<boolean>;
+  /** Voltar para o step anterior */
+  prevStep: () => void;
+  /** Ir para um step específico */
+  goToStep: (step: number) => Promise<boolean>;
+  /** Resetar o wizard */
+  reset: () => void;
+  /** Completar o wizard */
+  complete: () => Promise<boolean>;
+  /** Marcar step como completado */
+  markStepCompleted: (step: number) => void;
+  /** Verificar se um step está completado */
+  isStepCompleted: (step: number) => boolean;
+  /** Verificar se pode avançar */
+  canGoNext: boolean;
+  /** Verificar se pode voltar */
+  canGoBack: boolean;
+}
+
+export function useArchbaseFormWizard<T extends object, ID = string>(
+  options: UseArchbaseFormWizardOptions<T, ID>
+): UseArchbaseFormWizardReturn<T> {
+  const {
+    steps,
+    dataSource,
+    initialStep = 0,
+    onComplete,
+    onStepChange,
+    validateOnNext = true,
+    allowBack = true,
+    allowSkipOptional = false,
+  } = options;
+
+  const [currentStep, setCurrentStep] = useState(initialStep);
+  const [isCompleted, setIsCompleted] = useState(false);
+  const [isValidating, setIsValidating] = useState(false);
+  const [validationError, setValidationError] = useState<string | null>(null);
+  const [completedSteps, setCompletedSteps] = useState<Set<number>>(new Set());
+
+  const totalSteps = steps.length;
+  const isFirstStep = currentStep === 0;
+  const isLastStep = currentStep === totalSteps - 1;
+  const currentStepData = steps[currentStep];
+
+  const getData = useCallback((): T => {
+    if (dataSource) {
+      return dataSource.getCurrentRecord() as T;
+    }
+    return {} as T;
+  }, [dataSource]);
+
+  const validateCurrentStep = useCallback(async (): Promise<boolean> => {
+    const step = steps[currentStep];
+    if (!step.validate) return true;
+
+    setIsValidating(true);
+    setValidationError(null);
+
+    try {
+      const result = await step.validate(getData());
+
+      if (result === true) {
+        return true;
+      } else if (typeof result === 'string') {
+        setValidationError(result);
+        return false;
+      } else {
+        return false;
+      }
+    } catch (error) {
+      setValidationError(error instanceof Error ? error.message : 'Erro de validação');
+      return false;
+    } finally {
+      setIsValidating(false);
+    }
+  }, [currentStep, getData, steps]);
+
+  const markStepCompleted = useCallback((step: number) => {
+    setCompletedSteps((prev) => new Set([...prev, step]));
+  }, []);
+
+  const isStepCompleted = useCallback(
+    (step: number) => completedSteps.has(step),
+    [completedSteps]
+  );
+
+  const nextStep = useCallback(async (): Promise<boolean> => {
+    if (isLastStep) return false;
+
+    if (validateOnNext) {
+      const isValid = await validateCurrentStep();
+      if (!isValid) return false;
+    }
+
+    markStepCompleted(currentStep);
+    const nextStepIndex = currentStep + 1;
+
+    onStepChange?.(currentStep, nextStepIndex, getData());
+    setCurrentStep(nextStepIndex);
+    setValidationError(null);
+
+    return true;
+  }, [
+    currentStep,
+    getData,
+    isLastStep,
+    markStepCompleted,
+    onStepChange,
+    validateCurrentStep,
+    validateOnNext,
+  ]);
+
+  const prevStep = useCallback(() => {
+    if (isFirstStep || !allowBack) return;
+
+    const prevStepIndex = currentStep - 1;
+    onStepChange?.(currentStep, prevStepIndex, getData());
+    setCurrentStep(prevStepIndex);
+    setValidationError(null);
+  }, [allowBack, currentStep, getData, isFirstStep, onStepChange]);
+
+  const goToStep = useCallback(
+    async (step: number): Promise<boolean> => {
+      if (step < 0 || step >= totalSteps) return false;
+      if (step === currentStep) return true;
+
+      // Se está indo para frente, valida o step atual
+      if (step > currentStep && validateOnNext) {
+        const isValid = await validateCurrentStep();
+        if (!isValid) return false;
+        markStepCompleted(currentStep);
+      }
+
+      // Verifica se pode ir para o step destino
+      // Pode ir para qualquer step já completado ou o próximo não completado
+      if (step > currentStep) {
+        // Verificar se todos os steps anteriores ao destino estão completos
+        for (let i = currentStep; i < step; i++) {
+          if (!completedSteps.has(i) && !steps[i].optional) {
+            return false;
+          }
+        }
+      }
+
+      onStepChange?.(currentStep, step, getData());
+      setCurrentStep(step);
+      setValidationError(null);
+
+      return true;
+    },
+    [
+      completedSteps,
+      currentStep,
+      getData,
+      markStepCompleted,
+      onStepChange,
+      steps,
+      totalSteps,
+      validateCurrentStep,
+      validateOnNext,
+    ]
+  );
+
+  const complete = useCallback(async (): Promise<boolean> => {
+    if (validateOnNext) {
+      const isValid = await validateCurrentStep();
+      if (!isValid) return false;
+    }
+
+    markStepCompleted(currentStep);
+    setIsCompleted(true);
+
+    if (onComplete) {
+      try {
+        await onComplete(getData());
+      } catch (error) {
+        setValidationError(error instanceof Error ? error.message : 'Erro ao completar');
+        return false;
+      }
+    }
+
+    return true;
+  }, [currentStep, getData, markStepCompleted, onComplete, validateCurrentStep, validateOnNext]);
+
+  const reset = useCallback(() => {
+    setCurrentStep(initialStep);
+    setIsCompleted(false);
+    setValidationError(null);
+    setCompletedSteps(new Set());
+  }, [initialStep]);
+
+  const canGoNext = useMemo(() => {
+    if (isLastStep) return false;
+    if (isValidating) return false;
+    return true;
+  }, [isLastStep, isValidating]);
+
+  const canGoBack = useMemo(() => {
+    if (isFirstStep) return false;
+    if (!allowBack) return false;
+    return true;
+  }, [allowBack, isFirstStep]);
+
+  return {
+    currentStep,
+    totalSteps,
+    isFirstStep,
+    isLastStep,
+    isCompleted,
+    isValidating,
+    validationError,
+    currentStepData,
+    completedSteps,
+    nextStep,
+    prevStep,
+    goToStep,
+    reset,
+    complete,
+    markStepCompleted,
+    isStepCompleted,
+    canGoNext,
+    canGoBack,
+  };
+}

package/src/hooks/index.ts

@@ -3,3 +3,15 @@ export { useArchbaseVisible } from './useArchbaseVisible';
 export { useArchbaseNavigateParams } from './useArchbaseNavigateParams';
 export { useArchbaseContainerDimensions } from './useArchbaseContainerDimensions';
 export { useArchbaseElementSizeArea } from './useArchbaseElementSizeArea';
+
+export {
+  useArchbaseConfirm,
+  archbaseConfirm,
+  archbaseConfirmDelete,
+  archbaseAlert,
+} from './useArchbaseConfirm';
+export type {
+  ArchbaseConfirmOptions,
+  ArchbaseDeleteConfirmOptions,
+  UseArchbaseConfirmReturn,
+} from './useArchbaseConfirm';