From dd3fbaaa79135ba007ce625cec025fb40806d2a3 Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Sun, 20 Sep 2020 14:09:56 +0200
Subject: [PATCH 1/6] Added basic localization and fixed tests

---
 __tests__/Area.test.tsx           |  47 ++++------
 __tests__/Provider.test.tsx       |  37 ++++++--
 __tests__/Validator.test.ts       |  19 ----
 __tests__/Validator.test.tsx      | 107 ++++++++++++++++++++++
 __tests__/rules/max.test.tsx      |  14 ++-
 __tests__/rules/min.test.tsx      |  11 ++-
 __tests__/rules/required.test.tsx |  14 ++-
 package-lock.json                 |  65 +++++++++++++
 package.json                      |   1 +
 src/Rule.ts                       |   4 +-
 src/RuleOptions.ts                |   3 +-
 src/Validator.ts                  | 147 +++++++++++++++++++++++++++++-
 src/ValidatorArea.tsx             |  32 +++----
 src/rules/max.ts                  |  38 ++++----
 src/rules/min.ts                  |  38 ++++----
 src/rules/required.ts             |   5 +-
 16 files changed, 438 insertions(+), 144 deletions(-)
 delete mode 100644 __tests__/Validator.test.ts
 create mode 100644 __tests__/Validator.test.tsx

diff --git a/__tests__/Area.test.tsx b/__tests__/Area.test.tsx
index 0be1ce2..38115bd 100644
--- a/__tests__/Area.test.tsx
+++ b/__tests__/Area.test.tsx
@@ -2,9 +2,19 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { ValidatorArea, Validator } from '../src';
 import { ValidatorAreaProps } from '../src/ValidatorArea';
