@archbase/components 3.0.0

package/src/editors/ArchbaseJsonEdit.tsx

@@ -0,0 +1,257 @@
+import { JsonInput, MantineSize } from '@mantine/core';
+import { useForceUpdate } from '@mantine/hooks';
+import type { CSSProperties, FocusEventHandler } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { isBase64 } from '@archbase/core';
+import type { ArchbaseDataSource, DataSourceEvent, IArchbaseDataSourceBase } from '@archbase/data';
+import { DataSourceEventNames, useArchbaseDidUpdate, useArchbaseV1V2Compatibility } from '@archbase/data';
+import { useValidationErrors } from '@archbase/core';
+
+export interface ArchbaseJsonEditProps<T, ID> {
+	/** Fonte de dados onde será atribuido o valor do json input (V1 ou V2) */
+	dataSource?: IArchbaseDataSourceBase<T>;
+	/** Campo onde deverá ser atribuido o valor do json input na fonte de dados */
+	dataField?: string;
+	/** Indicador se o json input está desabilitado */
+	disabled?: boolean;
+	/** Indicador se o json input é somente leitura. Obs: usado em conjunto com o status da fonte de dados */
+	readOnly?: boolean;
+	/** Indicador se o preenchimento do json input é obrigatório */
+	required?: boolean;
+	/** Estilo do json input */
+	style?: CSSProperties;
+	/** Tamanho do json input */
+	size?: MantineSize;
+	/** Largura do json input */
+	width?: string | number | undefined;
+	/** Indicador se json input crescerá com o conteúdo até que maxRows sejam atingidos  */
+	autosize?: boolean;
+	/** Número mínimo de linhas obrigatórias */
+	minRows?: number;
+	/** Número máximo de linhas aceitas */
+	maxRows?: number;
+	/** Tamanho máximo em caracteres aceitos */
+	maxLength?: number;
+	/** Desabilita conversão do conteúdo em base64 antes de salvar na fonte de dados */
+	disabledBase64Convertion?: boolean;
+	/** Texto sugestão do json input */
+	placeholder?: string;
+	/** Título do json input */
+	label?: string;
+	/** Descrição do json input */
+	description?: string;
+	/** Último erro ocorrido no json input */
+	error?: string;
+	/** Evento quando o foco sai do json input */
+	onFocusExit?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+	/** Evento quando o json input recebe o foco */
+	onFocusEnter?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+	/** Evento quando o valor do json input é alterado */
+	onChangeValue?: (value: any) => void;
+	/** Referência para o componente interno */
+	innerRef?: React.RefObject<HTMLTextAreaElement> | undefined;
+}
+
+export function ArchbaseJsonEdit<T, ID>({
+	dataSource,
+	dataField,
+	disabled = false,
+	readOnly = false,
+	style,
+	placeholder,
+	label,
+	description,
+	error,
+	onFocusExit = () => {},
+	onFocusEnter = () => {},
+	onChangeValue = () => {},
+	autosize = false,
+	minRows,
+	maxRows,
+	maxLength,
+	required = false,
+	disabledBase64Convertion = false,
+	innerRef,
+}: ArchbaseJsonEditProps<T, ID>) {
+	// 🔄 MIGRAÇÃO V1/V2: Hook de compatibilidade
+	const v1v2Compatibility = useArchbaseV1V2Compatibility<string>(
+		'ArchbaseJsonEdit',
+		dataSource,
+		dataField,
+		''
+	);
+
+	// 🔄 MIGRAÇÃO V1/V2: Debug info para desenvolvimento
+	if (process.env.NODE_ENV === 'development' && dataSource) {
+	}
+
+	// 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);
+
+	const [value, setValue] = useState<string>('');
+	const innerComponentRef = innerRef || useRef<any>(null);
+	const [internalError, setInternalError] = useState<string | undefined>(error);
+	const forceUpdate = useForceUpdate();
+
+	// ❌ 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);
+	// }, [value]);
+
+	// ✅ 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 (isBase64(initialValue) && !disabledBase64Convertion) {
+			initialValue = atob(initialValue);
+		}
+
+		setValue(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();
+				// 🔄 MIGRAÇÃO V1/V2: forceUpdate apenas para V1
+				if (!v1v2Compatibility.isDataSourceV2) {
+					forceUpdate();
+				}
+			}
+
+			if (event.type === DataSourceEventNames.onFieldError && event.fieldName === dataField) {
+				setInternalError(event.error);
+				// Salvar no contexto (se disponível)
+				validationContext?.setError(fieldKey, event.error);
+			}
+		}
+	}, [v1v2Compatibility.isDataSourceV2, 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
+	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 = (value) => {
+		// ✅ 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);
+		}
+
+		setValue((_prev) => value);
+		if (dataSource && !dataSource.isBrowsing() && dataField && dataSource.getFieldValue(dataField) !== value) {
+			const valueToSave = disabledBase64Convertion ? value : btoa(value);
+			// 🔄 MIGRAÇÃO V1/V2: Usar handleValueChange do padrão de compatibilidade
+			v1v2Compatibility.handleValueChange(valueToSave);
+		}
+
+		if (onChangeValue) {
+			onChangeValue(value);
+		}
+	};
+
+	const handleOnFocusExit = (event) => {
+		if (onFocusExit) {
+			onFocusExit(event);
+		}
+	};
+
+	const handleOnFocusEnter = (event) => {
+		if (onFocusEnter) {
+			onFocusEnter(event);
+		}
+	};
+
+	const isReadOnly = () => {
+		// 🔄 MIGRAÇÃO V1/V2: Usar padrão de compatibilidade para isReadOnly
+		return readOnly || v1v2Compatibility.isReadOnly;
+	};
+
+	// Erro a ser exibido: local ou do contexto
+	const displayError = internalError || contextError;
+
+	return (
+		<JsonInput
+			disabled={disabled}
+			readOnly={isReadOnly()}
+			formatOnBlur={true}
+			style={style}
+			value={value}
+			autosize={autosize}
+			minRows={minRows}
+			maxRows={maxRows}
+			maxLength={maxLength}
+			ref={innerComponentRef}
+			required={required}
+			onChange={handleChange}
+			onBlur={handleOnFocusExit}
+			onFocus={handleOnFocusEnter}
+			placeholder={placeholder}
+			description={description}
+			label={label}
+			error={displayError}
+		/>
+	);
+}

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArchbaseKeyValueEditor.d.ts","sourceRoot":"","sources":["ArchbaseKeyValueEditor.tsx"],"names":[],"mappings":"AAeA,UAAU,2BAA2B;IACnC,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAClD,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACnC,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC5C;AAED,wBAAgB,sBAAsB,CAAC,EACrC,YAAY,EACZ,QAAkB,EAClB,UAAU,EACV,YAAiB,EACjB,gBAAgB,EAChB,aAAmB,EACnB,iBAAuB,EACvB,SAAiB,EACjB,QAAgB,EAChB,KAAK,EACL,KAAK,EACL,UAA8B,EAC9B,aAA+B,EAC/B,MAAqB,EACrB,OAAc,EACf,EAAE,2BAA2B,2CAkI7B"}

