Add wizard schema to MUI demo

Author: rvsia

packages/mui-component-mapper/demo/demo-schemas/wizard-schema.js

@@ -0,0 +1,92 @@
+import { componentTypes, validatorTypes } from '@data-driven-forms/react-form-renderer';
+
+const wizardSchema = {
+  fields: [
+    {
+      component: componentTypes.WIZARD,
+      name: 'wizzard',
+      buttonLabels: {},
+      title: 'Cokoliv',
+      stepsInfo: [{ title: 'Add a source' }, { title: 'Configure a source' }, { title: 'Summary' }],
+      fields: [
+        {
+          title: 'Get started with adding source',
+          name: 'step-1',
+          nextStep: {
+            when: 'source-type',
+            stepMapper: {
+              aws: 'aws',
+              google: 'google'
+            }
+          },
+          fields: [
+            {
+              component: componentTypes.TEXTAREA,
+              name: 'source-name',
+              type: 'text',
+              label: 'Source name'
+            },
+            {
+              component: componentTypes.SELECT,
+              name: 'source-type',
+              label: 'Source type',
+              isRequired: true,
+              options: [
+                {
+                  value: 'aws',
+                  label: 'Aws'
+                },
+                {
+                  value: 'google',
+                  label: 'Google'
+                }
+              ],
+              validate: [
+                {
+                  type: validatorTypes.REQUIRED
+                }
+              ]
+            }
+          ]
+        },
+        {
+          title: 'Configure AWS',
+          name: 'aws',
+          nextStep: 'summary',
+          fields: [
+            {
+              component: componentTypes.TEXT_FIELD,
+              name: 'aws-field',
+              label: 'Aws field part'
+            }
+          ]
+        },
+        {
+          name: 'google',
+          title: 'Configure google',
+          nextStep: 'summary',
+          fields: [
+            {
+              component: componentTypes.TEXT_FIELD,
+              name: 'google-field',
+              label: 'Google field part'
+            }
+          ]
+        },
+        {
+          fields: [
+            {
+              name: 'summary',
+              component: componentTypes.TEXT_FIELD,
+              isDisabled: true,
+              label: 'Summary'
+            }
+          ],
+          name: 'summary'
+        }
+      ]
+    }
+  ]
+};
+
+export default wizardSchema;

packages/mui-component-mapper/demo/index.js

@@ -11,6 +11,7 @@ import demoSchema from '@data-driven-forms/common/src/demoschema';
 import fieldArraySchema from './demo-schemas/field-array-schema';
 
 import Button from '@material-ui/core/Button';
+import wizardSchema from './demo-schemas/wizard-schema';
 
 const theme = createMuiTheme({
   typography: {
@@ -29,7 +30,7 @@ const compositeMapper = {
 };
 
 const App = () => {
-  const [schema, setSchema] = useState(fieldArraySchema);
+  const [schema, setSchema] = useState(wizardSchema);
 
   return (
     <ThemeProvider theme={theme}>
@@ -40,12 +41,13 @@ const App = () => {
         <Grid item xs={12}>
           <Button onClick={() => setSchema(demoSchema)}>Demo schema</Button>
           <Button onClick={() => setSchema(fieldArraySchema)}>Field array</Button>
+          <Button onClick={() => setSchema(wizardSchema)}>Wizard</Button>
         </Grid>
         <Grid item xs={12}>
           <FormRenderer
             onSubmit={console.log}
             componentMapper={compositeMapper}
-            FormTemplate={(props) => <FormTemplate {...props} />}
+            FormTemplate={(props) => <FormTemplate {...props} showFormControls={false}/>}
             schema={schema}
             onCancel={() => console.log('canceling')}
           />