Non-linear wizards

[Ivan Aksamentov]

I really like the idea of declarative wizard and how easy it is to setup and add animations. It's a very useful abstraction that otherwise takes a lot of efforts to implement.

For more complex use-cases, can I implement a non-linear, hierarchical flow with this library? I mean when the choice of the next step depends on previous steps?

Basically, what I want is a sort of a local react-router, where the routes can be nested, but without actual routing and URLs, just switch the components. I imagine something like that:

<Wizard>
  <StepStart />
  <StepA exclusive>
    <StepA1 />
    <StepA2 />
    <StepShared />
    <StepA3 />
  </StepA>
  <StepB exclusive>
    <StepB1 />
    <StepB2>
      <StepB2one />
      <StepB2two />
    </StepB2>
    <StepShared />
    <StepBFinish />
  </StepB>
</Wizard>

In this scenario, girst you are greeted with StepStart, then depending on a choice made there, you are taken to either StepA1 or StepB1, and then continue recursively along the hierarchy of components.

Think of it as a sequence of paths or URLs:

/start

# if user chose to go to the step A:
/start/step-a                        # not reachable, just a container
/start/step-a/step-a1
/start/step-a/step-a2
/start/step-a/step-shared
/start/step-a/step-a3
# finish here, because steps A and B are marked as exclusive

# if user chose to go to the step B:
/start/step-b                        # not reachable, just a container
/start/step-b/step-b1
/start/step-b/step-b2                # not reachable, just a container
/start/step-b/step-b2/step-b2-one
/start/step-b/step-b2/step-b2-two
/start/step-b/step-b2/step-shared
/start/step-b/step-b2/step-b-finish

Note that parent steps are not real steps, but just containers for their child steps. For that we probably need to introduce another component in the library. Alternatively, the Wizard component might also be adjusted to act as a nested sub-wizard probably.

There's need of some sort of a flag (exclusive ?), breaking sequentiality of steps: saying that I don't want to continue with StepB1 after StepA3. But in some cases you might want to continue. Or perhaps there could be an explicit Break component. This is the same as avoiding fall-through in a switch/case construct.

Navigation to a concrete step with goToStep might become challenging. One could use explicit IDs for each step and path/URL syntax to identify the step, e.g. goToStep('/start/step-b/step-b2')

[Jonas De Vrient]

Thanks for your feature request, but out of scope for this library. Feel free to fork!