Ballerine Validator(WIP)

packages/ui/package.json

@@ -51,7 +51,9 @@
     "clsx": "^1.2.1",
     "cmdk": "^0.2.0",
     "dayjs": "^1.11.6",
+    "email-validator": "^2.0.4",
     "i18n-iso-countries": "^7.6.0",
+    "json-logic-js": "^2.0.2",
     "lodash": "^4.17.21",
     "lucide-react": "^0.144.0",
     "react": "^18.0.37",
@@ -76,6 +78,9 @@
     "@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/json-logic-js": "^2.0.1",
     "@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,24 @@
+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;
+  validateSync?: 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/useValidate/index.ts

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

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

@@ -0,0 +1,46 @@
+import { IValidationSchema } from '../../../types';
+
+import debounce from 'lodash/debounce';
+import { useCallback, useEffect, useState } from 'react';
+import { IValidationError } from '../../../types';
+import { validate } from '../../../utils/validate';
+
+export interface IUseAsyncValidateParams {
+  validationDelay?: number;
+  validateAsync?: boolean;
+  validateOnChange?: boolean;
+  abortEarly?: boolean;
+}
+
+export const useAsyncValidate = (
+  context: object,
+  schema: IValidationSchema[],
+  params: IUseAsyncValidateParams = {},
+) => {
+  const {
+    validationDelay = 500,
+    validateAsync = false,
+    validateOnChange = true,
+    abortEarly = false,
+  } = params;
+
+  const [validationErrors, setValidationErrors] = useState<IValidationError[]>(() =>
+    validateAsync ? validate(context, schema, { abortEarly }) : [],
+  );
+
+  const validateWithDebounce = useCallback(
+    debounce((context: object, schema: IValidationSchema[], params: IUseAsyncValidateParams) => {
+      const errors = validate(context, schema, params);
+      setValidationErrors(errors);
+    }, validationDelay),
+    [validationDelay],
+  );
+
+  useEffect(() => {
+    if (!validateAsync || !validateOnChange) return;
+
+    validateWithDebounce(context, schema, { abortEarly });
+  }, [context, schema, validateAsync, validateOnChange, abortEarly, validateWithDebounce]);
+
+  return validationErrors;
+};

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

@@ -0,0 +1,111 @@
+import { renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { validate } from '../../../utils/validate';
+import { useAsyncValidate } from './useAsyncValidate';
+
+// Mock dependencies
+vi.mock('../../../utils/validate', () => ({
+  validate: vi.fn().mockReturnValue([
+    {
+      id: 'name',
+      originId: 'name',
+      message: ['error'],
+      invalidValue: 'John',
+    },
+  ]),
+}));
+
+vi.mock('lodash/debounce', () => ({
+  default: (fn: any) => fn,
+}));
+
+describe('useAsyncValidate', () => {
+  const mockContext = { name: 'John' };
+  const mockSchema = [{ id: 'name', validators: [], rules: [] }];
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should initialize with empty validation errors', () => {
+    const { result } = renderHook(() => useAsyncValidate(mockContext, mockSchema));
+    expect(result.current).toEqual([]);
+  });
+
+  it('should not validate when validateAsync is false', () => {
+    renderHook(() => useAsyncValidate(mockContext, mockSchema, { validateAsync: false }));
+    expect(validate).not.toHaveBeenCalled();
+  });
+
+  it('should not validate when validateOnChange is false', () => {
+    renderHook(() => useAsyncValidate(mockContext, mockSchema, { validateOnChange: false }));
+    expect(validate).not.toHaveBeenCalled();
+  });
+
+  it('should validate and set errors when validateAsync and validateOnChange are true', () => {
+    const { result } = renderHook(() =>
+      useAsyncValidate(mockContext, mockSchema, {
+        validateAsync: true,
+        validateOnChange: true,
+      }),
+    );
+
+    expect(validate).toHaveBeenCalledWith(mockContext, mockSchema, { abortEarly: false });
+    expect(result.current).toEqual([
+      {
+        id: 'name',
+        originId: 'name',
+        message: ['error'],
+        invalidValue: 'John',
+      },
+    ]);
+  });
+
+  it('should pass abortEarly param to validate function', () => {
+    renderHook(() =>
+      useAsyncValidate(mockContext, mockSchema, {
+        validateAsync: true,
+        validateOnChange: true,
+        abortEarly: true,
+      }),
+    );
+
+    expect(validate).toHaveBeenCalledWith(mockContext, mockSchema, { abortEarly: true });
+  });
+
+  it('should revalidate when context changes', () => {
+    const { rerender } = renderHook(
+      ({ context }) =>
+        useAsyncValidate(context, mockSchema, {
+          validateAsync: true,
+          validateOnChange: true,
+        }),
+      {
+        initialProps: { context: mockContext },
+      },
+    );
+
+    const newContext = { name: 'Jane' };
+    rerender({ context: newContext });
+
+    expect(validate).toHaveBeenCalledWith(newContext, mockSchema, { abortEarly: false });
+  });
+
+  it('should revalidate when schema changes', () => {
+    const { rerender } = renderHook(
+      ({ schema }) =>
+        useAsyncValidate(mockContext, schema, {
+          validateAsync: true,
+          validateOnChange: true,
+        }),
+      {
+        initialProps: { schema: mockSchema },
+      },
+    );
+
+    const newSchema = [{ id: 'email', validators: [], rules: [] }];
+    rerender({ schema: newSchema });
+
+    expect(validate).toHaveBeenCalledWith(mockContext, newSchema, { abortEarly: false });
+  });
+});

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

