feat: added initial validator boilerplate & utilities & tests

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,41 @@
+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;
+  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;

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/get-validator/get-validator.ts

@@ -0,0 +1,12 @@
+import { ICommonValidator } from '../../types';
+import { baseValidatorsMap, validatorsExtends } from '../../validators';
+
+export const getValidator = (validator: ICommonValidator) => {
+  const validatorFn = baseValidatorsMap[validator.type] || validatorsExtends[validator.type];
+
+  if (!validatorFn) {
+    throw new Error(`Validator ${validator.type} not found.`);
+  }
+
+  return validatorFn;
+};

packages/ui/src/components/organisms/Form/Validator/utils/get-validator/get-validator.unit.test.ts

@@ -0,0 +1,40 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { ICommonValidator, TBaseValidators } from '../../types';
+import { baseValidatorsMap, validatorsExtends } from '../../validators';
+import { getValidator } from './get-validator';
+
+vi.mock('../../validators', () => ({
+  baseValidatorsMap: {},
+  validatorsExtends: {},
+}));
+
+describe('getValidator', () => {
+  const mockValidator = vi.fn();
+  const validatorType = 'test';
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should return validator from baseValidatorsMap if exists', () => {
+    baseValidatorsMap[validatorType as TBaseValidators] = mockValidator;
+
+    const result = getValidator({ type: validatorType } as unknown as ICommonValidator);
+
+    expect(result).toBe(mockValidator);
+  });
+
+  it('should return validator from validatorsExtends if exists and not in baseValidatorsMap', () => {
+    validatorsExtends[validatorType] = mockValidator;
+
+    const result = getValidator({ type: validatorType } as unknown as ICommonValidator);
+
+    expect(result).toBe(mockValidator);
+  });
+
+  it('should throw error if validator not found', () => {
+    expect(() =>
+      getValidator({ type: 'nonexistent' as TBaseValidators } as unknown as ICommonValidator),
+    ).toThrow('Validator nonexistent not found.');
+  });
+});

packages/ui/src/components/organisms/Form/Validator/utils/get-validator/index.ts

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

packages/ui/src/components/organisms/Form/Validator/utils/register-validator/index.ts

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

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

@@ -0,0 +1,8 @@
+import { TValidator } from '../../types';
+import { validatorsExtends } from '../../validators';
+
+export const registerValidator = (type: string, validator: TValidator<any, any>) => {
+  validatorsExtends[type] = validator;
+
+  return validator;
+};

packages/ui/src/components/organisms/Form/Validator/utils/register-validator/register-validator.unit.test.ts

@@ -0,0 +1,28 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { validatorsExtends } from '../../validators';
+import { registerValidator } from './register-validator';
+
+vi.mock('../../validators', () => ({
+  validatorsExtends: {},
+}));
+
+describe('registerValidator', () => {
+  const mockValidator = vi.fn();
+  const validatorType = 'test';
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should register validator to validatorsExtends', () => {
+    registerValidator(validatorType, mockValidator);
+
+    expect(validatorsExtends[validatorType]).toBe(mockValidator);
+  });
+
+  it('should return the registered validator', () => {
+    const result = registerValidator(validatorType, mockValidator);
+
+    expect(result).toBe(mockValidator);
+  });
+});

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

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

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

@@ -0,0 +1,23 @@
+import EmailValidator from 'email-validator';
+import { TValidator } from '../../types';
+import { formatErrorMessage } from '../../utils/format-error-message';
+import { IFormatValueValidatorParams } from './types';
+
+export const formatValidator: TValidator<unknown, IFormatValueValidatorParams> = (
+  value,
+  params,
+) => {
+  const { message = 'Invalid {format} format.' } = params;
+
+  if (params.value.format === 'email') {
+    const isValid = EmailValidator.validate(value as string);
+
+    if (!isValid) {
+      throw new Error(formatErrorMessage(message, 'format', 'email'));
+    }
+
+    return true;
+  }
+
+  throw new Error(`Format validator ${params.value.format} is not supported.`);
+};