Merge pull request #840 from rvsia/updateValidationDocs

Update validation docs

Author: Hyperkid123

packages/react-renderer-demo/src/examples/components/validators/url-validator.js

@@ -10,15 +10,6 @@ const componentMapper = {
 };
 const schema = {
   title: 'Start typing',
-  description: (
-    <span>
-      We are using modified redux-form-validators amazing implementation of &nbsp;
-      <a href="https://github.com/gtournie/redux-form-validators#url" rel="noopener noreferrer" target="_blank">
-        URL validator
-      </a>
-      .
-    </span>
-  ),
   fields: [
     {
       component: componentTypes.TEXT_FIELD,

packages/react-renderer-demo/src/helpers/list-of-contents.js

@@ -21,7 +21,6 @@ const useLinkStyles = makeStyles((theme) => ({
     color: theme.palette.text.secondary,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
-    width: 'calc(100% - 32px)',
     whiteSpace: 'nowrap',
     display: 'block',
     paddingLeft: 16,

packages/react-renderer-demo/src/pages/schema/async-validator.md

@@ -5,16 +5,19 @@ import CodeExample from '@docs/code-example';
 
 # Async validator
 
+*(value, allValues, meta) => new Promise*
+
 You can use a Async function as a validator. But it **must be first in the validate array**. Other async validators will be ignored. This rule was created to prevent long asynchronous validation sequences.
 
 You can either use custom function, or custom validator from validator mapper.
 
-<CodeExample mode="preview" source="components/validators/async-validator" />
-
-
 Validator inputs and results are being cached so you will get immediate feedback for recurring values before the validation is actually finished.
 
 If you do not want to trigger the async validator after every stroke, you can use a debounce promise [library](https://github.com/slorber/awesome-debounce-promise)
 (or any other implementation of debouncing.)
 
+## Example
+
+<CodeExample mode="preview" source="components/validators/async-validator" />
+
 </DocPage>

packages/react-renderer-demo/src/pages/schema/custom-validator.md

@@ -5,10 +5,14 @@ import CodeExample from '@docs/code-example';
 
 # Custom validator
 
-As validator you can provide your custom function:
+*(value, allValues, meta) => any | new Promise: any*
 
-<CodeExample mode="preview" source="components/validators/custom-function" />
+As validator you can provide your custom function. This function takes `value`, `allValues` and `meta` as arguments and returns error message when it fails, otherwise it returns undefined. Please see [final form validate prop](https://final-form.org/docs/react-final-form/types/FieldProps#validate).
+
+Check [async documentation](/schema/async-validator) for asynchronous validation.
 
-Please see [final form validate prop](https://final-form.org/docs/react-final-form/types/FieldProps#validate). This function takes `value`, `allValues` and `meta` as arguments and returns error message when it fails, otherwise it returns undefined.
+## Example
+
+<CodeExample mode="preview" source="components/validators/custom-function" />
 
 </DocPage>

packages/react-renderer-demo/src/pages/schema/length-validator.md

@@ -5,6 +5,60 @@ import CodeExample from '@docs/code-example';
 
 # Length validator
 
+Data Driven Forms provides several built length validators:
+
+## MIN_LENGTH
+
+Checks minimal length of the text.
+
+```jsx
+import { validatorTypes } from '@data-driven-forms/react-form-renderer';
+
+
+{
+    type: validatorTypes.MIN_LENGTH,
+    threshold: 5,
+}
+```
+
+## MAX_LENGTH
+
+Checks maximum length of the text.
+
+```jsx
+import { validatorTypes } from '@data-driven-forms/react-form-renderer';
+
+
+{
+    type: validatorTypes.MAX_LENGTH,
+    threshold: 5,
+}
+```
+
+## EXACT_LENGTH
+
+Checks exact length of the text.
+
+```jsx
+import { validatorTypes } from '@data-driven-forms/react-form-renderer';
+
+
+{
+    type: validatorTypes.EXACT_LENGTH,
+    threshold: 5
+}
+```
+
+## Options
+
+### threshold
+
+*number*
+
+Threshold of the validator.
+
+## Example
+
 <CodeExample mode="preview" source="components/validators/length-validators" />
 
 </DocPage>

packages/react-renderer-demo/src/pages/schema/number-value-validator.md

@@ -5,6 +5,52 @@ import CodeExample from '@docs/code-example';
 
 # Number value validator
 
+Data Driven Forms provides several built number validators:
+
+## MIN_NUMBER_VALUE
+
+Checks if the number is smaller than a value.
+
+```jsx
+import { validatorTypes } from '@data-driven-forms/react-form-renderer';
+
+
+{
+    type: validatorTypes.MIN_NUMBER_VALUE,
+    threshold: 5
+}
+```
+
+## MAX_NUMBER_VALUE
+
+Checks if the number is greater than a value.
+
+```jsx
+import { validatorTypes } from '@data-driven-forms/react-form-renderer';
+
+
+{
+    type: validatorTypes.MAX_NUMBER_VALUE,
+    threshold: 5
+}
+```
+
+## Options
+
+### value
+
+*number*
+
+Value to compate.
+
+### includeThreshold
+
+*boolean* default: `true`
+
+If true, the threshold value will be considered valid.
+
+## Example
+
 <CodeExample mode="preview" source="components/validators/number-validator" />
 
 </DocPage>

packages/react-renderer-demo/src/pages/schema/pattern-validator.md

@@ -5,6 +5,43 @@ import CodeExample from '@docs/code-example';
 
 # Pattern validator
 
+Data Driven Forms provides a pattern validator that uses regular expression to check the value.
+
+```jsx
+import { validatorTypes } from '@data-driven-forms/react-form-renderer';
+
+
+{
+    type: validatorTypes.PATTERN,
+    pattern: /\d+/
+}
+```
+
+## Options
+
+### pattern
+
+*string | regEx*
+
+To set a pattern you can use a string variant or a regEx.
+
+i.e.
+
+- string: `\d+`
+- regEx: `/\d+/`
+
+### flags
+
+*string*
+
+Sets flags used in the regular expression.
+
+i.e.
+
+- `i` - case-insensitive
+
+## Example
+
 <CodeExample mode="preview" source="components/validators/pattern-validator" />
 
 </DocPage>

packages/react-renderer-demo/src/pages/schema/record-level-validation.md

@@ -5,9 +5,13 @@ import CodeExample from '@docs/code-example';
 
 # Record level validation
 
+*(values) => object | new Promise: Object*
+
 This form of validation enables you to create validation function for whole form. It is useful for some cross validation between multiple fields etc.
 Detailed information can be found [here](https://final-form.org/docs/react-final-form/examples/record-level-validation).
 
+## Example
+
 <CodeExample mode="preview" source="components/validators/record-level-validation" />
 
 </DocPage>

packages/react-renderer-demo/src/pages/schema/required-validator.md

@@ -5,6 +5,19 @@ import CodeExample from '@docs/code-example';
 
 # Required validator
 
+Required validator checks if the value is not empty/falsy.
+
+```jsx
+import { validatorTypes } from '@data-driven-forms/react-form-renderer';
+
+
+{
+    type: validatorTypes.REQUIRED,
+}
+```
+
+## Example
+
 <CodeExample source="components/validators/required-validator" mode="preview" />
 
 </DocPage>

packages/react-renderer-demo/src/pages/schema/url-validator.md

@@ -5,6 +5,12 @@ import CodeExample from '@docs/code-example';
 
 # URL validator
 
+We are using modified redux-form-validators amazing [implementation](https://github.com/gtournie/redux-form-validators#url) of URL validator.
+
+Please follow their docs to see all possible options.
+
+## Example
+
 <CodeExample mode="preview" source="components/validators/url-validator" />
 
 </DocPage>