@@ -0,0 +1,24 @@
+import { useCallback, useState } from 'react';
+import { IValidationError, IValidationSchema } from '../../../types';
+import { validate } from '../../../utils/validate';
+
+export interface IUseManualValidateParams {
+  abortEarly?: boolean;
+}
+
+export const useManualValidate = (
+  context: object,
+  schema: IValidationSchema[],
+  params: IUseManualValidateParams = {},
+): [IValidationError[], () => void] => {
+  const [validationErrors, setValidationErrors] = useState<IValidationError[]>([]);
+
+  const { abortEarly = false } = params;
+
+  const _validate = useCallback(() => {
+    const errors = validate(context, schema, { abortEarly });
+    setValidationErrors(errors);
+  }, [context, schema, abortEarly]);
+
+  return [validationErrors, _validate];
+};

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

@@ -0,0 +1,93 @@
+import { act, renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { validate } from '../../../utils/validate';
+import { useManualValidate } from './useManualValidate';
+
+vi.mock('../../../utils/validate', () => ({
+  validate: vi.fn().mockReturnValue([
+    {
+      id: 'name',
+      originId: 'name',
+      message: ['error'],
+      invalidValue: 'John',
+    },
+  ]),
+}));
+
+describe('useManualValidate', () => {
+  const mockContext = { name: 'John' };
+  const mockSchema = [{ id: 'name', validators: [], rules: [] }];
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should initialize with empty validation errors', () => {
+    const { result } = renderHook(() => useManualValidate(mockContext, mockSchema));
+
+    expect(result.current.validationErrors).toEqual([]);
+  });
+
+  it('should validate and set errors when validate is called', () => {
+    const { result } = renderHook(() => useManualValidate(mockContext, mockSchema));
+
+    act(() => {
+      result.current.validate();
+    });
+
+    expect(validate).toHaveBeenCalledWith(mockContext, mockSchema, { abortEarly: false });
+    expect(result.current.validationErrors).toEqual([
+      {
+        id: 'name',
+        originId: 'name',
+        message: ['error'],
+        invalidValue: 'John',
+      },
+    ]);
+  });
+
+  it('should pass abortEarly param to validate function', () => {
+    const { result } = renderHook(() =>
+      useManualValidate(mockContext, mockSchema, { abortEarly: true }),
+    );
+
+    act(() => {
+      result.current.validate();
+    });
+
+    expect(validate).toHaveBeenCalledWith(mockContext, mockSchema, { abortEarly: true });
+  });
+
+  it('should memoize validate callback with correct dependencies', () => {
+    const { result, rerender } = renderHook(
+      ({ context, schema, params }) => useManualValidate(context, schema, params),
+      {
+        initialProps: {
+          context: mockContext,
+          schema: mockSchema,
+          params: { abortEarly: false },
+        },
+      },
+    );
+
+    const firstValidate = result.current.validate;
+
+    // Rerender with same props
+    rerender({
+      context: mockContext,
+      schema: mockSchema,
+      params: { abortEarly: false },
+    });
+
+    expect(result.current.validate).toBe(firstValidate);
+
+    // Rerender with different context
+    rerender({
+      context: { ...mockContext, newField: 'value' } as any,
+      schema: mockSchema,
+      params: { abortEarly: false },
+    });
+
+    expect(result.current.validate).not.toBe(firstValidate);
+  });
+});

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

@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+import { IValidationSchema } from '../../../types';
+import { validate } from '../../../utils/validate';
+
+export interface IUseSyncValidateParams {
+  abortEarly?: boolean;
+  validateSync?: boolean;
+  validateOnChange?: boolean;
+}
+
+export const useSyncValidate = (
+  context: object,
+  schema: IValidationSchema[],
+  params: IUseSyncValidateParams = {},
+) => {
+  const { abortEarly = false, validateSync = false, validateOnChange = true } = params;
+
+  return useMemo(() => {
+    if (!validateSync || !validateOnChange) return [];
+
+    return validate(context, schema, { abortEarly });
+  }, [context, schema, abortEarly, validateSync, validateOnChange]);
+};