-import required from '../src/rules/required';
 
 describe('test Provider', () => {
+    beforeEach(() => {
+        Validator.extend('passes_not', {
+            passed(): boolean {
+                return false;
+            },
+            message(): string {
+                return 'not passed';
+            }
+        });
+    });
+
     it('should render input', () => {
         const area = mount<ValidatorArea, ValidatorAreaProps>(
             <ValidatorArea>
@@ -64,43 +74,18 @@ describe('test Provider', () => {
 
     it('should apply rules on blur', () => {
         const area = mount<ValidatorArea, ValidatorAreaProps>(
-            <ValidatorArea rules={[required]}>
+            <ValidatorArea rules="passes_not">
                 <input name="test" />
             </ValidatorArea>
         );
 
         area.find('input').at(0).simulate('blur');
-        expect(area.state().errors[0]).toBe('Test is required');
+        expect(area.state().errors[0]).toBe('Not passed');
     });
 
     it('should render error when area dirty', async () => {
         const area = mount<ValidatorArea, ValidatorAreaProps>(
-            <ValidatorArea rules={[required]}>
-                {({ errors }) => (
-                    <>
-                        <input name="test" />
-                        {errors.length && <div>{errors[0]}</div>}
-                    </>
-                )}
-            </ValidatorArea>
-        );
-
-        area.find('input').simulate('blur');
-        expect(area.find('div').text()).toBe('Test is required');
-    })
-
-    it('should validate element with rule string', () => {
-        Validator.extend('testrule', {
-            passed(): boolean {
-                return false;
-            },
-            message(): string {
-                return 'string rule passed';
-            }
-        });
-
-        const area = mount<ValidatorArea, ValidatorAreaProps>(
-            <ValidatorArea rules={['testrule']}>
+            <ValidatorArea rules="passes_not">
                 {({ errors }) => (
                     <>
                         <input name="test" />
@@ -111,14 +96,14 @@ describe('test Provider', () => {
         );
 
         area.find('input').simulate('blur');
-        expect(area.find('div').text()).toBe('string rule passed');
+        expect(area.find('div').text()).toBe('Not passed');
     })
 
     it('should call element\'s provided blur along validator blur', () => {
         const mockFn = jest.fn();
 
         const area = mount<ValidatorArea, ValidatorAreaProps>(
-            <ValidatorArea rules={[required]}>
+            <ValidatorArea rules="passes_not">
                 <input name="test" onBlur={mockFn} />
             </ValidatorArea>
         );
diff --git a/__tests__/Provider.test.tsx b/__tests__/Provider.test.tsx
index c1e30b2..e7da24d 100644
--- a/__tests__/Provider.test.tsx
+++ b/__tests__/Provider.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { ValidatorArea, ValidatorProvider } from '../src';
-import required from '../src/rules/required';
+import { Validator, ValidatorArea, ValidatorProvider } from '../src';
 import { ValidatorProviderProps } from '../src/Provider';
 
 
@@ -12,9 +11,29 @@ const tick = () => {
 }
 
 describe('test Provider', () => {
+    beforeEach(() => {
+        Validator.extend('passes_not', {
+            passed(): boolean {
+                return false;
+            },
+            message(): string {
+                return 'not passed';
+            }
+        });
+
+        Validator.extend('passes', {
+            passed(): boolean {
+                return true;
+            },
+            message(): string {
+                return 'passed';
+            }
+        });
+    });
+
     it('should render Provider', () => {
         const provider = mount<ValidatorProvider, ValidatorProviderProps>(
-            <ValidatorProvider rules={[required]} />
+            <ValidatorProvider rules="passes_not" />
         );
 
         expect(provider.instance().props.rules).toBeDefined();
@@ -35,7 +54,7 @@ describe('test Provider', () => {
             }
 
             expect(() => provider()).toThrow('Validation area names should be unique');
-    })
+    });
 
     it('should render with function as child', () => {
         const provider = mount<ValidatorProvider, ValidatorProviderProps>(
@@ -45,7 +64,7 @@ describe('test Provider', () => {
         );
 
         expect(provider.find('div').text()).toBe('test');
-    })
+    });
 
     it('should add an area when provided as child', () => {
         const provider = mount<ValidatorProvider, ValidatorProviderProps>(
@@ -69,10 +88,10 @@ describe('test Provider', () => {
             <ValidatorProvider>
                 {({ validate }) => (
                     <>
-                        <ValidatorArea rules={[required]} name="test1">
+                        <ValidatorArea rules="passes_not" name="test1">
                             <input value="" />
                         </ValidatorArea>
-                        <ValidatorArea rules={[required]} name="test2">
+                        <ValidatorArea rules="passes_not" name="test2">
                             <input value="" />
                         </ValidatorArea>
                         <button onClick={() => validate(mockFn)} />
@@ -93,7 +112,7 @@ describe('test Provider', () => {
             <ValidatorProvider>
                 {({ validate }) => (
                     <>
-                        <ValidatorArea rules={[required]} name="test1">
+                        <ValidatorArea rules="passes" name="test1">
                             <input value="foo" />
                         </ValidatorArea>
                         <button onClick={() => validate(mockFn)} />
@@ -127,5 +146,5 @@ describe('test Provider', () => {
         provider.find('button').simulate('click');
         await tick();
         expect(mockFn).toHaveBeenCalled()
-    })
+    });
 })
diff --git a/__tests__/Validator.test.ts b/__tests__/Validator.test.ts
deleted file mode 100644
index 64099d8..0000000
--- a/__tests__/Validator.test.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Rule } from '../src/Rule';
-import { Validator } from '../src';
-
-describe('test validator', () => {
-    it('should add custom rules', () => {
-        const rule: Rule = {
-            passed(): boolean {
-                return true;
-            },
-            message(): string {
-                return '';
-            }
-        }
-
-        Validator.extend('testRule', rule);
-
-        expect(Validator.hasRule('testRule')).toBeTruthy();
-    });
-});
diff --git a/__tests__/Validator.test.tsx b/__tests__/Validator.test.tsx
new file mode 100644
index 0000000..548ea1d
--- /dev/null
+++ b/__tests__/Validator.test.tsx
@@ -0,0 +1,107 @@
+import { Rule } from '../src/Rule';
+import { Validator } from '../src';
+
+describe('test validator', () => {
+    beforeEach(() => {
+        Validator.extend('rule_one', {
+            passed(): boolean {
+                return false;
+            },
+            message(): string {
+                return 'rule one not passed'
+            }
+        });
+
+        Validator.extend('rule_two', {
+            passed(): boolean {
+                return false;
+            },
+            message(): string {
+                return 'rule two not passed'
+            }
+        });
+
+        Validator.extend('rule_with_params', {
+            passed(): boolean {
+                return false;
+            },
+            message(): string {
+                return 'rule params not passed: {0}, {1}, {2}, {3}'
+            }
+        });
+    });
+
+    it('should add custom rules', () => {
+        const rule: Rule = {
+            passed(): boolean {
+                return true;
+            },
+            message(): string {
+                return '';
+            }
+        }
+
+        Validator.extend('testRule', rule);
+
+        expect(Validator.hasRule('testRule')).toBeTruthy();
+    });
+
+    it('should validate rules as string', () => {
+        const validator = new Validator(
+            [
+                document.createElement<'input'>('input')
+            ],
+            'rule_one|rule_two',
+            'test'
+        );
+
+        validator.validate();
+        expect(validator.getErrors().length).toBe(2);
+    });
+
+    it('should validate rules as array', () => {
+        const validator = new Validator(
+            [
+                document.createElement<'input'>('input')
+            ],
+            ['rule_one', 'rule_two'],
+            'test'
+        );
+
+        validator.validate();
+        expect(validator.getErrors().length).toBe(2);
+    });
+
+    it('should validate with parameters', () => {
+        const validator = new Validator(
+            [
+                document.createElement<'input'>('input')
+            ],
+            ['rule_with_params:1,2,3,4'],
+            'test'
+        );
+
+        validator.validate();
+        expect(validator.getErrors()[0]).toBe('Rule params not passed: 1, 2, 3, 4');
+    });
+
+    it('throws an exception when rule is not found', () => {
+        const throws = () => {
+            const validator = new Validator(
+                [
+                    document.createElement<'input'>('input')
+                ],
+                ['not_existing_rule'],
+                'test'
+            );
+            validator.validate();
+        }
+
+        expect(() => throws()).toThrowError('Validation rule not_existing_rule not found.');
+    });
+
+    it('should merge rules', () => {
+        const rules = Validator.mergeRules(['rule_one', 'rule_two'], 'rule_tree|rule_four', ['rule_five|rule_six']);
+        expect(rules.length).toBe(6);
+    })
+});
diff --git a/__tests__/rules/max.test.tsx b/__tests__/rules/max.test.tsx
index adf04fb..e18a64a 100644
--- a/__tests__/rules/max.test.tsx
+++ b/__tests__/rules/max.test.tsx
@@ -1,13 +1,17 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { ValidatorArea } from '../../src';
+import { Validator, ValidatorArea } from '../../src';
 import { ValidatorAreaProps } from '../../src/ValidatorArea';
 import max from '../../src/rules/max';
 
 describe('test max rule', () => {
+    beforeEach(() => {
+        Validator.extend('max', max);
+    });
+
     it('should falsely validate input', () => {
         const area = mount<ValidatorArea, ValidatorAreaProps>(
-            <ValidatorArea rules={[max(5)]}>
+            <ValidatorArea rules="max:5">
                 <input name="test" value="6" />
             </ValidatorArea>
         );
@@ -19,7 +23,7 @@ describe('test max rule', () => {
 
     it('should falsely validate textarea', () => {
         const area = mount<ValidatorArea, ValidatorAreaProps>(
-            <ValidatorArea rules={[max(5)]}>
+            <ValidatorArea rules="max:5">
                 <textarea name="test" value="6" />
             </ValidatorArea>
         );
@@ -31,7 +35,7 @@ describe('test max rule', () => {
 
     it('should falsely validate select', () => {
         const area = mount<ValidatorArea, ValidatorAreaProps>(
-            <ValidatorArea rules={[max(5)]}>
+            <ValidatorArea rules="max:5">
                 <select name="test">
                     <option value="">Choose...</option>
                 </select>
@@ -45,7 +49,7 @@ describe('test max rule', () => {
 
     it('should truly validate select', () => {
         const area = mount<ValidatorArea, ValidatorAreaProps>(
-            <ValidatorArea rules={[max(5)]}>
+            <ValidatorArea rules="max:5">
                 <select name="test">
                     <option value={5}>Choose...</option>
                 </select>
diff --git a/__tests__/rules/min.test.tsx b/__tests__/rules/min.test.tsx
index 3cbc391..8fdefb9 100644
--- a/__tests__/rules/min.test.tsx
+++ b/__tests__/rules/min.test.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { ValidatorArea } from '../../src';
+import { Validator, ValidatorArea } from '../../src';
 import { ValidatorAreaProps } from '../../src/ValidatorArea';
 import min from '../../src/rules/min';
 
 describe('test min rule', () => {
+    Validator.extend('min', min);
     it('should falsely validate input', () => {
         const area = mount<ValidatorArea, ValidatorAreaProps>(
-            <ValidatorArea rules={[min(5)]}>
+            <ValidatorArea rules="min:5">
                 <input name="test" />
             </ValidatorArea>
         );
@@ -19,7 +20,7 @@ describe('test min rule', () => {
 
     it('should falsely validate textarea', () => {
         const area = mount<ValidatorArea, ValidatorAreaProps>(
-            <ValidatorArea rules={[min(5)]}>
+            <ValidatorArea rules="min:5">
                 <textarea name="test" />
             </ValidatorArea>
         );
@@ -31,7 +32,7 @@ describe('test min rule', () => {
 
     it('should falsely validate select', () => {
         const area = mount<ValidatorArea, ValidatorAreaProps>(
-            <ValidatorArea rules={[min(5)]}>
+            <ValidatorArea rules="min:5">
                 <select name="test">
                     <option value="">Choose...</option>
                 </select>
@@ -45,7 +46,7 @@ describe('test min rule', () => {
 
     it('should truly validate select', () => {
         const area = mount<ValidatorArea, ValidatorAreaProps>(
-            <ValidatorArea rules={[min(5)]}>
+            <ValidatorArea rules="min:5">
                 <select name="test">
                     <option value={5}>Choose...</option>
                 </select>
diff --git a/__tests__/rules/required.test.tsx b/__tests__/rules/required.test.tsx
index 25de488..a174b56 100644
--- a/__tests__/rules/required.test.tsx
+++ b/__tests__/rules/required.test.tsx
@@ -1,13 +1,17 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { ValidatorArea } from '../../src';
+import { Validator, ValidatorArea } from '../../src';
 import { ValidatorAreaProps } from '../../src/ValidatorArea';
 import required from '../../src/rules/required';
 
 describe('test required rule', () => {
+    beforeEach(() => {
+        Validator.extend('required', required);
+    });
+
     it('should falsely validate input', () => {
         const area = mount<ValidatorArea, ValidatorAreaProps>(
-            <ValidatorArea rules={[required]}>
+            <ValidatorArea rules="required">
                 <input name="test" />
             </ValidatorArea>
         );
@@ -19,7 +23,7 @@ describe('test required rule', () => {
 
     it('should falsely validate textarea', () => {
         const area = mount<ValidatorArea, ValidatorAreaProps>(
-            <ValidatorArea rules={[required]}>
+            <ValidatorArea rules="required">
                 <textarea name="test" />
             </ValidatorArea>
         );
@@ -31,7 +35,7 @@ describe('test required rule', () => {
 
     it('should falsely validate select', () => {
         const area = mount<ValidatorArea, ValidatorAreaProps>(
-            <ValidatorArea rules={[required]}>
+            <ValidatorArea rules="required">
                 <select name="test">
                     <option value="">Choose...</option>
                 </select>
@@ -45,7 +49,7 @@ describe('test required rule', () => {
 
     it('should validate select', () => {
         const area = mount<ValidatorArea, ValidatorAreaProps>(
-            <ValidatorArea rules={[required]}>
+            <ValidatorArea rules="required">
                 <select name="test">
                     <option value="foo">Choose...</option>
                 </select>
diff --git a/package-lock.json b/package-lock.json
index 173f824..e93233d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1325,6 +1325,49 @@
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==",
       "dev": true
     },
+    "@formatjs/ecma402-abstract": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.2.0.tgz",
+      "integrity": "sha512-jc1bZHhIE1YI0HnZIZcdlKpF4wle2pkgQpzXHDoyy4bUqzBSvDqktnF26hOkyA04KD4wqd61gkuTvRrHMmroAg=="
+    },
+    "@formatjs/intl": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-1.3.0.tgz",
+      "integrity": "sha512-wjzzA7CALsYDjDOdpmGGsMYUblp9LcPtxdjjdZyd8s4xQ5lZZUWrJxqzInkax89TWeGTprHGYh31qPpYbjsRRQ==",
+      "requires": {
+        "@formatjs/ecma402-abstract": "^1.2.0",
+        "@formatjs/intl-displaynames": "^3.3.6",
+        "@formatjs/intl-listformat": "^4.2.5",
+        "@formatjs/intl-relativetimeformat": "^7.2.5",
+        "fast-memoize": "^2.5.2",
+        "intl-messageformat": "^9.3.6",
+        "intl-messageformat-parser": "^6.0.5"
+      }
+    },
+    "@formatjs/intl-displaynames": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-3.3.6.tgz",
+      "integrity": "sha512-yrTDL3U0MR10vp17noLI2JuNiHq/Fp1P8/mW/t1gCMOpw38FY4bFTOV68FWxSZwzsy/yETqXHjPUTUbpLtEO/Q==",
+      "requires": {
+        "@formatjs/ecma402-abstract": "^1.2.0"
+      }
+    },
+    "@formatjs/intl-listformat": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-4.2.5.tgz",
+      "integrity": "sha512-mcH/CdRH58ao3caZzIdAA32vZM5woxTszIieRjhY2qHxCorVzBPXFYCGTVCO9rtKVFlkMR/pyzaqH3Y1gNiRmw==",
+      "requires": {
+        "@formatjs/ecma402-abstract": "^1.2.0"
+      }
+    },
+    "@formatjs/intl-relativetimeformat": {
+      "version": "7.2.5",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-relativetimeformat/-/intl-relativetimeformat-7.2.5.tgz",
+      "integrity": "sha512-KTf0zTP7YbrVAPPJMnZNYRrNvEwuNwqOVNcfz0cQwewjE2ImxPW+03zdRHkwDt92WbRv6T0EDRBpgC2Dxaip6Q==",
+      "requires": {
+        "@formatjs/ecma402-abstract": "^1.2.0"
+      }
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -6715,6 +6758,11 @@
       "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
       "dev": true
     },
+    "fast-memoize": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.2.tgz",
+      "integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw=="
+    },
     "faye-websocket": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.10.0.tgz",
@@ -7928,6 +7976,23 @@
       "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==",
       "dev": true
     },
+    "intl-messageformat": {
+      "version": "9.3.6",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.3.6.tgz",
+      "integrity": "sha512-ZmaPVtB1i0Ao64sI+kCl+uAqlHGn1KyHHPYw2W/cd4q00ACDBpdeqeD3y4tQnMXMGZriwbSn90dJ+bvSkQr1dA==",
+      "requires": {
+        "fast-memoize": "^2.5.2",
+        "intl-messageformat-parser": "^6.0.5"
+      }
+    },
+    "intl-messageformat-parser": {
+      "version": "6.0.5",
+      "resolved": "https://registry.npmjs.org/intl-messageformat-parser/-/intl-messageformat-parser-6.0.5.tgz",
+      "integrity": "sha512-4aO/RTUtzWiV/naqif4ubwz8P7THOxhraN6XmQpgXj4mdGjtPNO2j3vKlEDgAvv4BEi12R/JCHfLf7SUyfPKog==",
+      "requires": {
+        "@formatjs/ecma402-abstract": "^1.2.0"
+      }
+    },
     "invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
diff --git a/package.json b/package.json
index fd85d0d..093a971 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
+        "@formatjs/intl": "^1.3.0",
         "@testing-library/jest-dom": "^4.2.4",
         "@testing-library/react": "^9.3.2",
         "@testing-library/user-event": "^7.1.2",
diff --git a/src/Rule.ts b/src/Rule.ts
index 1a9bf36..ad55d06 100644
--- a/src/Rule.ts
+++ b/src/Rule.ts
@@ -1,6 +1,6 @@
 import { ValidationElement } from './ValidationElement';
 
 export type Rule = {
-    passed(elements: ValidationElement[]): boolean;
-    message(name: string): string;
+    passed(elements: ValidationElement[], ...args: string[]): boolean;
+    message(): string;
 }
diff --git a/src/RuleOptions.ts b/src/RuleOptions.ts
index 43a90cd..806ff39 100644
--- a/src/RuleOptions.ts
+++ b/src/RuleOptions.ts
@@ -1,3 +1,2 @@
-import { Rule } from './Rule';
 
-export type RuleOptions = Rule[] | string[];
+export type RuleOptions = string | string[];
diff --git a/src/Validator.ts b/src/Validator.ts
index 887d207..8cc703e 100644
--- a/src/Validator.ts
+++ b/src/Validator.ts
@@ -1,12 +1,155 @@
+import {
+    createIntl,
+    createIntlCache,
+    IntlCache,
+    IntlShape
+} from '@formatjs/intl'
 import { Rule } from './Rule';
 import ValidatorProvider from './Provider';
 import ValidatorArea from './ValidatorArea';
+import { ValidationElement } from './ValidationElement';
+import { RuleOptions } from './RuleOptions';
+import { capitalize } from './utils/utils';
 
 export class Validator {
-    public static rules: Record<string, Rule> = {};
+    /**
+     * Area component used as wrapper around input components
+     */
+    public static Area = ValidatorArea;
 
+    /**
+     * Provider component used to validate multiple areas at once
+     */
     public static Provider = ValidatorProvider;
-    public static Area = ValidatorArea;
+
+    /**
+     * Map containing the rule object belonging to a rule string
+     */
+    public static rules: Record<string, Rule> = {};
+
+    /**
+     * The elements to be validated
+     */
+    private readonly elements: ValidationElement[];
+
+    /**
+     * The rules to validate the elements with
+     */
+    private readonly validationRules: RuleOptions;
+
+    /**
+     * Validation errors when elements are invalid
+     */
+    private errors: string[] = [];
+
+    /**
+     * Name used to specify error messages
+     */
+    private name: string | null;
+
+    /**
+     * INtl cache to prevent memory leaks
+     */
+    private intlCache: IntlCache;
+
+    /**
+     * Intl constructor to localize messages
+     */
+    private intl: IntlShape<string>;
+
+    public constructor(
+        elements: ValidationElement[],
+        rules: RuleOptions,
+        name: string | null,
+    ) {
+        this.elements = elements;
+        this.validationRules = rules;
+        this.name = name;
+
+        this.intlCache = createIntlCache();
+        this.intl = this.createIntl();
+    }
+
+    private createIntl(): IntlShape<string> {
+        return createIntl({
+            locale: 'en'
+        }, this.intlCache);
+    }
+
+    /**
+     * Validate the elements
+     */
+    public validate(): boolean {
+        let ruleList: string[];
+        this.errors = [];
+
+        if (typeof this.validationRules === 'string') {
+            ruleList = this.validationRules.split('|');
+        } else {
+            ruleList = this.validationRules;
+        }
+
+        return !ruleList
+            .map((rule: string) => this.validateRule(rule))
+            .filter((passed: boolean) => !passed)
+            .length;
+    }
+
+    /**
+     * Validate a specific rule
+     */
+    private validateRule(rule: string): boolean {
+        const [ruleName, ruleArgs = ''] = rule.split(':');
+        if (Validator.hasRule(ruleName)) {
+            const ruleObj = Validator.rules[ruleName];
+            const ruleArgsArray = ruleArgs.split(',');
+
+            if(!ruleObj.passed(this.elements, ...ruleArgsArray)) {
+                this.errors.push(this.localize(ruleObj.message(), ...ruleArgsArray));
+                return false;
+            }
+
+            return true;
+        }
+
+        throw new Error(`Validation rule ${rule} not found.`);
+    }
+
+    /*
+     * Get the capitalized, localized message
+     */
+    public localize(message: string, ...ruleArgs: string[]): string {
+        return capitalize(this.intl.formatMessage({
+            id: message,
+            defaultMessage: message
+        }, {
+            name: this.name,
+            ...ruleArgs
+        }));
+    }
+
+    /**
+     * Get all the errors
+     */
+    public getErrors(): string[] {
+        return this.errors;
+    }
+
+    /**
+     * Merges rules from different sources into one array
+     */
+    public static mergeRules(...rules: RuleOptions[]): string[] {
+        const mergedRules: string[] = [];
+        rules.forEach((rule: string | string[]) => {
+            if (typeof rule === 'string') {
+                rule.split('|').forEach((subRule) => mergedRules.push(subRule));
+            } else if (Array.isArray(rule) && rule.length) {
+                Validator.mergeRules(...rule).forEach((subRule) => mergedRules.push(subRule));
+            }
+        });
+
+        return mergedRules;
+    }
 
     public static extend(name: string, rule: Rule): void {
         Validator.rules[name] = rule;
diff --git a/src/ValidatorArea.tsx b/src/ValidatorArea.tsx
index be6b111..8875c7e 100644
--- a/src/ValidatorArea.tsx
+++ b/src/ValidatorArea.tsx
@@ -45,33 +45,27 @@ class ValidatorArea extends React.Component<ValidatorAreaProps, ValidatorAreaSta
             this.setState(() => ({
                 errors: []
             }), () => {
-                const refs = ref ? [ref] : this.inputRefs;
                 const { rules: propRules } = this.props as ValidatorAreaPropsWithDefault;
                 const { rules: contextRules } = this.context;
-                const rules = [...propRules, ...contextRules];
-                const messages: string[] = [];
-
-                for (let i = 0; i < rules.length; i++) {
-                    let rule = rules[i];
+                const rules = Validator.mergeRules(propRules, contextRules);
+                const refs = ref ? [ref] : this.inputRefs;
 
-                    if (typeof rule === 'string' && Validator.hasRule(rule)) {
-                        rule = Validator.rules[rule];
-                    }
+                const validator = new Validator(
+                    refs,
+                    rules,
+                    ref ? ref.getAttribute('name') : this.getName()
+                );
 
-                    if (typeof rule !== 'string' && !rule.passed(refs)) {
-                        messages.push(rule.message(this.getName()));
-                        this.dirty = true;
-                    }
-                }
+                this.dirty = !validator.validate();
 
                 if (this.dirty) {
-                    this.setState(() => ({
-                        errors: messages
-                    }), () => {
+                    this.setState({
+                        errors: validator.getErrors()
+                    }, () => {
                         resolve(false);
-                    });
+                    })
                 } else {
-                    resolve(true);
+                    resolve(true)
                 }
             });
         })
diff --git a/src/rules/max.ts b/src/rules/max.ts
index f69a467..d3d6371 100644
--- a/src/rules/max.ts
+++ b/src/rules/max.ts
@@ -1,28 +1,24 @@
-import { Rule } from '../Rule';
 import { ValidationElement } from '../ValidationElement';
-import { capitalize } from '../utils/utils';
 
-export default (value: number): Rule => {
-    return {
-        passed(elements: ValidationElement[]): boolean {
-            let passed = true;
+export default {
+    passed(elements: ValidationElement[], value: string): boolean {
+        let passed = true;
 
-            elements.forEach((element) => {
-                if (element instanceof HTMLInputElement
-                    || element instanceof HTMLTextAreaElement
-                ) {
-                    passed = parseFloat(element.value.trim()) <= value;
-                }
+        elements.forEach((element) => {
+            if (element instanceof HTMLInputElement
+                || element instanceof HTMLTextAreaElement
+            ) {
+                passed = parseFloat(element.value.trim()) <= parseInt(value, 10);
+            }
 
-                if (element instanceof HTMLSelectElement) {
-                    passed = parseFloat(element.options[element.selectedIndex].value) <= value;
-                }
-            });
+            if (element instanceof HTMLSelectElement) {
+                passed = parseFloat(element.options[element.selectedIndex].value) <= parseInt(value, 10);
+            }
+        });
 
-            return passed;
-        },
-        message(name: string): string {
-            return `${capitalize(name)} should be not greater than ${value}`
-        }
+        return passed;
+    },
+    message(): string {
+        return `{name} should be not greater than {0}`
     }
 }
diff --git a/src/rules/min.ts b/src/rules/min.ts
index 7d0d2c3..30e864d 100644
--- a/src/rules/min.ts
+++ b/src/rules/min.ts
@@ -1,28 +1,24 @@
-import { Rule } from '../Rule';
 import { ValidationElement } from '../ValidationElement';
-import { capitalize } from '../utils/utils';
 
-export default (value: number): Rule => {
-    return {
-        passed(elements: ValidationElement[]): boolean {
-            let passed = true;
+export default {
+    passed(elements: ValidationElement[], ...values: string[]): boolean {
+        let passed = true;
 
-            elements.forEach((element) => {
-                if (element instanceof HTMLInputElement
-                    || element instanceof HTMLTextAreaElement
-                ) {
-                    passed = parseFloat(element.value.trim()) >= value;
-                }
+        elements.forEach((element) => {
+            if (element instanceof HTMLInputElement
+                || element instanceof HTMLTextAreaElement
+            ) {
+                passed = parseFloat(element.value.trim()) >= parseInt(values[0]);
+            }
 
-                if (element instanceof HTMLSelectElement) {
-                    passed = parseFloat(element.options[element.selectedIndex].value) >= value;
-                }
-            });
+            if (element instanceof HTMLSelectElement) {
+                passed = parseFloat(element.options[element.selectedIndex].value) >= parseInt(values[0]);
+            }
+        });
 
-            return passed;
-        },
-        message(name: string): string {
-            return `${capitalize(name)} should be at least ${value}`
-        }
+        return passed;
+    },
+    message(): string {
+        return `{name} should be at least {0}`
     }
 }
diff --git a/src/rules/required.ts b/src/rules/required.ts
index 533216c..719d4cf 100644
--- a/src/rules/required.ts
+++ b/src/rules/required.ts
@@ -1,5 +1,4 @@
 import { ValidationElement } from '../ValidationElement';
-import { capitalize } from '../utils/utils';
 
 export default {
     passed(elements: ValidationElement[]): boolean {
@@ -20,7 +19,7 @@ export default {
         return passed;
     },
 
-    message(name: string): string {
-        return `${capitalize(name)} is required`;
+    message(): string {
+        return `{name} is required`;
     }
 };

From e67c6955ad4c521ca9df56d961b23204c7a97870 Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Sun, 20 Sep 2020 14:12:34 +0200
Subject: [PATCH 2/6] Fixed eslint for tests

---
 __tests__/Provider.test.tsx | 30 +++++++++++++++---------------
 tsconfig.json               |  3 ++-
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/__tests__/Provider.test.tsx b/__tests__/Provider.test.tsx
index e7da24d..5be86b3 100644
--- a/__tests__/Provider.test.tsx
+++ b/__tests__/Provider.test.tsx
@@ -39,21 +39,21 @@ describe('test Provider', () => {
         expect(provider.instance().props.rules).toBeDefined();
     });
 
-    it('should throw error when area with existing name is addeded', () => {
-            const provider = () => {
-                mount<ValidatorProvider, ValidatorProviderProps>(
-                    <ValidatorProvider>
-                        <ValidatorArea name="test">
-                            <div />
-                        </ValidatorArea>
-                        <ValidatorArea name="test">
-                            <div />
-                        </ValidatorArea>
-                    </ValidatorProvider>
-                );
-            }
-
-            expect(() => provider()).toThrow('Validation area names should be unique');
+    it('should throw error when area with existing name is added', () => {
+        const provider = () => {
+            mount<ValidatorProvider, ValidatorProviderProps>(
+                <ValidatorProvider>
+                    <ValidatorArea name="test">
+                        <div />
+                    </ValidatorArea>
+                    <ValidatorArea name="test">
+                        <div />
+                    </ValidatorArea>
+                </ValidatorProvider>
+            );
+        }
+
+        expect(() => provider()).toThrow('Validation area names should be unique');
     });
 
     it('should render with function as child', () => {
diff --git a/tsconfig.json b/tsconfig.json
index 49b28b4..69d9ec3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -33,7 +33,8 @@
         "isolatedModules": true
     },
     "include": [
-        "src"
+        "src",
+        "__tests__"
     ],
     "exclude": [
         "node_modules",

From f24b024b8372fb2800a3a260d6c23d87d1dd7219 Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Sun, 20 Sep 2020 17:06:54 +0200
Subject: [PATCH 3/6] Added docs, cleanup

---
 __tests__/Provider.test.tsx                 |  2 +-
 src/AreaScope.ts                            |  3 +++
 src/Messages.ts                             |  3 +++
 src/ProviderScope.ts                        |  3 +++
 src/Rule.ts                                 |  6 +++++
 src/RuleOptions.ts                          |  4 ++-
 src/ValidationElement.ts                    |  3 +++
 src/Validator.ts                            | 11 ++++++++-
 src/ValidatorArea.tsx                       | 27 +++++++++++++++++----
 src/{Provider.tsx => ValidatorProvider.tsx} | 12 +++++++++
 src/index.ts                                |  2 +-
 11 files changed, 67 insertions(+), 9 deletions(-)
 rename src/{Provider.tsx => ValidatorProvider.tsx} (90%)

diff --git a/__tests__/Provider.test.tsx b/__tests__/Provider.test.tsx
index 5be86b3..28e9cd8 100644
--- a/__tests__/Provider.test.tsx
+++ b/__tests__/Provider.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { Validator, ValidatorArea, ValidatorProvider } from '../src';
-import { ValidatorProviderProps } from '../src/Provider';
+import { ValidatorProviderProps } from '../src/ValidatorProvider';
 
 
 const tick = () => {
diff --git a/src/AreaScope.ts b/src/AreaScope.ts
index 3b194b3..e48ac56 100644
--- a/src/AreaScope.ts
+++ b/src/AreaScope.ts
@@ -1,3 +1,6 @@
 export interface AreaScope {
+    /**
+     * The errors after validating the area
+     */
     errors: string[];
 }
diff --git a/src/Messages.ts b/src/Messages.ts
index 4d0798b..76db34e 100644
--- a/src/Messages.ts
+++ b/src/Messages.ts
@@ -1 +1,4 @@
+/**
+ * Type of the errors associated with a name
+ */
 export type Messages = Record<string, string[]>;
diff --git a/src/ProviderScope.ts b/src/ProviderScope.ts
index 1603173..287fefe 100644
--- a/src/ProviderScope.ts
+++ b/src/ProviderScope.ts
@@ -1,3 +1,6 @@
 export interface ProviderScope {
+    /**
+     * Validate all areas in the provider and call callback when valid
+     */
     validate: (onValidated?: () => void) => Promise<void>;
 }
diff --git a/src/Rule.ts b/src/Rule.ts
index ad55d06..6ea1920 100644
--- a/src/Rule.ts
+++ b/src/Rule.ts
@@ -1,6 +1,12 @@
 import { ValidationElement } from './ValidationElement';
 
 export type Rule = {
+    /**
+     * Returns whether the rule passed with the given element(s)
+     */
     passed(elements: ValidationElement[], ...args: string[]): boolean;
+    /**
+     * Message shown when the rule doesn't pass
+     */
     message(): string;
 }
diff --git a/src/RuleOptions.ts b/src/RuleOptions.ts
index 806ff39..eacc90c 100644
--- a/src/RuleOptions.ts
+++ b/src/RuleOptions.ts
@@ -1,2 +1,4 @@
-
+/**
+ * Type of the rules that can be applied to providers, areas and the validator class
+ */
 export type RuleOptions = string | string[];
diff --git a/src/ValidationElement.ts b/src/ValidationElement.ts
index 24c54b9..b8c1d7e 100644
--- a/src/ValidationElement.ts
+++ b/src/ValidationElement.ts
@@ -1 +1,4 @@
+/**
+ * The type of elements that can be validated
+ */
 export type ValidationElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
diff --git a/src/Validator.ts b/src/Validator.ts
index 8cc703e..ddb37d6 100644
--- a/src/Validator.ts
+++ b/src/Validator.ts
@@ -5,7 +5,7 @@ import {
     IntlShape
 } from '@formatjs/intl'
 import { Rule } from './Rule';
-import ValidatorProvider from './Provider';
+import ValidatorProvider from './ValidatorProvider';
 import ValidatorArea from './ValidatorArea';
 import { ValidationElement } from './ValidationElement';
 import { RuleOptions } from './RuleOptions';
@@ -70,6 +70,9 @@ export class Validator {
         this.intl = this.createIntl();
     }
 
+    /**
+     * Creates a new intl instance
+     */
     private createIntl(): IntlShape<string> {
         return createIntl({
             locale: 'en'
@@ -151,10 +154,16 @@ export class Validator {
         return mergedRules;
     }
 
+    /**
+     * Extend the validator with a new rule
+     */
     public static extend(name: string, rule: Rule): void {
         Validator.rules[name] = rule;
     }
 
+    /**
+     * Chech whether the validator has a rule
+     */
     public static hasRule(name: string): boolean {
         return Object.prototype.hasOwnProperty.call(Validator.rules, name);
     }
diff --git a/src/ValidatorArea.tsx b/src/ValidatorArea.tsx
index 8875c7e..2042449 100644
--- a/src/ValidatorArea.tsx
+++ b/src/ValidatorArea.tsx
@@ -39,6 +39,9 @@ class ValidatorArea extends React.Component<ValidatorAreaProps, ValidatorAreaSta
         rules: []
     }
 
+    /**
+     * Validate the area, or a given element when provided
+     */
     public validate(ref?: ValidationElement): Promise<boolean> {
         return new Promise<boolean>((resolve) => {
             this.dirty = false;
@@ -71,6 +74,9 @@ class ValidatorArea extends React.Component<ValidatorAreaProps, ValidatorAreaSta
         })
     }
 
+    /**
+     * @inheritDoc
+     */
     public componentDidMount(): void {
         const { addArea } = this.context;
 
@@ -91,14 +97,16 @@ class ValidatorArea extends React.Component<ValidatorAreaProps, ValidatorAreaSta
         throw new Error('All input areas should contain either a name prop, or only one input-like with a name prop');
     }
 
+    /**
+     * Returns the input references within the area
+     */
     public getInputRefs(): ValidationElement[] {
         return this.inputRefs;
     }
 
-    private validateComponent(ref: ValidationElement): void {
-        this.validate(ref);
-    }
-
+    /**
+     * Prepare inputs so they can be validated when interacted with
+     */
     private prepareInputs(
         children: React.ReactNode
     ): React.ReactNode {
@@ -124,7 +132,7 @@ class ValidatorArea extends React.Component<ValidatorAreaProps, ValidatorAreaSta
                                     child.props.onBlur();
                                 }
 
-                                this.validateComponent(ref);
+                                this.validate(ref);
                             },
                             ref: (node: ValidationElement) => {
                                 if (node) {
@@ -141,10 +149,16 @@ class ValidatorArea extends React.Component<ValidatorAreaProps, ValidatorAreaSta
         );
     }
 
+    /**
+     * Indicates whether the node is validatable
+     */
     private isValidatableNode(node: React.ReactElement): boolean {
         return node.type === 'input' || node.type === 'textarea' || node.type === 'select';
     }
 
+    /**
+     * Returns the properties accessible in the area component scope
+     */
     private getScopedProperties(): AreaScope {
         const { errors } = this.state;
 
@@ -153,6 +167,9 @@ class ValidatorArea extends React.Component<ValidatorAreaProps, ValidatorAreaSta
         };
     }
 
+    /**
+     * @inheritDoc
+     */
     public render(): React.ReactNode {
         let { children } = this.props;
         this.inputRefs = [];
diff --git a/src/Provider.tsx b/src/ValidatorProvider.tsx
similarity index 90%
rename from src/Provider.tsx
rename to src/ValidatorProvider.tsx
index 3d12382..85e67fb 100644
--- a/src/Provider.tsx
+++ b/src/ValidatorProvider.tsx
@@ -21,6 +21,9 @@ class ValidatorProvider extends React.Component<ValidatorProviderProps, Validato
         errors: {}
     }
 
+    /**
+     * Add a new area to the provider
+     */
     private addArea(name: string, ref: ValidatorArea) {
         this.setState((prevState) => {
             if (Object.prototype.hasOwnProperty.call(prevState.areas, name)) {
@@ -36,6 +39,9 @@ class ValidatorProvider extends React.Component<ValidatorProviderProps, Validato
         });
     }
 
+    /**
+     * Validate all areas within this provider
+     */
     private async validate(onValidated?: () => void): Promise<void> {
         const { areas } = this.state;
 
@@ -48,12 +54,18 @@ class ValidatorProvider extends React.Component<ValidatorProviderProps, Validato
         }
     }
 
+    /**
+     * Returns the properties accessible in the provider component scope
+     */
     private getScopedProperties(): ProviderScope {
         return {
             validate: (onValidated?: () => void): Promise<void> => this.validate(onValidated)
         };
     }
 
+    /**
+     * @inheritDoc
+     */
     public render(): React.ReactNode {
         const {
             rules
diff --git a/src/index.ts b/src/index.ts
index 0e056ba..57c328b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,4 @@
-export { default as ValidatorProvider } from './Provider';
+export { default as ValidatorProvider } from './ValidatorProvider';
 export { Validator } from './Validator';
 export { default as ValidatorArea } from './ValidatorArea';
 export { ValidatorContext } from './ValidatorContext';

From 88e920ea9f9ef5ade08e2bb0f5b08c3920188b40 Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Mon, 21 Sep 2020 09:21:47 +0200
Subject: [PATCH 4/6] Fixed typo

---
 src/Validator.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Validator.ts b/src/Validator.ts
index ddb37d6..ee2e7ff 100644
--- a/src/Validator.ts
+++ b/src/Validator.ts
@@ -48,7 +48,7 @@ export class Validator {
     private name: string | null;
 
     /**
-     * INtl cache to prevent memory leaks
+     * Intl cache to prevent memory leaks
      */
     private intlCache: IntlCache;
 

From ea11a70f496cd944923548b71a49c7217a94e024 Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Mon, 21 Sep 2020 09:38:12 +0200
Subject: [PATCH 5/6] Fixed typo

---
 src/Validator.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Validator.ts b/src/Validator.ts
index ee2e7ff..ddd9524 100644
--- a/src/Validator.ts
+++ b/src/Validator.ts
@@ -162,7 +162,7 @@ export class Validator {
     }
 
     /**
-     * Chech whether the validator has a rule
+     * Check whether the validator has a rule
      */
     public static hasRule(name: string): boolean {
         return Object.prototype.hasOwnProperty.call(Validator.rules, name);

From b5aadb9b1203fb47ea9987c02d4a8d9e47e7402b Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Tue, 22 Sep 2020 18:50:37 +0200
Subject: [PATCH 6/6] Added root imports, reorganized file structure

---
 __tests__/Area.test.tsx                    |  6 +++---
 __tests__/Provider.test.tsx                |  9 +++++----
 __tests__/rules/max.test.tsx               |  6 +++---
 __tests__/rules/min.test.tsx               |  6 +++---
 __tests__/rules/required.test.tsx          |  6 +++---
 jest.config.json                           |  5 ++++-
 src/Validator.ts                           | 22 +++++-----------------
 src/ValidatorContext.ts                    |  4 ++--
 src/{ => components}/ValidatorArea.tsx     | 14 ++++++--------
 src/{ => components}/ValidatorProvider.tsx | 12 ++++++------
 src/index.ts                               |  6 +++---
 tsconfig.json                              | 11 +++++++----
 12 files changed, 50 insertions(+), 57 deletions(-)
 rename src/{ => components}/ValidatorArea.tsx (93%)
 rename src/{ => components}/ValidatorProvider.tsx (86%)

diff --git a/__tests__/Area.test.tsx b/__tests__/Area.test.tsx
index 38115bd..d69e904 100644
--- a/__tests__/Area.test.tsx
+++ b/__tests__/Area.test.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { ValidatorArea, Validator } from '../src';
-import { ValidatorAreaProps } from '../src/ValidatorArea';
+import { Validator } from '@/Validator';
+import { ValidatorArea, ValidatorAreaProps } from '@/components/ValidatorArea';
 
-describe('test Provider', () => {
+describe('test ValidatorProvider', () => {
     beforeEach(() => {
         Validator.extend('passes_not', {
             passed(): boolean {
diff --git a/__tests__/Provider.test.tsx b/__tests__/Provider.test.tsx
index 28e9cd8..cbc57be 100644
--- a/__tests__/Provider.test.tsx
+++ b/__tests__/Provider.test.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { Validator, ValidatorArea, ValidatorProvider } from '../src';
-import { ValidatorProviderProps } from '../src/ValidatorProvider';
+import { Validator } from '@/Validator';
+import ValidatorProvider, { ValidatorProviderProps } from '@/components/ValidatorProvider';
+import { ValidatorArea } from '@/components/ValidatorArea';
 
 
 const tick = () => {
@@ -10,7 +11,7 @@ const tick = () => {
     })
 }
 
-describe('test Provider', () => {
+describe('test ValidatorProvider', () => {
     beforeEach(() => {
         Validator.extend('passes_not', {
             passed(): boolean {
@@ -31,7 +32,7 @@ describe('test Provider', () => {
         });
     });
 
-    it('should render Provider', () => {
+    it('should render ValidatorProvider', () => {
         const provider = mount<ValidatorProvider, ValidatorProviderProps>(
             <ValidatorProvider rules="passes_not" />
         );
diff --git a/__tests__/rules/max.test.tsx b/__tests__/rules/max.test.tsx
index e18a64a..010db95 100644
--- a/__tests__/rules/max.test.tsx
+++ b/__tests__/rules/max.test.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { Validator, ValidatorArea } from '../../src';
-import { ValidatorAreaProps } from '../../src/ValidatorArea';
-import max from '../../src/rules/max';
+import max from '@/rules/max';
+import { Validator } from '@/Validator';
+import { ValidatorArea, ValidatorAreaProps } from '@/components/ValidatorArea';
 
 describe('test max rule', () => {
     beforeEach(() => {
diff --git a/__tests__/rules/min.test.tsx b/__tests__/rules/min.test.tsx
index 8fdefb9..a7532f2 100644
--- a/__tests__/rules/min.test.tsx
+++ b/__tests__/rules/min.test.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { Validator, ValidatorArea } from '../../src';
-import { ValidatorAreaProps } from '../../src/ValidatorArea';
-import min from '../../src/rules/min';
+import { ValidatorArea, ValidatorAreaProps } from '@/components/ValidatorArea';
+import min from '@/rules/min';
+import { Validator } from '@/Validator';
 
 describe('test min rule', () => {
     Validator.extend('min', min);
diff --git a/__tests__/rules/required.test.tsx b/__tests__/rules/required.test.tsx
index a174b56..0acdee6 100644
--- a/__tests__/rules/required.test.tsx
+++ b/__tests__/rules/required.test.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { Validator, ValidatorArea } from '../../src';
-import { ValidatorAreaProps } from '../../src/ValidatorArea';
-import required from '../../src/rules/required';
+import required from '@/rules/required';
+import { ValidatorAreaProps, ValidatorArea } from '@/components/ValidatorArea';
+import { Validator } from '@/Validator';
 
 describe('test required rule', () => {
     beforeEach(() => {
diff --git a/jest.config.json b/jest.config.json
index 0037f4e..88defc4 100644
--- a/jest.config.json
+++ b/jest.config.json
@@ -1,4 +1,7 @@
 {
     "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.[jt]sx?$",
-    "setupFilesAfterEnv": ["./setupTests.ts"]
+    "setupFilesAfterEnv": ["./setupTests.ts"],
+    "moduleNameMapper": {
+        "@/(.*)": "<rootDir>/src/$1"
+    }
 }
diff --git a/src/Validator.ts b/src/Validator.ts
index ddd9524..c5ded9f 100644
--- a/src/Validator.ts
+++ b/src/Validator.ts
@@ -5,23 +5,11 @@ import {
     IntlShape
 } from '@formatjs/intl'
 import { Rule } from './Rule';
-import ValidatorProvider from './ValidatorProvider';
-import ValidatorArea from './ValidatorArea';
-import { ValidationElement } from './ValidationElement';
-import { RuleOptions } from './RuleOptions';
-import { capitalize } from './utils/utils';
+import { ValidationElement } from '@/ValidationElement';
+import { RuleOptions } from '@/RuleOptions';
+import { capitalize } from '@/utils/utils';
 
 export class Validator {
-    /**
-     * Area component used as wrapper around input components
-     */
-    public static Area = ValidatorArea;
-
-    /**
-     * Provider component used to validate multiple areas at once
-     */
-    public static Provider = ValidatorProvider;
-
     /**
      * Map containing the rule object belonging to a rule string
      */
@@ -45,12 +33,12 @@ export class Validator {
     /**
      * Name used to specify error messages
      */
-    private name: string | null;
+    private readonly name: string | null;
 
     /**
      * Intl cache to prevent memory leaks
      */
-    private intlCache: IntlCache;
+    private readonly intlCache: IntlCache;
 
     /**
      * Intl constructor to localize messages
diff --git a/src/ValidatorContext.ts b/src/ValidatorContext.ts
index d55ac9c..509e32f 100644
--- a/src/ValidatorContext.ts
+++ b/src/ValidatorContext.ts
@@ -1,6 +1,6 @@
 import React from 'react';
-import { RuleOptions } from './RuleOptions';
-import ValidatorArea from './ValidatorArea';
+import { RuleOptions } from '@/RuleOptions';
+import { ValidatorArea } from '@/components/ValidatorArea';
 
 export interface ValidatorContextProps {
     rules: RuleOptions;
diff --git a/src/ValidatorArea.tsx b/src/components/ValidatorArea.tsx
similarity index 93%
rename from src/ValidatorArea.tsx
rename to src/components/ValidatorArea.tsx
index 2042449..7260104 100644
--- a/src/ValidatorArea.tsx
+++ b/src/components/ValidatorArea.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { isFragment } from 'react-is';
-import { RuleOptions } from './RuleOptions';
-import { ValidatorContext } from './ValidatorContext';
-import { ValidationElement } from './ValidationElement';
-import { AreaScope } from './AreaScope';
-import { Validator } from './Validator';
+import { RuleOptions } from '@/RuleOptions';
+import { AreaScope } from '@/AreaScope';
+import { ValidationElement } from '@/ValidationElement';
+import { ValidatorContext } from '@/ValidatorContext';
+import { Validator } from '@/Validator';
 
 export interface ValidatorAreaProps {
     rules?: RuleOptions;
@@ -25,7 +25,7 @@ interface ValidatorAreaComponentsProps {
     ref: React.RefObject<ValidationElement>;
 }
 
-class ValidatorArea extends React.Component<ValidatorAreaProps, ValidatorAreaState> {
+export class ValidatorArea extends React.Component<ValidatorAreaProps, ValidatorAreaState> {
     public static contextType = ValidatorContext;
     public context!: React.ContextType<typeof ValidatorContext>;
     private inputRefs: ValidationElement[] = [];
@@ -183,5 +183,3 @@ class ValidatorArea extends React.Component<ValidatorAreaProps, ValidatorAreaSta
         return this.prepareInputs(children);
     }
 }
-
-export default ValidatorArea;
diff --git a/src/ValidatorProvider.tsx b/src/components/ValidatorProvider.tsx
similarity index 86%
rename from src/ValidatorProvider.tsx
rename to src/components/ValidatorProvider.tsx
index 85e67fb..ab3f74e 100644
--- a/src/ValidatorProvider.tsx
+++ b/src/components/ValidatorProvider.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { ValidatorContext } from './ValidatorContext';
-import { RuleOptions } from './RuleOptions';
-import ValidatorArea from './ValidatorArea';
-import { ProviderScope } from './ProviderScope';
-import { Messages } from './Messages';
+import { Messages } from '@/Messages';
+import { RuleOptions } from '@/RuleOptions';
+import { ProviderScope } from '@/ProviderScope';
+import { ValidatorContext } from '@/ValidatorContext';
+import { ValidatorArea } from '@/components/ValidatorArea';
 
 export interface ValidatorProviderProps {
     rules?: RuleOptions;
@@ -15,7 +15,7 @@ interface ValidatorProviderState {
     errors: Messages
 }
 
-class ValidatorProvider extends React.Component<ValidatorProviderProps, ValidatorProviderState> {
+export class ValidatorProvider extends React.Component<ValidatorProviderProps, ValidatorProviderState> {
     public readonly state: ValidatorProviderState = {
         areas: {},
         errors: {}
diff --git a/src/index.ts b/src/index.ts
index 57c328b..2ffa2ae 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,4 @@
-export { default as ValidatorProvider } from './ValidatorProvider';
+export { ValidatorProvider } from '@/components/ValidatorProvider';
 export { Validator } from './Validator';
-export { default as ValidatorArea } from './ValidatorArea';
-export { ValidatorContext } from './ValidatorContext';
+export { ValidatorArea } from '@/components/ValidatorArea';
+export { ValidatorContext } from '@/ValidatorContext';
diff --git a/tsconfig.json b/tsconfig.json
index 69d9ec3..732a6cd 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -29,12 +29,15 @@
         "skipLibCheck": true,
         "esModuleInterop": true,
         "strict": true,
-        "resolveJsonModule": true,
-        "isolatedModules": true
+        "isolatedModules": true,
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["src/*"]
+        }
     },
     "include": [
-        "src",
-        "__tests__"
+        "src/**/*.ts",
+        "src/**/*.tsx"
     ],
     "exclude": [
         "node_modules",