@archbase/components 3.0.0

package/src/editors/ArchbaseEdit.example.tsx

@@ -0,0 +1,240 @@
+/**
+ * Exemplo prático: ArchbaseEdit híbrido suportando V1 e V2
+ * 
+ * Este exemplo demonstra como o mesmo componente ArchbaseEdit
+ * funciona transparentemente com ambas as versões do DataSource
+ */
+
+import React from 'react';
+import { ArchbaseEdit } from './ArchbaseEdit';
+import { ArchbaseDataSource } from '@archbase/data';
+import { ArchbaseDataSourceV2 } from '@archbase/data';
+import { ArchbaseRemoteDataSourceV2 } from '@archbase/data';
+
+interface Pessoa {
+  id: number;
+  nome: string;
+  email: string;
+  idade: number;
+}
+
+export const ArchbaseEditExamples = () => {
+  // ===== EXEMPLO 1: DataSource V1 (Comportamento Original) =====
+  const dataSourceV1 = new ArchbaseDataSource<Pessoa, number>('pessoas-v1', {
+    records: [
+      { id: 1, nome: 'João Silva', email: 'joao@test.com', idade: 30 },
+      { id: 2, nome: 'Maria Santos', email: 'maria@test.com', idade: 25 }
+    ],
+    grandTotalRecords: 2,
+    currentPage: 0,
+    totalPages: 1,
+    pageSize: 10
+  });
+
+  // ===== EXEMPLO 2: DataSource V2 (Comportamento Otimizado) =====
+  const dataSourceV2 = new ArchbaseDataSourceV2<Pessoa>({
+    name: 'pessoas-v2',
+    records: [
+      { id: 1, nome: 'João Silva V2', email: 'joao.v2@test.com', idade: 30 },
+      { id: 2, nome: 'Maria Santos V2', email: 'maria.v2@test.com', idade: 25 }
+    ]
+  });
+
+  // ===== EXEMPLO 3: RemoteDataSource V2 =====
+  // (Para este exemplo, seria necessário um serviço real)
+
+  return (
+    <div style={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: '30px' }}>
+      
+      {/* === SEÇÃO V1: Comportamento Original === */}
+      <section style={{ border: '2px solid #1976d2', padding: '20px', borderRadius: '8px' }}>
+        <h2 style={{ color: '#1976d2', marginTop: 0 }}>
+          DataSource V1 - Comportamento Original
+        </h2>
+        <p>
+          <strong>Como funciona:</strong> Force update em cada mudança de evento, 
+          listeners tradicionais, estado local do componente.
+        </p>
+        
+        <div style={{ display: 'flex', gap: '15px', flexWrap: 'wrap' }}>
+          <ArchbaseEdit<Pessoa, number>
+            label="Nome (V1)"
+            dataSource={dataSourceV1}
+            dataField="nome"
+            placeholder="Digite o nome..."
+            description="Campo usando DataSource V1"
+            onChangeValue={(value, event) => {
+              console.log('V1 - Nome alterado:', value);
+            }}
+          />
+          
+          <ArchbaseEdit<Pessoa, number>
+            label="Email (V1)"
+            dataSource={dataSourceV1}
+            dataField="email"
+            placeholder="Digite o email..."
+            description="Campo usando DataSource V1"
+            onChangeValue={(value, event) => {
+              console.log('V1 - Email alterado:', value);
+            }}
+          />
+        </div>
+        
+        <div style={{ marginTop: '10px', padding: '10px', backgroundColor: '#f5f5f5', borderRadius: '4px' }}>
+          <strong>Características V1:</strong>
+          <ul>
+            <li>Re-render com forceUpdate() em eventos</li>
+            <li>Estado local em cada componente (currentValue)</li>
+            <li>Listeners de campo específicos</li>
+            <li>Compatibilidade total com código existente</li>
+          </ul>
+        </div>
+      </section>
+
+      {/* === SEÇÃO V2: Comportamento Otimizado === */}
+      <section style={{ border: '2px solid #4caf50', padding: '20px', borderRadius: '8px' }}>
+        <h2 style={{ color: '#4caf50', marginTop: 0 }}>
+          DataSource V2 - Comportamento Otimizado com Immer
+        </h2>
+        <p>
+          <strong>Como funciona:</strong> Detecta automaticamente que é V2, 
+          usa estado otimizado, menos re-renders, imutabilidade garantida.
+        </p>
+        
+        <div style={{ display: 'flex', gap: '15px', flexWrap: 'wrap' }}>
+          <ArchbaseEdit<Pessoa, number>
+            label="Nome (V2)"
+            dataSource={dataSourceV2 as any} // TypeScript cast para compatibilidade
+            dataField="nome"
+            placeholder="Digite o nome..."
+            description="Campo usando DataSource V2 (detectado automaticamente)"
+            onChangeValue={(value, event) => {
+              console.log('V2 - Nome alterado:', value);
+            }}
+          />
+          
+          <ArchbaseEdit<Pessoa, number>
+            label="Email (V2)"
+            dataSource={dataSourceV2 as any}
+            dataField="email"
+            placeholder="Digite o email..."
+            description="Campo usando DataSource V2 (detectado automaticamente)"
+            onChangeValue={(value, event) => {
+              console.log('V2 - Email alterado:', value);
+            }}
+          />
+        </div>
+        
+        <div style={{ marginTop: '10px', padding: '10px', backgroundColor: '#e8f5e8', borderRadius: '4px' }}>
+          <strong>Vantagens V2:</strong>
+          <ul>
+            <li>✅ Detecta automaticamente V2 via duck typing</li>
+            <li>✅ Estado otimizado (v2Value) para menos re-renders</li>
+            <li>✅ Imutabilidade garantida por Immer</li>
+            <li>✅ Performance melhorada</li>
+            <li>✅ Zero breaking changes no código existente</li>
+          </ul>
+        </div>
+      </section>
+
+      {/* === SEÇÃO: Comparação Visual === */}
+      <section style={{ border: '2px solid #ff9800', padding: '20px', borderRadius: '8px' }}>
+        <h2 style={{ color: '#ff9800', marginTop: 0 }}>
+          Demonstração: Sem Breaking Changes
+        </h2>
+        
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
+          <div>
+            <h4>Código V1 (continua funcionando):</h4>
+            <pre style={{ backgroundColor: '#f5f5f5', padding: '10px', borderRadius: '4px', fontSize: '12px' }}>
+{`// Código existente - ZERO mudanças
+const dataSource = new ArchbaseDataSource('pessoas', {
+  records: pessoasList
+});
+
+return (
+  <ArchbaseEdit
+    dataSource={dataSource}
+    dataField="nome"
+    label="Nome"
+  />
+);`}
+            </pre>
+          </div>
+          
+          <div>
+            <h4>Código V2 (performance otimizada):</h4>
+            <pre style={{ backgroundColor: '#e8f5e8', padding: '10px', borderRadius: '4px', fontSize: '12px' }}>
+{`// Apenas muda o DataSource - componente igual
+const dataSource = new ArchbaseDataSourceV2({
+  name: 'pessoas',
+  records: pessoasList
+});
+
+return (
+  <ArchbaseEdit
+    dataSource={dataSource}  // ← Detecta V2 automaticamente
+    dataField="nome"
+    label="Nome"
+  />
+);`}
+            </pre>
+          </div>
+        </div>
+        
+        <div style={{ marginTop: '15px', padding: '15px', backgroundColor: '#fff3e0', borderRadius: '4px' }}>
+          <strong>🎯 Estratégia de Detecção:</strong>
+          <pre style={{ margin: '10px 0', fontSize: '12px' }}>
+{`// Detecção automática via duck typing
+const isDataSourceV2 = dataSource && (
+  'appendToFieldArray' in dataSource || 
+  'updateFieldArrayItem' in dataSource
+);
+
+// Comportamento condicional transparente
+if (isDataSourceV2) {
+  // Usa estado otimizado V2
+  setV2Value(changedValue);
+} else {
+  // Mantém comportamento V1 original
+  setCurrentValue(changedValue);
+  forceUpdate();
+}`}
+          </pre>
+        </div>
+      </section>
+
+      {/* === SEÇÃO: Debug/Monitoramento === */}
+      <section style={{ border: '2px solid #9c27b0', padding: '20px', borderRadius: '8px' }}>
+        <h2 style={{ color: '#9c27b0', marginTop: 0 }}>
+          Debug: Monitoramento em Tempo Real
+        </h2>
+        
+        <div style={{ display: 'flex', gap: '20px' }}>
+          <div style={{ flex: 1 }}>
+            <h4>DataSource V1 Status:</h4>
+            <ul style={{ fontSize: '14px' }}>
+              <li>Records: {dataSourceV1.getTotalRecords()}</li>
+              <li>Current Index: {dataSourceV1.getCurrentIndex()}</li>
+              <li>State: {dataSourceV1.isBrowsing() ? 'Browsing' : dataSourceV1.isEditing() ? 'Editing' : 'Inserting'}</li>
+              <li>Current Record: {JSON.stringify(dataSourceV1.getCurrentRecord()?.nome || 'N/A')}</li>
+            </ul>
+          </div>
+          
+          <div style={{ flex: 1 }}>
+            <h4>DataSource V2 Status:</h4>
+            <ul style={{ fontSize: '14px' }}>
+              <li>Records: {dataSourceV2.getTotalRecords()}</li>
+              <li>Current Index: {dataSourceV2.getCurrentIndex()}</li>
+              <li>State: {dataSourceV2.isBrowsing() ? 'Browsing' : dataSourceV2.isEditing() ? 'Editing' : 'Inserting'}</li>
+              <li>Current Record: {JSON.stringify(dataSourceV2.getCurrentRecord()?.nome || 'N/A')}</li>
+              <li><strong>✨ V2 Features:</strong> Array ops, Immer, Optimized</li>
+            </ul>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default ArchbaseEditExamples;

package/src/editors/ArchbaseEdit.tsx

@@ -0,0 +1,325 @@
+/**
+ * ArchbaseEdit — input texto integrado ao DataSource (v1/v2) com suporte a validação e estado controlado.
+ * @status stable
+ */
+import {
+	ActionIcon,
+	ActionIconVariant,
+	MantineSize,
+	TextInput,
+	Tooltip,
+	useMantineColorScheme,
+	useMantineTheme,
+} from '@mantine/core';
+import { useForceUpdate } from '@mantine/hooks';
+import type { CSSProperties, FocusEventHandler, ReactNode } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import type { ArchbaseDataSource, DataSourceEvent, IArchbaseDataSourceBase } from '@archbase/data';
+import { DataSourceEventNames } from '@archbase/data';
+import { useArchbaseDidUpdate } from '@archbase/data';
+import { useValidationErrors } from '@archbase/core';
+
+export interface ArchbaseEditProps<T, ID> {
+	/** Fonte de dados onde será atribuido o valor do edit (V1 ou V2) */
+	dataSource?: IArchbaseDataSourceBase<T>;
+	/** Campo onde deverá ser atribuido o valor do edit na fonte de dados */
+	dataField?: string;
+	/** Indicador se o edit está desabilitado */
+	disabled?: boolean;
+	/** Indicador se o edit é somente leitura. Obs: usado em conjunto com o status da fonte de dados */
+	readOnly?: boolean;
+	/** Indicador se o preenchimento do edit é obrigatório */
+	required?: boolean;
+	/** Valor inicial */
+	value?: string;
+	/** Estilo do edit */
+	style?: CSSProperties;
+	/** Tamanho do edit */
+	size?: MantineSize;
+	/** Largura do edit */
+	width?: string | number | undefined;
+	/** Icone à direita */
+	icon?: ReactNode;
+	/** Dica para botão localizar */
+	tooltipIconSearch?: ReactNode;
+	/** Evento ocorre quando clica no botão localizar */
+	onActionSearchExecute?: () => void;
+	/** Texto sugestão do edit */
+	placeholder?: string;
+	/** Título do edit */
+	label?: string;
+	/** Descrição do edit */
+	description?: string;
+	/** Último erro ocorrido no edit */
+	error?: string;
+	/** Evento quando o foco sai do edit */
+	onFocusExit?: FocusEventHandler<T> | undefined;
+	/** Evento quando o edit recebe o foco */
+	onFocusEnter?: FocusEventHandler<T> | undefined;
+	/** Evento quando o valor do edit é alterado */
+	onChangeValue?: (value: any, event: any) => void;
+	onKeyDown?: (event: any) => void;
+	onKeyUp?: (event: any) => void;
+	/** Referência para o componente interno */
+	innerRef?: React.RefObject<HTMLInputElement> | undefined;
+	variant?: ActionIconVariant;
+	minLength?: number;
+	maxLength?: number;
+}
+
+export function ArchbaseEdit<T, ID>({
+	dataSource,
+	dataField,
+	disabled = false,
+	readOnly = false,
+	style,
+	placeholder,
+	label,
+	description,
+	error,
+	required,
+	size,
+	width,
+	innerRef,
+	value,
+	icon,
+	onKeyDown,
+	onKeyUp,
+	onActionSearchExecute,
+	tooltipIconSearch = 'Clique aqui para Localizar',
+	onFocusExit = () => {},
+	onFocusEnter = () => {},
+	onChangeValue = () => {},
+	variant,
+	minLength,
+	maxLength
+}: ArchbaseEditProps<T, ID>) {
+	const [currentValue, setCurrentValue] = useState<string>(value || '');
+	const innerComponentRef = useRef<any>(null);
+	const theme = useMantineTheme();
+	const { colorScheme } = useMantineColorScheme();
+	const [internalError, setInternalError] = useState<string | undefined>(error);
+	const forceUpdate = useForceUpdate();
+
+	// Contexto de validação (opcional - pode não existir)
+	const validationContext = useValidationErrors();
+
+	// Chave única para o field
+	const fieldKey = `${dataField}`;
+
+	// Recuperar erro do contexto se existir
+	const contextError = validationContext?.getError(fieldKey);
+
+	// Detecta automaticamente se é DataSource V2
+	const isDataSourceV2 = dataSource && ('appendToFieldArray' in dataSource || 'updateFieldArrayItem' in dataSource);
+
+	// Para V2: estado otimizado (sem re-renders desnecessários)
+	const [v2Value, setV2Value] = useState<string>('');
+	const [v2ShouldUpdate, setV2ShouldUpdate] = useState(0);
+
+	// ❌ REMOVIDO: Não limpar erro automaticamente quando valor muda
+	// O erro deve ser limpo apenas quando o usuário EDITA o campo (no handleChange)
+	// useEffect(() => {
+	// 	setInternalError(undefined);
+	// }, [currentValue]);
+
+	// ✅ CORRIGIDO: Apenas atualizar se o prop error vier definido
+	// Não limpar o internalError se o prop error for undefined
+	useEffect(() => {
+		if (error !== undefined && error !== internalError) {
+			setInternalError(error);
+		}
+	}, [error]);
+
+	const loadDataSourceFieldValue = () => {
+		let initialValue: any = value || '';
+
+		if (dataSource && dataField) {
+			initialValue = dataSource.getFieldValue(dataField);
+			if (!initialValue) {
+				initialValue = '';
+			}
+		}
+
+		if (isDataSourceV2) {
+			// V2: Update otimizado
+			setV2Value(initialValue);
+			setV2ShouldUpdate(prev => prev + 1);
+		} else {
+			// V1: Comportamento original
+			setCurrentValue(initialValue);
+		}
+	};
+
+	const fieldChangedListener = useCallback(() => {
+		loadDataSourceFieldValue();
+	}, []);
+
+	const dataSourceEvent = useCallback((event: DataSourceEvent<T>) => {
+		if (dataSource && dataField) {
+			if (
+				event.type === DataSourceEventNames.dataChanged ||
+				event.type === DataSourceEventNames.recordChanged ||
+				event.type === DataSourceEventNames.afterScroll ||
+				event.type === DataSourceEventNames.afterCancel ||
+				event.type === DataSourceEventNames.afterEdit
+			) {
+				loadDataSourceFieldValue();
+				if (!isDataSourceV2) {
+					// V1: Força re-render (comportamento original)
+					forceUpdate();
+				}
+				// V2: Re-render automático via estado otimizado
+			}
+
+			if (event.type === DataSourceEventNames.onFieldError && event.fieldName === dataField) {
+				setInternalError(event.error);
+				// Salvar no contexto (se disponível)
+				validationContext?.setError(fieldKey, event.error);
+				// Força re-render para garantir que o erro seja exibido
+				if (!isDataSourceV2) {
+					forceUpdate();
+				}
+			}
+		}
+	}, [isDataSourceV2, dataSource, dataField, loadDataSourceFieldValue, forceUpdate, validationContext, fieldKey]);
+
+	// Ref para manter callback sempre atualizado (corrige problema de closure desatualizada)
+	const dataSourceEventRef = useRef(dataSourceEvent);
+	useEffect(() => {
+		dataSourceEventRef.current = dataSourceEvent;
+	}, [dataSourceEvent]);
+
+	// Wrapper estável que delega para ref - nunca muda, então o listener permanece consistente
+	const stableDataSourceEvent = useCallback((event: DataSourceEvent<T>) => {
+		dataSourceEventRef.current(event);
+	}, []);
+
+	// Registrar listeners com cleanup apropriado
+	useEffect(() => {
+		loadDataSourceFieldValue();
+		if (dataSource && dataField) {
+			const hasFieldListener = typeof (dataSource as any).addFieldChangeListener === 'function';
+			dataSource.addListener(stableDataSourceEvent);
+			if (hasFieldListener) {
+				(dataSource as any).addFieldChangeListener(dataField, fieldChangedListener);
+			}
+
+			return () => {
+				dataSource.removeListener(stableDataSourceEvent);
+				if (hasFieldListener) {
+					(dataSource as any).removeFieldChangeListener(dataField, fieldChangedListener);
+				}
+			};
+		}
+	}, [dataSource, dataField, stableDataSourceEvent, fieldChangedListener]);
+
+	useArchbaseDidUpdate(() => {
+		loadDataSourceFieldValue();
+	}, []);
+
+	const handleChange = (event) => {
+		event.preventDefault();
+		const changedValue = event.target.value;
+
+		event.persist();
+
+		// ✅ Limpa erro quando usuário edita o campo (tanto do estado local quanto do contexto)
+		const hasError = internalError || contextError;
+		if (hasError) {
+			setInternalError(undefined);
+			validationContext?.clearError(fieldKey);
+		}
+
+		if (isDataSourceV2) {
+			// V2: Otimizado com menos re-renders
+			setV2Value(changedValue);
+			if (dataSource && !dataSource.isBrowsing() && dataField && dataSource.getFieldValue(dataField) !== changedValue) {
+				dataSource.setFieldValue(dataField, changedValue);
+			}
+		} else {
+			// V1: Comportamento original mantido
+			setCurrentValue((_prev) => changedValue);
+			if (dataSource && !dataSource.isBrowsing() && dataField && dataSource.getFieldValue(dataField) !== changedValue) {
+				dataSource.setFieldValue(dataField, changedValue);
+			}
+		}
+
+		if (onChangeValue) {
+			onChangeValue(changedValue, event);
+		}
+	};
+
+	// Cleanup agora é feito no useEffect acima (return function)
+
+	const handleOnFocusExit = (event) => {
+		if (onFocusExit) {
+			onFocusExit(event);
+		}
+	};
+
+	const handleOnFocusEnter = (event) => {
+		if (onFocusEnter) {
+			onFocusEnter(event);
+		}
+	};
+
+	const isReadOnly = () => {
+		let tmpReadOnly = readOnly;
+		if (dataSource && !readOnly) {
+			tmpReadOnly = dataSource.isBrowsing();
+		}
+		return tmpReadOnly;
+	};
+
+	// Erro a ser exibido: local ou do contexto
+	const displayError = internalError || contextError;
+
+	return (
+		<TextInput
+			disabled={disabled}
+			readOnly={isReadOnly()}
+			type={'text'}
+			size={size!}
+			style={{
+				width,
+				...style,
+			}}
+			value={isDataSourceV2 ? v2Value : currentValue}
+			ref={innerRef || innerComponentRef}
+			required={required}
+			onChange={handleChange}
+			onBlur={handleOnFocusExit}
+			onFocus={handleOnFocusEnter}
+			placeholder={placeholder}
+			description={description}
+			onKeyDown={onKeyDown}
+			onKeyUp={onKeyUp}
+			label={label}
+			error={displayError}
+			minLength={minLength}
+			maxLength={maxLength}
+			rightSection={
+				onActionSearchExecute ? (
+					<Tooltip withinPortal withArrow label={tooltipIconSearch}>
+						<ActionIcon
+							style={{
+								backgroundColor:
+									variant === 'filled'
+										? colorScheme === 'dark'
+											? theme.colors[theme.primaryColor][5]
+											: theme.colors[theme.primaryColor][6]
+										: undefined,
+							}}
+							tabIndex={-1}
+							variant={variant}
+							onClick={onActionSearchExecute}
+						>
+							{icon}
+						</ActionIcon>
+					</Tooltip>
+				) : null
+			}
+		/>
+	);
+}

package/src/editors/ArchbaseFileAttachment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArchbaseFileAttachment.d.ts","sourceRoot":"","sources":["ArchbaseFileAttachment.tsx"],"names":[],"mappings":"AAcA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,2BAA2B;IAC1C,WAAW,EAAE,UAAU,EAAE,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,eAAe,EAAE,CAAC,aAAa,EAAE,UAAU,KAAK,IAAI,CAAA;IACpD,kBAAkB,EAAE,CAAC,iBAAiB,EAAE,UAAU,KAAK,IAAI,CAAA;IAC3D,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB;AA8BD,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAoMxE,CAAA"}