cratis-components-stepper-command-dialog

Cratis Components stepper command dialogs

StepperCommandDialog splits one command's form across named steps. The user moves with Previous and Next; Submit appears on the last step once every field across every step is valid.

Verified product sources

Package	Version	Verified from
@cratis/components	3.0.0	its package manifest and CommandDialog sources
@cratis/arc.react	>=20.3.1 <23	peer range declared by @cratis/[email protected]
primereact	^11.0.0	peer of @cratis/[email protected]

Choose it over CommandDialog when

• the form has too many fields to show at once;
• the fields group into logical stages ("Contact → Details → Budget");
• guided linear input with per-step feedback is what the task deserves.

A four-field form is usually still an ordinary CommandDialog.

Step 1 — One command for the whole wizard

Every step contributes properties to the same command instance. Define the command on the backend and run a Debug build so the TypeScript proxy exists before importing it.

Step 2 — Build the dialog

import { StepperCommandDialog, StepperPanel } from '@cratis/components/CommandDialog';
import { InputTextField, NumberField, TextAreaField } from '@cratis/components/CommandForm';
import { DialogResult, useDialogContext } from '@cratis/arc.react/dialogs';
import { CreateProject } from '../api/Projects/CreateProject';

export const CreateProjectDialog = () => {
    const { closeDialog } = useDialogContext();

    return (
        <StepperCommandDialog<CreateProject>
            command={CreateProject}
            title='Create new project'
            okLabel='Create'
            onSuccess={() => closeDialog(DialogResult.Ok)}
            onCancel={() => closeDialog(DialogResult.Cancelled)}>
            <StepperPanel header='Contact info'>
                <InputTextField<CreateProject> value={c => c.email} title='Contact email' type='email' />
            </StepperPanel>
            <StepperPanel header='Project details'>
                <InputTextField<CreateProject> value={c => c.name} title='Project name' />
                <TextAreaField<CreateProject> value={c => c.description} title='Description' rows={4} />
            </StepperPanel>
            <StepperPanel header='Budget'>
                <NumberField<CreateProject> value={c => c.budget} title='Budget' />
            </StepperPanel>
        </StepperCommandDialog>
    );
};