Ballerine Validator(WIP)

packages/ui/package.json

@@ -51,6 +51,7 @@
     "clsx": "^1.2.1",
     "cmdk": "^0.2.0",
     "dayjs": "^1.11.6",
+    "email-validator": "^2.0.4",
     "i18n-iso-countries": "^7.6.0",
     "lodash": "^4.17.21",
     "lucide-react": "^0.144.0",
@@ -76,6 +77,8 @@
     "@storybook/react": "^7.0.26",
     "@storybook/react-vite": "^7.0.26",
     "@storybook/testing-library": "^0.0.14-next.2",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^13.3.0",
     "@types/lodash": "^4.14.191",
     "@types/node": "^20.4.1",
     "@types/react": "^18.0.37",

packages/ui/src/components/organisms/Form/.gitignore

@@ -0,0 +1 @@
+./_Validator

packages/ui/src/components/organisms/Form/Validator/ValidatorProvider.tsx

@@ -0,0 +1,23 @@
+import { ValidatorContext } from './context';
+import { IValidatorRef, useValidatorRef } from './hooks/internal/useValidatorRef';
+import { IValidationSchema } from './types';
+
+export interface IValidatorProviderProps<TValue> {
+  children: React.ReactNode | React.ReactNode[];
+  schema: IValidationSchema[];
+  value: TValue;
+
+  ref?: React.RefObject<IValidatorRef>;
+  validateOnChange?: boolean;
+}
+
+export const ValidatorProvider = <TValue,>({
+  children,
+  schema,
+  value,
+  ref,
+}: IValidatorProviderProps<TValue>) => {
+  useValidatorRef(ref);
+
+  return <ValidatorContext.Provider value={{}}>{children}</ValidatorContext.Provider>;
+};

packages/ui/src/components/organisms/Form/Validator/context/index.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './validator-context';

packages/ui/src/components/organisms/Form/Validator/context/types.ts

@@ -0,0 +1,8 @@
+import { IValidationError } from '../types';
+
+export interface IValidatorContext<TValues> {
+  errors: IValidationError[];
+  values: TValues;
+  isValid: boolean;
+  validate: () => void;
+}

packages/ui/src/components/organisms/Form/Validator/context/validator-context.ts

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+import { IValidatorContext } from './types';
+
+export const ValidatorContext = createContext<IValidatorContext<unknown>>({
+  errors: [],
+  values: {},
+  isValid: true,
+  validate: () => {
+    throw new Error('Validator context is not provided.');
+  },
+});

packages/ui/src/components/organisms/Form/Validator/hooks/external/useValidator/index.ts

@@ -0,0 +1 @@
+export * from './useValidator';

packages/ui/src/components/organisms/Form/Validator/hooks/external/useValidator/useValidator.ts

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { ValidatorContext } from '../../../context';
+
+export const useValidator = () => {
+  const context = useContext(ValidatorContext);
+
+  if (!context) {
+    throw new Error('Validator context is not provided.');
+  }
+
+  return context;
+};

packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidatorRef/index.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './useValidatorRef';

packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidatorRef/types.ts

@@ -0,0 +1,3 @@
+export interface IValidatorRef {
+  validate: () => void;
+}

packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidatorRef/useValidatorRef.ts

@@ -0,0 +1,13 @@
+import { useImperativeHandle } from 'react';
+import { useValidator } from '../../external/useValidator/useValidator';
+import { IValidatorRef } from './types';
+
+export const useValidatorRef = (refObject?: React.RefObject<IValidatorRef>): IValidatorRef => {
+  const context = useValidator();
+
+  useImperativeHandle(refObject, () => ({
+    validate: context.validate,
+  }));
+
+  return context;
+};

packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidatorRef/useValidatorRef.unit.test.ts

