Add docs for MUI wizard enhanced

Author: rvsia

packages/mui-component-mapper/src/files/wizard.js

@@ -28,7 +28,8 @@ const WizardInternal = ({
   ButtonContainerProps,
   StepperProps,
   WizardBodyProps,
-  WizardProps
+  WizardProps,
+  onKeyDown
 }) => {
   const classes = useStyles();
 
@@ -41,7 +42,7 @@ const WizardInternal = ({
   };
 
   return (
-    <Grid container spacing={3} {...WizardProps}>
+    <Grid container spacing={3} {...WizardProps} onKeyDown={onKeyDown}>
       {stepsInfo && <WizardNav StepperProps={StepperProps} stepsInfo={stepsInfo} activeStepIndex={activeStepIndex} />}
       <Grid container spacing={2} {...WizardBodyProps} className={clsx(classes.wizardBody, WizardBodyProps.className)}>
         {currentStep.fields.map((item) => formOptions.renderForm([item], formOptions))}
@@ -60,29 +61,25 @@ const WizardInternal = ({
 };
 
 WizardInternal.propTypes = {
-  title: PropTypes.node,
-  description: PropTypes.node,
   currentStep: PropTypes.object,
   handlePrev: PropTypes.func,
   onKeyDown: PropTypes.func,
   jumpToStep: PropTypes.func,
   setPrevSteps: PropTypes.func,
   handleNext: PropTypes.func,
-  navSchema: PropTypes.array,
   activeStepIndex: PropTypes.number,
-  maxStepIndex: PropTypes.number,
   formOptions: PropTypes.shape({
     onCancel: PropTypes.func,
     renderForm: PropTypes.func
   }),
   prevSteps: PropTypes.array,
+  // ^^ common props
   buttonLabels: PropTypes.object,
   stepsInfo: PropTypes.arrayOf(
     PropTypes.shape({
       title: PropTypes.node,
       label: PropTypes.node,
-      key: PropTypes.string,
-      LabelProps: PropTypes.object,
+      StepLabelProps: PropTypes.object,
       StepProps: PropTypes.object
     })
   ),

packages/mui-component-mapper/src/files/wizard/wizard-nav.js

@@ -16,9 +16,9 @@ const WizardNav = ({ StepperProps, stepsInfo, activeStepIndex }) => {
 
   return (
     <Stepper {...StepperProps} className={clsx(classes.stepper, StepperProps.className)} activeStep={activeStepIndex}>
-      {stepsInfo.map(({ title, label, LabelProps, StepProps }, idx) => (
+      {stepsInfo.map(({ title, label, StepLabelProps, StepProps }, idx) => (
         <Step {...StepProps} key={idx}>
-          <StepLabel {...LabelProps}>{title || label}</StepLabel>
+          <StepLabel {...StepLabelProps}>{title || label}</StepLabel>
         </Step>
       ))}
     </Stepper>
@@ -31,8 +31,7 @@ WizardNav.propTypes = {
     PropTypes.shape({
       title: PropTypes.node,
       label: PropTypes.node,
-      key: PropTypes.string,
-      LabelProps: PropTypes.object,
+      StepLabelProps: PropTypes.object,
       StepProps: PropTypes.object
     })
   ),

packages/react-renderer-demo/src/app/src/doc-components/wizard.md

@@ -1,13 +1,15 @@
 This a custom component. OnSubmit will send only values from visited steps.
 
-**Docs for steps**
+**Props**
 
-| Props  | Type  |  Description |
-| ------------- | ------------- | ------------- |
-| stepKey  | string, number | For first step: 1, otherwise anything |
-| buttonLabels  | object  | See below  |
-| nextStep  | object/stepKey of next step | See below |
-| fields  | array | As usual |
+| Prop  | Type | Default |  Description |
+| ------------- | ------------- | ------------- | ------------- |
+| buttonLabels  | object of nodes  | see below  | Labels for buttons |
+| stepsInfo  | object  | undefined  | Information for building the stepper  |
+| ButtonContainerProps  | object  | {}  | Props passed to Grid wrapping buttons  |
+| StepperProps  | object  | {}  | Props passed to the Stepper component  |
+| WizardBodyProps  | object  | {}  | Props passed to Grid wrapping fields and the button container  |
+| WizardProps  | object  | {}  | Props passed to the root Grid |
 
 **Default buttonLabels**
 
@@ -30,16 +32,47 @@ You can rewrite only selection of them, e.g.
 
 (Others will stay default)
 
-- nextStep can be stepKey of the next step
+**Format of stepsInfo**
+
+|Key|Type|Default|Description|
+|---|----|-------|-----------|
+|label/title|string|undefined|Text for the title|
+|StepLabelProps|object|{}|Props passed to StepLabel component|
+|StepProps|object|{}|Props passed to Step component|
+
+```jsx
+[
+      { title: 'Add a source', StepLabelProps: { style: { color: 'red' } } }, // step 1
+      { title: 'Configure a source' }, // step 2
+      { title: 'Summary' }, // step 3
+      ...
+],
+```
+
+**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: 'stepKey' of next step
+          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'
+```