Form Flow Definition API

The Form Flow API provides a declarative way to define multi-step forms with various input types. This API is designed to work with the Flow Renderer component to create dynamic, validatable forms with minimal code.

Core Concepts

• Flow: A complete form flow with multiple steps
• Step: A single page/screen in the form flow
• Block: A content element or input field on a step
• Input: Form fields like text, dropdown, checkbox, etc.
• Content: Non-input elements like text, sections, or custom React components

Basic Usage

import {
  flow,
  step,
  textInput,
  emailInput,
  dropdown,
} from '@getevy/evy-ui/flow';

// Create a flow with steps
const myFlow = flow({
  id: 'registration-flow',
  steps: [
    // Step 1: Basic information
    step({
      id: 'personal-info',
      blocks: [
        textInput({ id: 'firstName', isRequired: true }),
        textInput({ id: 'lastName', isRequired: true }),
        emailInput({ id: 'email', isRequired: true }),
      ],
      next: 'preferences', // Go to the next step
    }),

    // Step 2: Preferences
    step({
      id: 'preferences',
      blocks: [
        dropdown({
          id: 'contactPreference',
          values: [
            { value: 'email', label: 'Email' },
            { value: 'phone', label: 'Phone' },
          ],
        }),
      ],
      next: 'submit', // Complete the flow
    }),
  ],
});

Using the Flow Renderer

import { FlowRender } from '@getevy/evy-ui/flow-render';

function MyFormFlow() {
  const handleSubmit = formData => {
    // Process the submitted form data
    console.log(formData);
  };

  return (
    <FlowRender
      flow={myFlow}
      locale="en"
      onSubmit={handleSubmit}
      initialData={{}} // Optional initial values
    />
  );
}

Advanced Routing

You can define conditional routing based on user input:

import { flow, step, dropdown, nextFromInput } from '@getevy/evy-ui/flow';

const flowWithConditionalRouting = flow({
  id: 'conditional-flow',
  steps: [
    step({
      id: 'user-type',
      blocks: [
        dropdown({
          id: 'type',
          values: [
            { value: 'individual', label: 'Individual' },
            { value: 'business', label: 'Business' },
          ],
        }),
      ],
      // Route to different steps based on selection
      next: nextFromInput({
        path: 'user-type.type',
        routes: [
          { value: 'individual', next: 'individual-form' },
          { value: 'business', next: 'business-form' },
        ],
      }),
    }),

    // Individual step
    step({
      id: 'individual-form',
      blocks: [
        // Individual-specific fields
      ],
      next: 'submit',
    }),

    // Business step
    step({
      id: 'business-form',
      blocks: [
        // Business-specific fields
      ],
      next: 'submit',
    }),
  ],
});