Add docs for missing components

Author: rvsia

packages/blueprint-component-mapper/src/files/field-array.js

@@ -131,12 +131,12 @@ FieldArray.propTypes = {
   AddButtonProps: PropTypes.object,
   RemoveButtonProps: PropTypes.object,
   ArrayItemProps: PropTypes.object,
+  FormGroupProps: PropTypes.object,
   FieldArrayProps: PropTypes.object,
   noItemsMessage: PropTypes.node,
   validateOnMount: PropTypes.bool,
   helperText: PropTypes.node,
   isRequired: PropTypes.bool,
-  FormGroupProps: PropTypes.object,
   maxItems: PropTypes.number,
   minItems: PropTypes.number
 };

packages/blueprint-component-mapper/src/tests/components.test.js

@@ -6,9 +6,7 @@ import FormTemplate from '../files/form-template';
 import componentMapper from '../files/component-mapper';
 import { validatorTypes } from '@data-driven-forms/react-form-renderer';
 import FormGroupWrapper from '../files/form-group';
-import Wizard from '../files/wizard';
 import DualListSelect from '../files/dual-list-select';
-import FieldArray from '../files/field-array';
 
 describe('formFields generated tests', () => {
   const RendererWrapper = ({ schema = { fields: [] }, ...props }) => (

packages/react-renderer-demo/src/doc-components/examples-texts/blueprint/blueprint-field-array.md

@@ -0,0 +1,51 @@
+Blueprint component mapper provides an experimental implementation of field array.
+
+**Props**
+
+|Prop|Type|Description|
+|:---|:--:|----------:|
+|label|`node`|Label of the array.|
+|description|`node`|Description of the array.|
+|fields|`array`|A group of fields, which are being added to the array.|
+|defaultItem|`any`|Default item which is inserted into a newly created fields group. If you have nested names, don't forget you need to insert an object!|
+|minItems|`number`|Remove button is disabled, if the length of the array is equal or smaller.|
+|maxItems|`number`|Add button is disabled, if the length of the array is equal or bigger.|
+|noItemsMessage|`node`|A message which is shown, when there are no items in the array.|
+|buttonLabels|`object`|`{add: 'ADD', remove: 'REMOVE'}` sets labels of buttons.|
+|AddContainerProps|`object`|Props passed to the div wrapping the add button.|
+|AddButtonProps|`object`|Props passed to the add button.|
+|RemoveButtonProps|`object`|Props passed to the remove button.|
+|ArrayItemProps|`object`|Props passed to the div wrapping each field item.|
+|FormGroupProps|`object`|Props passed to the form group component.|
+|FieldArrayProps|`object`|Props passed to the root div.|
+
+**Naming**
+
+Fields can contain names, then the value will be handled as array of objects.
+
+```jsx
+const fields = [
+    { name: 'name', ... },
+    { name: 'lastname', ... }
+]
+
+[
+    { name: value1.name, lastname: value1.lastname },
+    { name: value2.name, lastname: value2.lastname },
+    ...
+]
+```
+
+Or you can put a single field with no name. In this case, values are stored as a simple array.
+
+```jsx
+const fields = [
+    { component: 'text-field' }
+]
+
+[ value1, value2, ... ]
+```
+
+**Custom component**
+
+To implement a custom component, please take a look [here](/renderer/dynamic-fields).

packages/react-renderer-demo/src/doc-components/examples-texts/blueprint/blueprint-wizard.md

@@ -0,0 +1,63 @@
+This a custom component. OnSubmit will send only values from visited steps.
+
+**Props**
+
+|Prop|Type|Default|Description|
+|-------------|-------------|-------------|-------------|
+|buttonLabels|object of nodes | see below | Labels for buttons |
+|WizardProps | object | {} | Props passed to the root div |
+|ButtonToolbarProps | object | {} | Props passed to the div wrapping buttons |
+|DirectionButtonProps | object | {} | Props passed to the div wrapping back/next buttons |
+|CancelButtonProps| object | {} | Props passed to the cancel button |
+|BackButtonProps| object | {} | Props passed to the back button |
+|NextButtonProps| object | {} | Props passed to the next button |
+|SubmitButtonProps| object | {} | Props passed to the submit button |
+
+**Default buttonLabels**
+
+```jsx
+{
+  cancel: 'Cancel',
+  back: 'Back',
+  next: 'Next',
+  submit: 'Submit',
+}
+```
+
+You can rewrite only selection of them, e.g.
+
+```jsx
+{
+  submit: 'Deploy',
+}
+```
+
+(Others will stay default)
+
+**Docs for steps**
+
+| Props  | Type  |  Description |
+| ------------- | ------------- | ------------- |
+| name  | string, number | Name of the step |
+| nextStep  | object/stepKey of next step/function | See below |
+| fields  | array | As usual |
+
+- nextStep can be name of the next step
+- or you can branch the way by using of object:
+
+```jsx
+nextStep: {
+        when: 'source-type', // name of field, where deciding value is stored
+        stepMapper: {
+          aws: 'aws', // value: 'name' of next step
+          google: 'google',
+          ...
+        },
+},
+```
+
+- another option is to use custom function. The custom function receives as the first argument an object with values and the function has to return a `name` in string.
+
+```jsx
+nextStep: ({ values }) => (values.aws === '123' &&& values.password === 'secret') ? 'secretStep' : 'genericStep'
+```

packages/react-renderer-demo/src/doc-components/field-array.js

@@ -4,6 +4,7 @@ import MuiFieldArray from './examples-texts/mui/mui-field-array.md';
 import Pf4FieldArray from './examples-texts/pf4/pf4-field-array.md';
 import Pf3FieldArray from './examples-texts/pf3/pf3-field-array.md';
 import SuirFieldArray from './examples-texts/suir/suir-field-array.md';
+import BlueprintFieldArray from './examples-texts/blueprint/blueprint-field-array.md';
 import GenericMuiComponent from '../helpers/generic-mui-component';
 
 const FieldArray = ({ activeMapper }) => {
@@ -23,6 +24,10 @@ const FieldArray = ({ activeMapper }) => {
     return <SuirFieldArray />;
   }
 
+  if (activeMapper === 'blueprint') {
+    return <BlueprintFieldArray />;
+  }
+
   return <GenericMuiComponent activeMapper={activeMapper} component="field-array" />;
 };
 

packages/react-renderer-demo/src/doc-components/wizard.js

@@ -4,6 +4,7 @@ import MuiWizard from './examples-texts/mui/mui-wizard.md';
 import Pf4Wizard from './examples-texts/pf4/pf4-wizard.md';
 import Pf3Wizard from './examples-texts/pf3/pf3-wizard.md';
 import SuirWizard from './examples-texts/suir/suir-wizard.md';
+import BlueprintWizard from './examples-texts/blueprint/blueprint-wizard.md';
 import GenericMuiComponent from '../helpers/generic-mui-component';
 
 const Wizard = ({ activeMapper }) => {
@@ -23,6 +24,10 @@ const Wizard = ({ activeMapper }) => {
     return <SuirWizard />;
   }
 
+  if (activeMapper === 'blueprint') {
+    return <BlueprintWizard />;
+  }
+
   return <GenericMuiComponent activeMapper={activeMapper} component="wizard" />;
 };