Add live example of schema validator

Author: rvsia

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

@@ -1,5 +1,5 @@
 import Grid from '@material-ui/core/Grid'
-
+import RawComponent from '@docs/raw-component';
 import ListOfContents from '../../src/helpers/list-of-contents';
 
 <Grid container item>
@@ -13,7 +13,7 @@ It's a simple object containing three keys: `components`, `actions`, `validators
 
 For returning an error please use `DefaultSchemaError` imported from the renderer's package. If the schema is correct, do nothing.
 
-## Example
+## Schema
 
 ```jsx
 import FormRenderer, { DefaultSchemaError } from '@data-driven-forms/react-form-renderer';
@@ -53,6 +53,10 @@ const schemaValidatorMapper = {
 />
 ```
 
+## Example
+
+<RawComponent source="schema-validator" />
+
 </Grid>
 <Grid item xs={false} md={2}>
   <ListOfContents file="renderer/schema-validator" />

packages/react-renderer-demo/src/app/src/doc-components/schema-validator.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import FormRenderer, { componentTypes, DefaultSchemaError } from '@data-driven-forms/react-form-renderer';
+import { FormTemplate, componentMapper } from '@data-driven-forms/pf4-component-mapper';
+
+const schema = {
+  fields: [
+    {
+      component: componentTypes.TEXT_FIELD,
+      name: 'i-am-okey',
+      label: 'I am label'
+    },
+    {
+      component: componentTypes.TEXT_FIELD,
+      name: 'need-label'
+    }
+  ]
+};
+
+const schemaValidatorMapper = {
+  components: {
+    [componentTypes.TEXT_FIELD]: (field) => {
+      if (!field.label) {
+        throw new DefaultSchemaError(`Missing label prop in "${field.name}" component`);
+      }
+    }
+  }
+};
+
+const SchemaValidationExample = () => (
+  <div className="pf4">
+    <FormRenderer
+      FormTemplate={FormTemplate}
+      componentMapper={componentMapper}
+      schema={schema}
+      onSubmit={console.log}
+      schemaValidatorMapper={schemaValidatorMapper}
+    />
+  </div>
+);
+
+export default SchemaValidationExample;