package/src/editors/ArchbaseKeyValueEditor.tsx

@@ -0,0 +1,180 @@
+import React, { useState, useEffect } from 'react'
+import {
+  TextInput,
+  Select,
+  Button,
+  Group,
+  Box,
+  Paper,
+  Input,
+  ActionIcon,
+  Tooltip,
+  Stack
+} from '@mantine/core'
+import { IconPlus, IconTrash } from '@tabler/icons-react'
+
+interface ArchbaseKeyValueEditorProps {
+  initialValue: string;
+  keyLabel?: string;
+  valueLabel?: string;
+  valueOptions?: { value: string; label: string }[];
+  onChangeKeyValue: (value: string) => void;
+  pairSeparator?: string;
+  keyValueSeparator?: string;
+  useBraces?: boolean;
+  readOnly?: boolean;
+  label?: string;
+  error?: string;
+  tooltipAdd?: string;
+  tooltipRemove?: string;
+  layout?: 'horizontal' | 'vertical';
+  spacing?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+
+export function ArchbaseKeyValueEditor({
+  initialValue,
+  keyLabel = 'Chave',
+  valueLabel,
+  valueOptions = [],
+  onChangeKeyValue,
+  pairSeparator = ';',
+  keyValueSeparator = ',',
+  useBraces = false,
+  readOnly = false,
+  label,
+  error,
+  tooltipAdd = 'Adicionar chave',
+  tooltipRemove = 'Remover chave',
+  layout = 'horizontal',
+  spacing = 'xs'
+}: ArchbaseKeyValueEditorProps) {
+  const parseInitialValue = (value) => {
+    if (!value) {
+      return []
+    }
+
+    return value.split(pairSeparator).map((pair) => {
+      const [key, val] = pair.split(keyValueSeparator)
+      return {
+        key: useBraces ? key.replace(/[{}]/g, '') : key,
+        value: val
+      }
+    })
+  }
+
+  const [pairs, setPairs] = useState(parseInitialValue(initialValue))
+
+  useEffect(() => {
+    const newPairs = parseInitialValue(initialValue)
+
+    if (JSON.stringify(newPairs) !== JSON.stringify(pairs)) {
+      setPairs(newPairs)
+    }
+  }, [initialValue, pairSeparator, keyValueSeparator, useBraces])
+
+  useEffect(() => {
+    if (onChangeKeyValue) {
+      const validPairs = pairs.filter((pair) => pair.key && pair.value)
+      const formattedString = validPairs
+        .map((pair) => {
+          const key = useBraces ? `{${pair.key}}` : pair.key
+          return `${key}${keyValueSeparator}${pair.value}`
+        })
+        .join(pairSeparator)
+
+      if (formattedString !== initialValue) {
+        onChangeKeyValue(formattedString)
+      }
+    }
+  }, [pairs, onChangeKeyValue, useBraces, pairSeparator, keyValueSeparator, initialValue])
+
+  const handleAddPair = () => {
+    const newPairs = [...pairs, { key: '', value: '' }]
+    setPairs(newPairs)
+  }
+
+  const handleRemovePair = (index) => {
+    const newPairs = pairs.filter((_, i) => i !== index)
+    setPairs(newPairs)
+  }
+
+  const handleKeyChange = (index, newKey) => {
+    const newPairs = pairs.map((pair, i) => (i === index ? { ...pair, key: newKey } : pair))
+    setPairs(newPairs)
+  }
+
+  const handleValueChange = (index, newValue) => {
+    const newPairs = pairs.map((pair, i) => (i === index ? { ...pair, value: newValue } : pair))
+    setPairs(newPairs)
+  }
+
+  const isPairIncomplete = pairs.some((pair) => !pair.key || !pair.value)
+
+  const LayoutComponent = layout === 'horizontal' ? Group : Stack;
+
+  return (
+    <Input.Wrapper label={label} error={error}>
+      <Box>
+        {pairs.map((pair, index) => (
+          <Paper key={index} withBorder shadow="md" p="sm" mb="sm">
+            <LayoutComponent align="center" wrap={layout === 'horizontal' ? 'nowrap' : 'wrap'} gap={spacing}>
+              <TextInput
+                placeholder={keyLabel}
+                value={pair.key}
+                label={keyLabel ? keyLabel : (valueLabel && layout === 'horizontal' ? " " : "")}
+                style={{ width: layout === 'vertical' ? '100%' : undefined }}
+                onChange={(e) => handleKeyChange(index, e.target.value)}
+                readOnly={readOnly}
+              />
+              {valueOptions.length > 0 ? (
+                <Select
+                  data={valueOptions}
+                  value={pair.value}
+                  label={valueLabel ? valueLabel : (keyLabel && layout === 'horizontal' ? " " : "")}
+                  style={{ width: layout === 'vertical' ? '100%' : undefined }}
+                  onChange={(val) => handleValueChange(index, val)}
+                  placeholder={valueLabel}
+                  disabled={readOnly}
+                />
+              ) : (
+                <TextInput
+                  placeholder={valueLabel}
+                  value={pair.value}
+                  label={valueLabel ? valueLabel : (keyLabel && layout === 'horizontal' ? " " : "")}
+                  style={{ width: layout === 'vertical' ? '100%' : undefined }}
+                  onChange={(e) => handleValueChange(index, e.target.value)}
+                  readOnly={readOnly}
+                />
+              )}
+              {!readOnly &&
+                <Tooltip label={tooltipRemove} withinPortal={true}>
+                  {
+                    layout === 'horizontal'
+                      ? <ActionIcon style={{ marginTop: keyLabel || valueLabel ? 25 : 0 }} color="red" variant='filled' onClick={() => handleRemovePair(index)} >
+                        <IconTrash></IconTrash>
+                      </ActionIcon>
+                      : <Button style={{ marginTop: '0px' }} color="red" variant='filled' onClick={() => handleRemovePair(index)} >
+                        <IconTrash></IconTrash>
+                        {"Remover"}
+                      </Button>
+                  }
+                </Tooltip>}
+            </LayoutComponent>
+          </Paper>
+        ))}
+        {!readOnly && (
+          <Tooltip label={tooltipAdd} withinPortal={true}>
+            <ActionIcon
+              onClick={handleAddPair}
+              color="green"
+              variant="filled"
+              disabled={isPairIncomplete}
+            >
+              <IconPlus></IconPlus>
+            </ActionIcon>
+          </Tooltip>
+        )}
+      </Box>
+    </Input.Wrapper>
+  )
+}

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArchbaseLookupEdit.d.ts","sourceRoot":"","sources":["ArchbaseLookupEdit.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,WAAW,EAA8D,MAAM,eAAe,CAAC;AAEpH,OAAO,KAAK,EAAE,aAAa,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,KAAmD,MAAM,OAAO,CAAC;AAGxE,OAAO,KAAK,EAAE,kBAAkB,EAAmB,MAAM,gBAAgB,CAAC;AAM1E,MAAM,WAAW,uBAAuB,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC;IAChD,gEAAgE;IAChE,UAAU,CAAC,EAAE,kBAAkB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACvC,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oFAAoF;IACpF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0GAA0G;IAC1G,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,+CAA+C;IAC/C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,uBAAuB;IACvB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACpC,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,gCAAgC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oDAAoD;IACpD,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,8CAA8C;IAC9C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAClE,gDAAgD;IAChD,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnE,sDAAsD;IACtD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACjD,iDAAiD;IACjD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACpC,+DAA+D;IAC/D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gDAAgD;IAChD,oBAAoB,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;IACjD,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,GAAG,SAAS,CAAC;CACzD;AAED,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAC5C,UAAU,EACV,SAAS,EACT,WAAW,EACX,UAAU,EACV,QAAgB,EAChB,QAAgB,EAChB,KAAK,EACL,WAAW,EACX,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,oBAAoB,EACpB,aAAa,EACb,cAAc,EACd,eAAe,EACf,iBAAgD,EAChD,cAAqB,EACrB,WAAsB,EACtB,YAAuB,EACvB,aAAwB,EACxB,qBAAgC,EAChC,QAAQ,GACR,EAAE,uBAAuB,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,2CA+NnC"}