docs: update examples

README.md

@@ -6,9 +6,13 @@
 
 - [Documentation homepage](https://ealush.github.io/vest)
 - **Try vest live**
-  - [Vanilla JS example](https://stackblitz.com/edit/vest-vanilla-support-example)
-  - ReactJS Examples: [1](https://codesandbox.io/s/youthful-williamson-loijb?file=/src/validate.js), [2](https://stackblitz.com/edit/vest-react-support-example), [3](https://stackblitz.com/edit/vest-react-registration)
-
+  - [Vanilla JS Example](https://stackblitz.com/edit/vest-vanilla-support-example?file=validation.js)
+  - ReactJS Examples:
+    - [Example with test groups](https://codesandbox.io/s/ecstatic-waterfall-4i2ne?file=/src/validate.js)
+    - [Example with Async tests](https://codesandbox.io/s/youthful-williamson-loijb?file=/src/validate.js)
+    - [2](https://stackblitz.com/edit/vest-react-support-example?file=validation.js)
+    - [3](https://stackblitz.com/edit/vest-react-registration?file=validate.js)
+
 ## [Release Notes](https://github.com/ealush/vest/releases)
 
 ## What is Vest?
@@ -22,21 +26,15 @@ The idea behind Vest is that your validations can be described as a 'spec' or a
 
 ```js
 // validation.js
-import vest, { test, enforce } from 'vest';
-
-const validate = vest.create('NewUserForm', data => {
+export default vest.create('NewUserForm', data => {
   test('username', 'Must be at least 3 chars', () => {
     enforce(data.username).longerThanOrEquals(3);
   });
 
   test('email', 'Is not a valid email address', () => {
-    enforce(data.email)
-      .isNotEmpty()
-      .matches(/[^@]+@[^\.]+\..+/g);
+    enforce(data.email).isEmail();
   });
 });
-
-export default validate;
 ```
 
 ```js
@@ -56,9 +54,9 @@ res.getErrors('username'); // returns an array of errors for the `username` fiel
 
 ## Why Vest?
 
-- Vest is really easy to learn, and you can easily take your existing knowledge of unit tests and transfer it to validations.
+- Vest is really easy to learn. You can take your existing knowledge of unit tests and transfer it to validations.
 - Vest takes into account user interaction and warn only validations.
-- Your validations are structured, making it very easy to read and write. All validation files look the same.
+- Your validations are structured, making it very simple to read and write. All validation files look the same.
 - Your validation logic is separate from your feature logic, preventing the spaghetti code that's usually involved with writing validations.
 - Validation logic is easy to share and reuse across features.
 - If your backend is node, you can use the same Vest modules for both client-side and server-side validations.

packages/vest/README.md

@@ -6,8 +6,14 @@
 
 - [Documentation homepage](https://ealush.github.io/vest)
 - **Try vest live**
-  - [Vanilla JS example](https://stackblitz.com/edit/vest-vanilla-support-example)
-  - ReactJS Examples: [1](https://stackblitz.com/edit/vest-react-support-example), [2](https://stackblitz.com/edit/vest-react-registration)
+  - [Vanilla JS Example](https://stackblitz.com/edit/vest-vanilla-support-example?file=validation.js)
+  - ReactJS Examples:
+    - [Example with test groups](https://codesandbox.io/s/ecstatic-waterfall-4i2ne?file=/src/validate.js)
+    - [Example with Async tests](https://codesandbox.io/s/youthful-williamson-loijb?file=/src/validate.js)
+    - [2](https://stackblitz.com/edit/vest-react-support-example?file=validation.js)
+    - [3](https://stackblitz.com/edit/vest-react-registration?file=validate.js)
+
+## [Release Notes](https://github.com/ealush/vest/releases)
 
 ## What is Vest?
 
@@ -20,21 +26,15 @@ The idea behind Vest is that your validations can be described as a 'spec' or a
 
 ```js
 // validation.js
-import vest, { test, enforce } from 'vest';
-
-const validate = vest.create('NewUserForm', data => {
+export default vest.create('NewUserForm', data => {
   test('username', 'Must be at least 3 chars', () => {
     enforce(data.username).longerThanOrEquals(3);
   });
 
   test('email', 'Is not a valid email address', () => {
-    enforce(data.email)
-      .isNotEmpty()
-      .matches(/[^@]+@[^\.]+\..+/g);
+    enforce(data.email).isEmail();
   });
 });
-
-export default validate;
 ```
 
 ```js
@@ -54,9 +54,9 @@ res.getErrors('username'); // returns an array of errors for the `username` fiel
 
 ## Why Vest?
 
-- Vest is really easy to learn, and you can easily take your existing knowledge of unit tests and transfer it to validations.
+- Vest is really easy to learn. You can take your existing knowledge of unit tests and transfer it to validations.
 - Vest takes into account user interaction and warn only validations.
-- Your validations are structured, making it very easy to read and write. All validation files look the same.
+- Your validations are structured, making it very simple to read and write. All validation files look the same.
 - Your validation logic is separate from your feature logic, preventing the spaghetti code that's usually involved with writing validations.
 - Validation logic is easy to share and reuse across features.
 - If your backend is node, you can use the same Vest modules for both client-side and server-side validations.