Merge pull request #209 from rvsia/next-docs

Make nextdocs consistent with master

Author: Hyperkid123

packages/react-renderer-demo/src/app/pages/component-example.js

@@ -260,6 +260,22 @@ class ComponentExample extends Component {
         );
       }
 
+      if (component === 'textarea'){
+        return (
+          <Grid item xs={ 12 } key={ name }>
+            <TextField
+              id={ name }
+              label={ title }
+              value={ this.state.variants[index].value || '' }
+              onChange={ ({ target: { value }}) => this.handleExampleVariantChange(value, index) }
+              margin="normal"
+              fullWidth
+              multiline
+            />
+          </Grid>
+        );
+      }
+
       return (
         <Grid item xs={ 12 } key={ name }>
           <FormGroup >

packages/react-renderer-demo/src/app/pages/renderer/component-api.md

@@ -1,5 +1,6 @@
 import Grid from '@material-ui/core/Grid'
-import Link from 'next/link';
+import RouterLink from 'next/link';
+import Link from '@material-ui/core/Link';
 
 import ListOfContents from '../../src/helpers/list-of-contents';
 import ExampleLink from '@docs/components/common/example-link';
@@ -52,7 +53,7 @@ All those components provides a shared group of props:
 |isRequired|boolean|Is the field required?|
 |isDisabled|boolean|Is the field disabled?|
 |isReadOnly|boolean|Is the field readOnly?|
-|initialValue|custom|There are two ways how to set initial values in the form: you can use either the <Link href="/renderer/renderer-api"><a>initialValues</a></Link> prop for the whole form or you can set the value in the schema for each field separately. For more information, please see [here](https://final-form.org/docs/react-final-form/types/FieldProps#initialvalue).|
+|initialValue|custom|There are two ways how to set initial values in the form: you can use either the <RouterLink href="/renderer/renderer-api"><Link>initialValues</Link></RouterLink> prop for the whole form or you can set the value in the schema for each field separately. For more information, please see [here](https://final-form.org/docs/react-final-form/types/FieldProps#initialvalue).|
 
 #### Text field
 

packages/react-renderer-demo/src/app/pages/renderer/component-mapping.md

@@ -33,18 +33,13 @@ import { layoutComponents } from '@data-driven-forms/react-form-renderer';
 const layoutComponents = {
   [layoutComponents.FORM_WRAPPER]: 'FormWrapper',
   [layoutComponents.BUTTON]: 'Button',
-  [layoutComponents.COL]: 'Col',
-  [layoutComponents.FORM_GROUP]: 'FormGroup',
   [layoutComponents.BUTTON_GROUP]: 'ButtonGroup',
-  [layoutComponents.ICON]: 'Icon',
-  [layoutComponents.ARRAY_FIELD_WRAPPER]: 'ArrayFieldWrapper',
-  [layoutComponents.HELP_BLOCK]: 'HelpBlock',
   [layoutComponents.TITLE]: 'Title',
   [layoutComponents.DESCRIPTION]: 'Description',
 }
 ```
 
-Required components are: `FORM_WRAPPER`, `BUTTON`, `COL`, `FORM_GROUP` and `BUTTON_GROUP`. The rest is used only if you use certain
+Required components are: `FORM_WRAPPER`, `BUTTON` and `BUTTON_GROUP`. The rest is used only if you use certain
 components in your schema.
 
 Check the example below to see a simple implementation of layout components.
@@ -58,11 +53,6 @@ Check the example below to see a simple implementation of layout components.
 |----|----|-----------|-----|------------|
 |children|node|Content of the form||Based on form schema|
 
-#### Col
-|Prop|Type|Description|Value|Customizable|
-|----|----|-----------|-----|------------|
-|children|node|Wrapper around form field||Based on form schema|
-
 #### Button
 |Prop|Type|Description|Value|Customizable|
 |----|----|-----------|-----|------------|
@@ -75,14 +65,15 @@ Check the example below to see a simple implementation of layout components.
 |----|----|-----------|-----|------------|
 |children|node|Wrapper around form buttons||No|
 
-#### FormGroup
-|Prop|Type|Description|Value|Customizable|
-|----|----|-----------|-----|------------|
-|children|node|Form field group||Based on form schema|
-
-#### Icon, Array Field Wrapper, Help Block
-TO DO when array field docs are done
+#### Title
+|Prop|Type|Description|Customizable|
+|----|----|-----------|------------|
+|children|node|Form title|no|
 
+#### Description
+|Prop|Type|Description|Customizable|
+|----|----|-----------|------------|
+|children|node|Form description|no|
 
 ## Creating formFieldsMapper
 
@@ -106,6 +97,7 @@ const componentTypes = {
   [componentTypes.SWITCH]: 'switch-field',
   [componentTypes.TEXTAREA]: 'textarea-field',
   [componentTypes.SELECT]: 'select-field',
+  [componentTypes.PLAIN_TEXT]: 'plain-text',
 }
 ```
 

packages/react-renderer-demo/src/app/pages/renderer/data-types.md

@@ -9,7 +9,7 @@ import ListOfContents from '../../src/helpers/list-of-contents';
 ## Introduction
 
  You can specify a type of a component by providing `dataType`, which will automatically validates the component value.
-Because almost everything in html inputs is outputed as a string, adding the `dataType` props will also cast the value to given type.
+Because almost everything in HTML inputs is outputed as a string, adding the `dataType` props will also cast the value to given type.
 
 ### Available dataTypes
 

packages/react-renderer-demo/src/app/pages/renderer/development-setup.md

@@ -34,6 +34,15 @@ cd packages/pf3-component-mapper
 yarn start
 ```
 
+#### Run documentation
+
+The documentation is a server-side rendered React application based on [NextJS framework](https://nextjs.org/).
+
+```console
+cd packages/react-renderer-demo
+yarn dev
+```
+
 #### How to clean?
 
 ```console

packages/react-renderer-demo/src/app/src/docs-components/field-array.md renamed to packages/react-renderer-demo/src/app/pages/renderer/field-array.md

@@ -1,9 +1,11 @@
-import NavLink from 'next/link';
+import RouterLink from 'next/link';
+import Link from '@material-ui/core/Link';
+
 import RawComponent from '@docs/raw-component';
 
 ### Field Array Provider
 
-Simillarly to <NavLink href='/renderer/field-provider'><a>FieldProvider</a></NavLink> Data driven forms provide an option how to inlude <a href='https://github.com/final-form/react-final-form-arrays'>React Final Form Arrays</a> in your form.
+Simillarly to <RouterLink href='/renderer/field-provider'><Link>FieldProvider</Link></RouterLink> Data driven forms provide an option how to inlude <a href='https://github.com/final-form/react-final-form-arrays'>React Final Form Arrays</a> in your form.
 
 <b>Please visit their documentation to learn about functionality.</b>
 
@@ -49,7 +51,7 @@ You don't need to name the nested components, then the values are saved as an ar
 
 ### Validators
 
-You can use user a few provided validators (you can also use your <NavLink href='/renderer/validators'><a>own</a></NavLink>.)
+You can use user a few provided validators (you can also use your <RouterLink href='/renderer/validators'><Link>own</Link></RouterLink>.)
 
 ```jsx
 MIN_ITEMS_VALIDATOR: ({threshold})

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

@@ -1,4 +1,5 @@
-import Link from 'next/link';
+import RouterNav from 'next/link';
+import Link from '@material-ui/core/Link';
 
 ### Field Provider
 import Grid from '@material-ui/core/Grid'
@@ -22,11 +23,11 @@ which adds additional methods that will help you to control your form state.
 ### Accessing FieldProvider
 
 To use Fieldprovider, you first need to register a component to your component mapper.
-You can read more about that in <Link href="/renderer/component-mapping"><a>Component mapping</a></Link>.
+You can read more about that in <RouterNav href="/renderer/component-mapping"><Link>Component mapping</Link></RouterNav>.
 
 Each component will receive FieldProvider as a prop. Be aware that pre-defined component types are
 automatically wrapped in FieldProvider. This is done to make it easier to create component mappers for
-standard form components. List of standard components is available <Link href="/renderer/component-api"><a>here</a></Link>.
+standard form components. List of standard components is available <RouterNav href="/renderer/component-api"><Link>here</Link></RouterNav>.
 
 ### Using FieldProvider
 

packages/react-renderer-demo/src/app/pages/renderer/get-started.md

@@ -1,12 +1,12 @@
 import RawComponent from '@docs/raw-component';
 
-## React form renderer
+### React form renderer
 
 React form renderer is a component designed for ManageIQ and
-Insights projects that takes json form definitions
+Insights projects that takes JSON form definitions
 and renders them into react components.
-It uses [React final form](https://github.com/final-form/react-final-form) for the form state management.
+It uses [React Final Form](https://github.com/final-form/react-final-form) for the form state management.
 It is highly recommended to check their documentations first to fully understand how
-the [data-driven-forms](https://github.com/data-driven-forms/react-forms) libraries work.
+the [Data Driven Dorms](https://github.com/data-driven-forms/react-forms) libraries work.
 
 <RawComponent source="get-started/get-started" />

packages/react-renderer-demo/src/app/pages/renderer/installation.md

@@ -1,13 +1,9 @@
+### Installation
+
 ```console
 npm install --save @data-driven-forms/react-form-renderer
 ```
 or
 ```console
 yarn add @data-driven-forms/react-form-renderer
-```
-- 
-### Links to NPM
-- a) [React form renderer](https://www.npmjs.com/package/@data-driven-forms/react-form-renderer)
-- b) [Patternfly 3 mapper](https://www.npmjs.com/package/@data-driven-forms/pf3-component-mapper)
-- c) [Patternfly 4 mapper](https://www.npmjs.com/package/@data-driven-forms/pf4-component-mapper)
-- d) [MaterialUI mapper](https://www.npmjs.com/package/@data-driven-forms/mui-component-mapper)
+```

packages/react-renderer-demo/src/app/pages/renderer/renderer-api.md

@@ -32,7 +32,7 @@ Form Renderer provides a lot of customization via props.
 |<RouterLink href="/renderer/unmounting"><Link>clearOnUnmount</Link></RouterLink>|bool|Will clear values of unmounted components. You can also set this to specific component in the form schema.|false|
 |canReset|bool|Show/hide reset button.|false|
 |onReset|func|A reset callback. You don't need to manually clear the form values!||
-|onCancel|func|A cancel callback.||
+|onCancel|func|A cancel callback, which receives `values` as the first argument.||
 |onStateUpdate|func|A function which will be called with every form update, i.e. `({ values }) => setValues(values)`||
 |disableSubmit|array of strings|You can specify a form attributes (see [here](https://final-form.org/docs/final-form/types/FormState)) which will make the submit button disabled. |[ ]|
 |initialValues|object|An object of fields names as keys and values as their values.||
@@ -42,6 +42,30 @@ Form Renderer provides a lot of customization via props.
 |uiSchema|object|Use when you need to use mozilla schema.|{ }|
 |<RouterLink href="/renderer/validators"><Link>validate</Link></RouterLink>|func|A function which receives all form values and returns an object with errors.||
 
+### Schema
+
+The root object of the schema represents the <RouterLink href="/renderer/component-mapping#formwrapper"><Link>Form</Link></RouterLink> component, which accepts only these three props:
+
+|Prop|Type|Description|
+|----|:--:|----------:|
+|label, title|node|<RouterLink href="/renderer/component-mapping#title"><Link>Title</Link></RouterLink> of the form. Optional.|
+|description|node|<RouterLink href="/renderer/component-mapping#description"><Link>Description</Link></RouterLink> of the form. Optional.|
+|fields|array of objects|<RouterLink href="/renderer/component-api"><Link>Components</Link></RouterLink> of the form. Required!|
+
+#### Example
+
+```javascript
+schema = {
+  title: 'Your name',
+  description: 'Add your name',
+  fields: [{
+    name: 'userName',
+    label: 'Your name is',
+    component: componentTypes.TEXT_FIELD,
+  }]
+};
+```
+
 </Grid>
 <Grid item xs={false} md={2}>
   <ListOfContents file="renderer/renderer-api" />