@@ -0,0 +1,45 @@
+import { renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useValidator } from '../../external/useValidator/useValidator';
+import { useValidatorRef } from './useValidatorRef';
+
+const mockValidate = vi.fn();
+
+vi.mock('../../external/useValidator/useValidator', () => ({
+  useValidator: vi.fn(() => ({
+    validate: mockValidate,
+  })),
+}));
+
+describe('useValidatorRef', () => {
+  const mockRef = { current: null };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should return context from useValidator', () => {
+    const { result } = renderHook(() => useValidatorRef());
+
+    expect(result.current).toEqual({
+      validate: mockValidate,
+    });
+    expect(useValidator).toHaveBeenCalled();
+  });
+
+  it('should set ref.current.validate to context.validate when ref is provided', () => {
+    renderHook(() => useValidatorRef(mockRef));
+
+    expect(mockRef.current).toEqual({
+      validate: mockValidate,
+    });
+  });
+
+  it('should not set ref when no ref object is provided', () => {
+    const { result } = renderHook(() => useValidatorRef());
+
+    expect(result.current).toEqual({
+      validate: mockValidate,
+    });
+  });
+});

packages/ui/src/components/organisms/Form/Validator/index.ts

@@ -0,0 +1,4 @@
+export * from './hooks/external/useValidator';
+export * from './types';
+export * from './utils/register-validator';
+export * from './ValidatorProvider';

packages/ui/src/components/organisms/Form/Validator/types/index.ts

@@ -0,0 +1,44 @@
+export type TBaseValidationRules = 'json-logic';
+
+export interface IValidationRule {
+  type: TBaseValidationRules;
+  value: object;
+}
+
+export type TBaseValidators =
+  | 'required'
+  | 'minLength'
+  | 'maxLength'
+  | 'pattern'
+  | 'minimum'
+  | 'maximum';
+
+export interface ICommonValidator<T = object, TValidatorType = TBaseValidators> {
+  type: TValidatorType;
+  value: T;
+  message?: string;
+  applyWhen?: IValidationRule;
+}
+
+export interface IValidationSchema {
+  id: string;
+  valueDestination?: string;
+  validators: ICommonValidator[];
+  children?: IValidationSchema[];
+}
+
+export interface IValidationError {
+  id: string;
+  originId: string;
+  invalidValue: unknown;
+  message: string[];
+}
+
+export * from '../hooks/internal/useValidatorRef/types';
+
+export type TValidator<T, TValidatorParams = unknown> = (
+  value: T,
+  validator: ICommonValidator<TValidatorParams>,
+) => void;
+
+export type TDeepthLevelStack = number[];

packages/ui/src/components/organisms/Form/Validator/utils/create-validation-error/create-validation-error.ts

@@ -0,0 +1,27 @@
+import { TDeepthLevelStack } from '../../types';
+
+import { IValidationError } from '../../types';
+import { formatId } from '../format-id';
+
+export const createValidationError = ({
+  id,
+  invalidValue,
+  message,
+  stack,
+}: {
+  id: string;
+  invalidValue: unknown;
+  message: string;
+  stack: TDeepthLevelStack;
+}): IValidationError => {
+  const formattedId = formatId(id, stack);
+
+  const error: IValidationError = {
+    id: formattedId,
+    originId: id,
+    invalidValue,
+    message: [message],
+  };
+
+  return error;
+};

packages/ui/src/components/organisms/Form/Validator/utils/create-validation-error/create-validation-error.unit.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it } from 'vitest';
+import { createValidationError } from './create-validation-error';
+
+describe('createValidationError', () => {
+  it('should create validation error with formatted id', () => {
+    const params = {
+      id: 'test',
+      invalidValue: 'invalid',
+      message: 'error message',
+      stack: [1, 2],
+    };
+
+    const result = createValidationError(params);
+
+    expect(result).toEqual({
+      id: 'test-1-2',
+      originId: 'test',
+      invalidValue: 'invalid',
+      message: ['error message'],
+    });
+  });
+
+  it('should handle empty stack', () => {
+    const params = {
+      id: 'test',
+      invalidValue: 123,
+      message: 'error message',
+      stack: [],
+    };
+
+    const result = createValidationError(params);
+
+    expect(result).toEqual({
+      id: 'test-',
+      originId: 'test',
+      invalidValue: 123,
+      message: ['error message'],
+    });
+  });
+
+  it('should handle single stack value', () => {
+    const params = {
+      id: 'test',
+      invalidValue: null,
+      message: 'error message',
+      stack: [1],
+    };
+
+    const result = createValidationError(params);
+
+    expect(result).toEqual({
+      id: 'test-1',
+      originId: 'test',
+      invalidValue: null,
+      message: ['error message'],
+    });
+  });
+});

