@archbase/components 4.0.41 → 4.0.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archbase/components",
-  "version": "4.0.41",
+  "version": "4.0.42",
   "description": "UI Components for Archbase React v3 - Form editors, data visualization, and business components",
   "author": "Edson Martins <edsonmartins2005@gmail.com>",
   "license": "MIT",
@@ -118,9 +118,9 @@
     "vis-timeline": "^7.7.3",
     "xlsx": "^0.18.5",
     "yet-another-react-lightbox": "^3.21.0",
-    "@archbase/core": "4.0.41",
-    "@archbase/data": "4.0.41",
-    "@archbase/layout": "4.0.41"
+    "@archbase/core": "4.0.42",
+    "@archbase/data": "4.0.42",
+    "@archbase/layout": "4.0.42"
   },
   "devDependencies": {
     "@types/d3": "^7.4.3",

package/src/editors/ArchbasePasswordEdit.tsx

@@ -9,12 +9,17 @@ import {
 } from '@mantine/core';
 import { useForceUpdate } from '@mantine/hooks';
 import type { CSSProperties, FocusEventHandler, ReactNode } from 'react';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { ArchbaseDataSource, DataSourceEvent, IArchbaseDataSourceBase } from '@archbase/data';
 import { DataSourceEventNames } from '@archbase/data';
 import { useArchbaseDidUpdate } from '@archbase/data';
 import { useArchbaseV1V2Compatibility } from '@archbase/data';
-import { useValidationErrors } from '@archbase/core';
+import type {
+	ArchbasePasswordPolicy,
+	ArchbasePasswordValidationResult,
+} from '@archbase/core';
+import { resolveArchbasePasswordPolicy, useValidationErrors, validateArchbasePassword } from '@archbase/core';
+import { ArchbasePasswordStrengthMeter } from './ArchbasePasswordStrengthMeter';
 
 export interface ArchbasePasswordEditProps<T, ID> {
 	/** Fonte de dados onde será atribuido o valor do edit (V1 ou V2) */
@@ -54,6 +59,24 @@ export interface ArchbasePasswordEditProps<T, ID> {
 	/** Referência para o componente interno */
 	innerRef?: React.RefObject<HTMLInputElement> | undefined;
 	variant?: InputVariant;
+	/**
+	 * Critérios de senha forte aplicados como pré-validação no próprio componente.
+	 * `true` aplica a política padrão do Archbase; um objeto permite ajustar cada critério.
+	 * Quando ausente nenhuma validação de força é feita (comportamento original).
+	 */
+	passwordPolicy?: ArchbasePasswordPolicy | boolean;
+	/** Indicador se a lista de critérios deve ser exibida. Padrão: true quando há política */
+	showPasswordRequirements?: boolean;
+	/** Indicador se a barra de força deve ser exibida. Padrão: true quando há política */
+	showPasswordStrengthBar?: boolean;
+	/**
+	 * Quando os critérios ficam visíveis:
+	 * `onFocus` (padrão) enquanto o campo tem foco ou está inválido,
+	 * `always` sempre, `whenInvalid` somente quando algum critério falha.
+	 */
+	passwordRequirementsVisibility?: 'always' | 'onFocus' | 'whenInvalid';
+	/** Evento disparado a cada mudança no resultado da pré-validação */
+	onPasswordValidation?: (result: ArchbasePasswordValidationResult) => void;
 }
 
 export function ArchbasePasswordEdit<T, ID>({
@@ -77,6 +100,11 @@ export function ArchbasePasswordEdit<T, ID>({
 	onFocusEnter = () => {},
 	onChangeValue = () => {},
 	variant,
+	passwordPolicy,
+	showPasswordRequirements = true,
+	showPasswordStrengthBar = true,
+	passwordRequirementsVisibility = 'onFocus',
+	onPasswordValidation,
 }: ArchbasePasswordEditProps<T, ID>) {
 	// 🔄 MIGRAÇÃO V1/V2: Hook de compatibilidade
 	const v1v2Compatibility = useArchbaseV1V2Compatibility<string>(
@@ -105,6 +133,22 @@ export function ArchbasePasswordEdit<T, ID>({
 	const [internalError, setInternalError] = useState<string | undefined>(error);
 	const forceUpdate = useForceUpdate();
 
+	// Pré-validação de senha forte: só entra em ação quando uma política é informada.
+	const resolvedPolicy = useMemo(() => resolveArchbasePasswordPolicy(passwordPolicy), [passwordPolicy]);
+	const [isFocused, setIsFocused] = useState<boolean>(false);
+	const [policyError, setPolicyError] = useState<string | undefined>(undefined);
+
+	const policyResult = useMemo(
+		() => (resolvedPolicy ? validateArchbasePassword(currentValue, resolvedPolicy) : undefined),
+		[currentValue, resolvedPolicy]
+	);
+
+	useEffect(() => {
+		if (policyResult && onPasswordValidation) {
+			onPasswordValidation(policyResult);
+		}
+	}, [policyResult]);
+
 	// ❌ 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(() => {
@@ -208,6 +252,11 @@ useEffect(() => {
 			validationContext?.clearError(fieldKey);
 		}
 
+		// O erro de política reaparece no blur; enquanto digita o feedback fica na lista de critérios.
+		if (policyError) {
+			setPolicyError(undefined);
+		}
+
 		setCurrentValue((_prev) => changedValue);
 
 		if (dataSource && !dataSource.isBrowsing() && dataField && dataSource.getFieldValue(dataField) !== changedValue) {
@@ -221,12 +270,18 @@ useEffect(() => {
 	};
 
 	const handleOnFocusExit = (event) => {
+		setIsFocused(false);
+		// Só acusa erro depois que o usuário terminou de digitar e o campo tem conteúdo.
+		if (policyResult && currentValue) {
+			setPolicyError(policyResult.error);
+		}
 		if (onFocusExit) {
 			onFocusExit(event);
 		}
 	};
 
 	const handleOnFocusEnter = (event) => {
+		setIsFocused(true);
 		if (onFocusEnter) {
 			onFocusEnter(event);
 		}
@@ -237,10 +292,24 @@ useEffect(() => {
 		return readOnly || v1v2Compatibility.isReadOnly;
 	};
 
-	// Erro a ser exibido: local ou do contexto
-	const displayError = internalError || contextError;
+	// Erro a ser exibido: local, do contexto ou da política de senha
+	const displayError = internalError || contextError || policyError;
 
-	return (
+	const shouldShowPolicyFeedback = (): boolean => {
+		if (!policyResult || isReadOnly() || disabled) {
+			return false;
+		}
+		switch (passwordRequirementsVisibility) {
+			case 'always':
+				return true;
+			case 'whenInvalid':
+				return currentValue.length > 0 && !policyResult.valid;
+			default:
+				return isFocused || (currentValue.length > 0 && !policyResult.valid);
+		}
+	};
+
+	const passwordInput = (
 		<PasswordInput
 			disabled={disabled}
 			readOnly={isReadOnly()}
@@ -263,4 +332,22 @@ useEffect(() => {
 			error={displayError}
 		/>
 	);
+
+	if (!resolvedPolicy) {
+		return passwordInput;
+	}
+
+	return (
+		<div style={{ width }}>
+			{passwordInput}
+			{shouldShowPolicyFeedback() && (
+				<ArchbasePasswordStrengthMeter
+					value={currentValue}
+					policy={resolvedPolicy}
+					showStrengthBar={showPasswordStrengthBar}
+					showRequirements={showPasswordRequirements}
+				/>
+			)}
+		</div>
+	);
 }

package/src/editors/ArchbasePasswordStrengthMeter.tsx

@@ -0,0 +1,112 @@
+import { Box, Group, MantineSize, Progress, Stack, Text } from '@mantine/core';
+import { IconCheck, IconX } from '@tabler/icons-react';
+import type { CSSProperties } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
+import type {
+	ArchbasePasswordPolicy,
+	ArchbasePasswordStrength,
+	ArchbasePasswordValidationResult,
+} from '@archbase/core';
+import {
+	getArchbasePasswordStrengthLabel,
+	resolveArchbasePasswordPolicy,
+	validateArchbasePassword,
+} from '@archbase/core';
+
+export interface ArchbasePasswordStrengthMeterProps {
+	/** Senha a ser avaliada */
+	value?: string;
+	/** Critérios de senha forte. `true` aplica a política padrão do Archbase */
+	policy?: ArchbasePasswordPolicy | boolean;
+	/** Indicador se a barra de força deve ser exibida */
+	showStrengthBar?: boolean;
+	/** Indicador se a lista de critérios deve ser exibida */
+	showRequirements?: boolean;
+	/** Exibe somente os critérios ainda não atendidos */
+	onlyUnmetRequirements?: boolean;
+	/** Tamanho do texto dos critérios */
+	size?: MantineSize;
+	/** Evento disparado sempre que o resultado da validação muda */
+	onValidationChange?: (result: ArchbasePasswordValidationResult) => void;
+	/** Estilo do container */
+	style?: CSSProperties;
+}
+
+const STRENGTH_COLORS: Record<ArchbasePasswordStrength, string> = {
+	empty: 'gray',
+	weak: 'red',
+	fair: 'orange',
+	good: 'yellow',
+	strong: 'teal',
+};
+
+export function ArchbasePasswordStrengthMeter({
+	value = '',
+	policy = true,
+	showStrengthBar = true,
+	showRequirements = true,
+	onlyUnmetRequirements = false,
+	size = 'xs',
+	onValidationChange,
+	style,
+}: ArchbasePasswordStrengthMeterProps) {
+	const resolvedPolicy = useMemo(() => resolveArchbasePasswordPolicy(policy), [policy]);
+
+	const result = useMemo(
+		() => (resolvedPolicy ? validateArchbasePassword(value, resolvedPolicy) : undefined),
+		[value, resolvedPolicy]
+	);
+
+	// Notifica apenas quando o resultado realmente muda, evitando loops de render no consumidor.
+	const lastNotifiedRef = useRef<string | undefined>(undefined);
+	useEffect(() => {
+		if (!result || !onValidationChange) {
+			return;
+		}
+		const signature = `${result.valid}|${result.score}|${result.unmetRequirements
+			.map((requirement) => requirement.key)
+			.join(',')}`;
+		if (lastNotifiedRef.current !== signature) {
+			lastNotifiedRef.current = signature;
+			onValidationChange(result);
+		}
+	}, [result, onValidationChange]);
+
+	if (!result) {
+		return null;
+	}
+
+	const color = STRENGTH_COLORS[result.strength];
+	const requirements = onlyUnmetRequirements ? result.unmetRequirements : result.requirements;
+
+	return (
+		<Stack gap={4} mt={6} style={style}>
+			{showStrengthBar && (
+				<Box>
+					<Progress value={result.score} color={color} size="sm" radius="xl" />
+					{result.strength !== 'empty' && (
+						<Text size={size} c={color} mt={2}>
+							{getArchbasePasswordStrengthLabel(result.strength)}
+						</Text>
+					)}
+				</Box>
+			)}
+			{showRequirements && requirements.length > 0 && (
+				<Stack gap={2}>
+					{requirements.map((requirement) => (
+						<Group key={requirement.key} gap={6} wrap="nowrap" align="center">
+							{requirement.satisfied ? (
+								<IconCheck size={14} color="var(--mantine-color-teal-6)" />
+							) : (
+								<IconX size={14} color="var(--mantine-color-red-6)" />
+							)}
+							<Text size={size} c={requirement.satisfied ? 'teal' : 'dimmed'}>
+								{requirement.label}
+							</Text>
+						</Group>
+					))}
+				</Stack>
+			)}
+		</Stack>
+	);
+}

package/src/editors/index.tsx

@@ -63,6 +63,8 @@ export type { ArchbaseNumberEditProps } from './ArchbaseNumberEdit';
 
 export { ArchbasePasswordEdit } from './ArchbasePasswordEdit';
 export type { ArchbasePasswordEditProps } from './ArchbasePasswordEdit';
+export { ArchbasePasswordStrengthMeter } from './ArchbasePasswordStrengthMeter';
+export type { ArchbasePasswordStrengthMeterProps } from './ArchbasePasswordStrengthMeter';
 
 export { ArchbaseRadioGroup } from './ArchbaseRadioGroup';
 export type { ArchbaseRadioGroupProps } from './ArchbaseRadioGroup';