Add standalone validation to documentation

Author: rvsia

packages/react-renderer-demo/src/components/navigation/schemas/schema.js

@@ -5,6 +5,7 @@ import schemaHooks from './hooks.schema';
 import mappersSchema from './mappers.schema';
 import customExamplesSchema from './custom-examples.schema';
 import providedMappersSchema from './provider-mappers.schema';
+import utilitiesSchema from './utilities.schema';
 
 const schema = [
   {
@@ -45,6 +46,12 @@ const schema = [
     noRoute: true,
     fields: providedMappersSchema
   },
+  {
+    title: 'Utilities',
+    link: 'utilities',
+    noRoute: true,
+    fields: utilitiesSchema
+  },
   {
     title: 'Examples',
     link: 'examples',

packages/react-renderer-demo/src/components/navigation/schemas/utilities.schema.js

@@ -0,0 +1,8 @@
+const customExamplesSchema = [
+  {
+    component: 'standalone-validation',
+    linkText: 'Standalone validation'
+  }
+];
+
+export default customExamplesSchema;

packages/react-renderer-demo/src/examples/components/utilities/standalone-validation.js

@@ -0,0 +1,84 @@
+import validation from '@data-driven-forms/react-form-renderer/validation';
+import React, { useEffect, useState } from 'react';
+
+const asyncValidate = (pass) => {
+  const method = pass ? 'resolve' : 'reject';
+
+  return Promise[method]().catch(() => {
+    // eslint-disable-next-line no-throw-literal
+    throw 'some async validation error';
+  });
+};
+
+const schema = {
+  fields: [
+    { name: 'no-validation', component: 'checkbox' },
+    { name: 'pass', component: 'select', validate: [{ type: 'required' }] },
+    { name: 'invisible', component: 'dual-list', condition: { when: 'x', is: 'abc' }, validate: [{ type: 'required' }] },
+    { name: 'fail', component: 'select', validate: [{ type: 'required' }] },
+    { name: 'subform', component: 'subform', fields: [{ name: 'fail-in-nest', component: 'select', validate: [{ type: 'required' }] }] },
+    { name: 'fail.nested', component: 'select', validate: [{ type: 'required' }] },
+    { name: 'passes.nested', component: 'select', validate: [{ type: 'required' }] },
+    { name: 'fail-function', component: 'select', validate: [() => 'error-message-from-function'] },
+    { name: 'fail-custom', component: 'select', validate: [{ type: 'custom' }] },
+    { name: 'async-fail', component: 'select', validate: [asyncValidate] },
+    { name: 'async-pass', component: 'select', validate: [asyncValidate] },
+    { name: 'datatype-fail', component: 'select', dataType: 'number' },
+    { name: 'fail-multiple', component: 'select', validate: [{ type: 'required' }, { type: 'pattern', pattern: /abc/ }] },
+    { name: 'double-fail', component: 'select', validate: [{ type: 'required' }] },
+    { name: 'double-fail', component: 'select', validate: [{ type: 'pattern', pattern: /abc/ }] },
+    { name: 'double-fail-1', component: 'select', validate: [{ type: 'required' }] },
+    { name: 'double-fail-1', component: 'select', validate: [{ type: 'pattern', pattern: /abc/ }] },
+    { name: 'double-fail-2', component: 'select', validate: [{ type: 'required' }] },
+    { name: 'double-fail-2', component: 'select', dataType: 'number' },
+    { name: 'combined-fail', component: 'select', dataType: 'number', validate: [{ type: 'required' }] },
+    { name: 'combined-fail-1', component: 'select', dataType: 'number', validate: [{ type: 'required' }] },
+    { name: 'combined-pass', component: 'select', dataType: 'number', validate: [{ type: 'required' }] }
+  ]
+};
+
+const options = {
+  values: {
+    pass: 'some-value',
+    'async-pass': 'some-value',
+    passes: { nested: 'some-value' },
+    'datatype-fail': 'abc',
+    'fail-multiple': 'ccc',
+    'double-fail': 'ccc',
+    'double-fail-2': 'ccc',
+    'combined-fail-1': 'string',
+    'combined-pass': 123
+  },
+  validatorMapper: {
+    custom: () => () => 'custom error validator'
+  }
+};
+
+const StandaloneValidation = () => {
+  const [errors, setErrors] = useState();
+
+  useEffect(() => {
+    (async () => {
+      const formErrors = await validation(schema, options);
+
+      setErrors(formErrors);
+    })();
+  }, []);
+
+  if (!errors) {
+    return 'Validating...';
+  }
+
+  return (
+    <React.Fragment>
+      <h1>Schema</h1>
+      <pre>Check code example</pre>
+      <h1>Options</h1>
+      <pre>Check code example</pre>
+      <h1>Errors</h1>
+      <pre>{JSON.stringify(errors, null, 2)}</pre>
+    </React.Fragment>
+  );
+};
+
+export default StandaloneValidation;

packages/react-renderer-demo/src/pages/utilities/standalone-validation.md

@@ -0,0 +1,99 @@
+import DocPage from '@docs/doc-page';
+import CodeExample from '@docs/code-example';
+
+<DocPage>
+
+# Standalone validation
+
+*@data-driven-forms/react-form-renderer/validation*
+
+*(schema: Schema, options: Options) => object: Errors*
+
+Data Driven Forms provides an async function that validates values based on a provided schema. This feature can be useful to implement validation on backend endpoints with using the same schema as in frontend applications.
+
+## Schema
+
+*object*
+
+The same [schema](/schema/introduction) as for the form renderer. Validation supports all features except array validators that are being used by field arrays. This functionallity will be implemented in the future.
+
+## Options
+
+*object*
+
+```ts
+{
+  values: AnyObject;
+  componentMapper?: ComponentMapper;
+  validatorMapper?: ValidatorMapper;
+  actionMapper?: ActionMapper;
+  schemaValidatorMapper?: SchemaValidatorMapper;
+  omitWarnings?: boolean;
+}
+```
+
+### Values
+
+*object*
+
+Form values as sent from the renderer.
+
+---
+
+### componentMapper
+
+*object*
+
+If not provided, all components are valid. [Read more](/components/renderer#componentmapper).
+
+---
+
+### validatorMapper
+
+[Read more](/mappers/validator-mapper).
+
+---
+
+### actionMapper
+
+[Read more](/mappers/action-mapper).
+
+---
+
+### schemaValidatorMapper
+
+[Read more](/mappers/schema-validator-mapper).
+
+---
+
+### omitWarnings
+
+*boolean*
+
+If this attribute set to true, warnings will be ignored and won't appear in the errors object.
+
+---
+
+## Errors
+
+*object*
+
+A flat structure of errors.
+
+```jsx
+{
+  field: 'This field is required',
+  'field-with-warning': { type: 'warning', error: 'This is warning' },
+  'nested.field': 'Some error message'
+}
+```
+
+## Schemas changed according to meta
+
+If your form is changing according to form state or field states, be aware that this function will miss all meta information.
+
+## Examples
+
+<CodeExample source="components/utilities/standalone-validation" mode="preview" />
+
+</DocPage>