Add example for one-row-layout

Author: rvsia

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

@@ -2,6 +2,10 @@ const customExamplesSchema = [
   {
     component: 'sample-example',
     linkText: 'Sample example'
+  },
+  {
+    component: 'one-row-layout',
+    linkText: 'One row layout'
   }
 ];
 

packages/react-renderer-demo/src/examples/components/examples/one-row-layout.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import FormRenderer from '@data-driven-forms/react-form-renderer/form-renderer';
+import componentTypes from '@data-driven-forms/react-form-renderer/component-types';
+import FormTemplate from '@data-driven-forms/mui-component-mapper/form-template';
+import TextField from '@data-driven-forms/mui-component-mapper/text-field';
+
+const schema = {
+  fields: [
+    {
+        name: 'first-name',
+        label: 'First name',
+        component: componentTypes.TEXT_FIELD,
+        FormFieldGridProps: { xs: 6 },
+      },
+      {
+        name: 'last-name',
+        label: 'Last name',
+        component: componentTypes.TEXT_FIELD,
+        FormFieldGridProps: { xs: 6 },
+      },
+  ]
+};
+
+const componentMapper = {
+  [componentTypes.TEXT_FIELD]: TextField
+};
+
+const OneRowLayout = () =>
+      <FormRenderer
+        FormTemplate={FormTemplate}
+        componentMapper={componentMapper}
+        schema={schema}
+        onSubmit={console.log}
+      />;
+
+export default OneRowLayout;

packages/react-renderer-demo/src/pages/examples/one-row-layout.md

@@ -0,0 +1,36 @@
+import DocPage from '@docs/doc-page';
+import CodeExample from '@docs/code-example';
+
+<DocPage>
+
+# One row layout
+
+This example show how to place two fields in the same row. **Only for MUI mapper**.
+Other mappers can have similar solutions.
+
+---
+
+Each MUI component mapper component is wrapped in [Grid](https://material-ui.com/components/grid/#grid) component by default and this component is configurable via `FormFieldGridProps` object you can pass via schema - this object is of the same shape as props for the Grid component.
+
+```jsx
+{
+    name: "first-name",
+    label: "First name",
+    component: componentTypes.TEXT_FIELD,
+    FormFieldGridProps: { xs: 6 },
+    isRequired: true,
+    validate: [
+        {
+        type: validatorTypes.REQUIRED
+        }
+    ]
+}
+```
+
+Please, don't forget that `<Grid item/>` has to rendered inside `<Grid container/>`. Components that contain nested fields in the MUI mapper are all using the Container component by default.
+
+## Preview
+
+<CodeExample source="components/examples/one-row-layout" mode="preview" />
+
+</DocPage>

packages/react-renderer-demo/src/pages/schema/introduction.md

@@ -44,7 +44,7 @@ Other attribues, such as title or description, can be used in [form templates](/
 
 *string*
 
-`component` is a string value representing used component. Available options depends on the component mapper. Data Driven Forms automatically checks if the component is available, if not, it shows an error message. You use [componentTypes](/schema/constants#componenttypes) to prevent typos.
+`component` is a string value representing used component. Available options depends on the component mapper. Data Driven Forms automatically checks if the component is available, if not, it shows an error message. You can use [componentTypes](/schema/constants#componenttypes) to prevent typos. This attribute is not required for fields of these components: `wizard`, `field-array` and `tabs` as these fields include only special components with no implementation.
 
 ---