packages/ui/src/components/organisms/Form/Validator/utils/create-validation-error/index.ts

@@ -0,0 +1 @@
+export * from './create-validation-error';

packages/ui/src/components/organisms/Form/Validator/utils/format-error-message/format-error-message.ts

@@ -0,0 +1,2 @@
+export const formatErrorMessage = (message: string, key: string, value: string) =>
+  message.replaceAll(`{${key}}`, value);

packages/ui/src/components/organisms/Form/Validator/utils/format-error-message/format-error-message.unit.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest';
+import { formatErrorMessage } from './format-error-message';
+
+describe('formatErrorMessage', () => {
+  it('should replace single placeholder with value', () => {
+    const message = 'This is a {test} message';
+    const result = formatErrorMessage(message, 'test', 'sample');
+    expect(result).toBe('This is a sample message');
+  });
+
+  it('should replace multiple occurrences of the same placeholder', () => {
+    const message = 'The {value} is equal to {value}';
+    const result = formatErrorMessage(message, 'value', '42');
+    expect(result).toBe('The 42 is equal to 42');
+  });
+
+  it('should not modify message when placeholder is not found', () => {
+    const message = 'This message has no placeholders';
+    const result = formatErrorMessage(message, 'key', 'value');
+    expect(result).toBe('This message has no placeholders');
+  });
+
+  it('should handle empty strings', () => {
+    const message = '';
+    const result = formatErrorMessage(message, 'key', 'value');
+    expect(result).toBe('');
+  });
+
+  it('should handle special characters in placeholder values', () => {
+    const message = 'Special {char} test';
+    const result = formatErrorMessage(message, 'char', '$@#');
+    expect(result).toBe('Special $@# test');
+  });
+});

packages/ui/src/components/organisms/Form/Validator/utils/format-error-message/index.ts

@@ -0,0 +1 @@
+export * from './format-error-message';

packages/ui/src/components/organisms/Form/Validator/utils/format-id/format-id.ts

@@ -0,0 +1,7 @@
+import { TDeepthLevelStack } from '../../types';
+
+export const formatId = (id: string, stack: TDeepthLevelStack) => {
+  const _id = `${id}${stack.length ? `-${stack.join('-')}` : ''}`;
+
+  return _id;
+};

packages/ui/src/components/organisms/Form/Validator/utils/format-id/format-id.unit.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+import { formatId } from './format-id';
+
+describe('formatId', () => {
+  it('should append stack values to id', () => {
+    const id = 'test';
+    const stack = [1, 2];
+
+    const result = formatId(id, stack);
+
+    expect(result).toBe('test-1-2');
+  });
+
+  it('should handle empty stack', () => {
+    const id = 'test';
+    const stack: number[] = [];
+
+    const result = formatId(id, stack);
+
+    expect(result).toBe('test');
+  });
+
+  it('should handle single stack value', () => {
+    const id = 'test';
+    const stack = [1];
+
+    const result = formatId(id, stack);
+
+    expect(result).toBe('test-1');
+  });
+});

packages/ui/src/components/organisms/Form/Validator/utils/format-id/index.ts

@@ -0,0 +1 @@
+export * from './format-id';

packages/ui/src/components/organisms/Form/Validator/utils/format-value-destination/format-value-destination.ts

@@ -0,0 +1,11 @@
+import { TDeepthLevelStack } from '../../types';
+
+export const formatValueDestination = (valueDestination: string, stack: TDeepthLevelStack) => {
+  let _valueDestination = valueDestination;
+
+  stack.forEach((stack, index) => {
+    _valueDestination = _valueDestination.replace(`$${index}`, stack.toString());
+  });
+
+  return _valueDestination;
+};