Populate new documentation files

Author: rvsia

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

@@ -8,6 +8,23 @@ const mappersSchema = [
     linkText: 'Custom mapper',
     link: 'custom-mapper'
   },
+  {
+    linkText: 'Global component props',
+    link: 'global-component-props'
+  },
+  {
+    linkText: 'File input',
+    link: 'file-input'
+  },
+  {
+    linkText: 'Common components API',
+    link: 'component-api'
+  },
+  {
+    subHeader: true,
+    noRoute: true,
+    title: 'Provided mappers'
+  },
   {
     link: 'blueprint-component-mapper',
     linkText: 'Blueprint mapper'

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

@@ -6,6 +6,10 @@ import schemaHooks from './hooks.schema';
 import mappersSchema from './mappers.schema';
 
 const schema = [
+  {
+    link: 'introduction',
+    linkText: 'Introduction'
+  },
   {
     linkText: 'Installation',
     link: 'installation'
@@ -54,7 +58,7 @@ const schema = [
   },
   {
     linkText: 'Development setup',
-    link: 'dev-setup'
+    link: 'development-setup'
   },
   {
     linkText: 'Releases',

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

@@ -21,8 +21,8 @@ const schemaNav = [
     linkText: 'Initialize on mount'
   },
   {
-    component: 'validate-on-mount',
-    linkText: 'Validate on mount'
+    component: 'data-types',
+    linkText: 'Data types'
   },
   {
     subHeader: true,
@@ -35,11 +35,11 @@ const schemaNav = [
   },
   {
     component: 'length-validator',
-    linkText: 'Lenght validator'
+    linkText: 'Length validator'
   },
   {
-    component: 'Number value validator',
-    linkText: 'number-value-validator'
+    linkText: 'Number value validator',
+    component: 'number-value-validator'
   },
   {
     component: 'pattern-validator',
@@ -110,17 +110,17 @@ const schemaNav = [
     component: 'pattern',
     linkText: 'Pattern'
   },
-  {
-    component: 'clearing-condition-field',
-    linkText: 'Clearing conditional field' // clearing-value
-  },
   {
     component: 'condition-nesting',
-    linkText: 'Condition nesting' // nesting
+    linkText: 'Condition nesting'
   },
   {
     component: 'condition-sequence',
-    linkText: 'Condition sequence' // condition sequence
+    linkText: 'Condition sequence'
+  },
+  {
+    component: 'condition-actions',
+    linkText: 'Conditional actions'
   },
   {
     component: 'condition-set',
@@ -131,7 +131,7 @@ const schemaNav = [
     linkText: 'Conditional visibility'
   },
   {
-    component: 'Complex-condition-example',
+    component: 'complex-condition-example',
     linkText: 'Conplex condition example'
   },
   {

packages/react-renderer-demo/src/pages/renderer/dynamic-fields.md renamed to packages/react-renderer-demo/src/pages/components/field-array.md

@@ -3,6 +3,14 @@ import DocPage from '@docs/doc-page';
 
 <DocPage>
 
+# FieldArray
+
+[React Final Form Array](https://github.com/final-form/react-final-form-arrays) is exported via Data Driven Forms.
+
+```jsx
+import { FieldArray } from '@data-driven-forms/react-form-renderer';
+```
+
 # Dynamic fields
 
 Dynamic fields allow you to add or remove field inputs in your forms. In Data Driven Forms, Field Array is used to provide this functionality. Simillarly to [FieldProvider](/renderer/field-provider) Data driven forms include [React Final Form Arrays](https://github.com/final-form/react-final-form-arrays). Please visit their documentation to learn more about the functionality and implementation.

packages/react-renderer-demo/src/pages/components/field-provider.md

@@ -0,0 +1,43 @@
+import DocPage from '@docs/doc-page';
+import InputMeta from '../input-meta.md';
+
+<DocPage>
+
+# Field provider
+
+React form renderer is using [react-final-form](https://github.com/final-form/react-final-form) for form state management.
+Most of its features are not directly available for consistency and performance reasons. If you want to create any custom
+components, you can access these features via `FieldProvider` component or `useFieldApi` hook.
+
+`FieldProvider` is a wrapper using `useFieldApi` to get the access to the form state.
+
+`useFieldApi` is a wrapper around [React Final Form useField hook](https://final-form.org/docs/react-final-form/api/useField).
+
+You can read more about that in [Component mapping](/renderer/component-mapping).
+
+## Implementation of component
+
+Next example shows simple input field with label and error message.
+
+```jsx
+import React from 'react';
+import { useFieldApi } from '@data-driven-forms/react-form-renderer'
+
+const NewComponent = (props) => {
+  const { input, meta } = useFieldApi(props);
+
+  return (
+    <div>
+      <label>{props.label}</label>
+      <input {...input} />
+      {meta.error && <label>{meta.error}</label>}
+    </div>
+  )
+}
+
+export default NewComponent
+```
+
+<InputMeta />
+
+</DocPage>

packages/react-renderer-demo/src/pages/components/form-spy.md

@@ -0,0 +1,13 @@
+import DocPage from '@docs/doc-page';
+
+<DocPage>
+
+# FormSpy
+
+[FormSpy](https://final-form.org/docs/react-final-form/api/FormSpy) is exported via Data Driven Forms.
+
+```jsx
+import { FormSpy } from '@data-driven-forms/react-form-renderer';
+```
+
+</DocPage>

packages/react-renderer-demo/src/pages/renderer/form-template.md renamed to packages/react-renderer-demo/src/pages/components/form-template.md

@@ -0,0 +1,13 @@
+import DocPage from '@docs/doc-page';
+
+<DocPage>
+
+# Form
+
+For testing purposes, you can also import React Final Form's `Form` component.
+
+```jsx
+import { Form } from '@data-driven-forms/react-form-renderer';
+```
+
+</DocPage>