Question Flow

A reusable React + MUI component for animated, scroll-snapping onboarding and form flows. Designed for multi-step, conversational data capture.

✨ Features

• Supports text, number, radio, checkbox, multiselect inputs
• MUI integrated
• Custom helper text with optional bulleted list
• Conditional rendering per question
• Scroll snap + animated transitions (Framer Motion spring-ready)
• Simple FlowStack schema, easy to extend
• Dynamic step generation (e.g., for dog names)
• Final review and API submit step
• Designed to be published as a separate NPM module

📦 Installation

yarn add question-flow

Or clone this repo and integrate manually.

🔧 Usage

import { OnboardingFlow } from './src/components/OnboardingFlow'
import { FlowStack } from './src/types'

const flowStack: FlowStack = {
  id: 'demo-flow',
  stack: [
    {
      type: 'question',
      ctx: { key: 'name' },
      options: {
        question: "What's your name?",
        input: 'text',
        type: 'text',
        required: true,
      },
    },
    {
      type: 'question',
      ctx: { key: 'dog_count' },
      options: {
        question: 'How many dogs?',
        input: 'number',
        type: 'number',
        required: true,
      },
    },
    // Dog name steps are generated dynamically
  ],
  lastRun: { id: 'demo', timestamp: Date.now() },
  ctx: {},
}

;<OnboardingFlow
  flowStack={flowStack}
  onSubmit={(data) => console.log('Form submitted:', data)}
/>

⚙️ Dev Setup

yarn install
yarn dev

🧪 Testing

yarn test

📁 File Structure

• src/components/OnboardingFlow.tsx: Main onboarding flow component
• src/components/StepCard.tsx: Step card UI for each question
• src/components/TrailStack.tsx: Animated memory trail of previous answers
• src/types.ts: FlowStack schema types
• src/components/StepCard.test.tsx, TrailStack.test.tsx, OnboardingFlow.test.tsx: Unit tests
• src/stories/OnboardingFlow.stories.tsx, StepCard.stories.tsx, TrailStack.stories.tsx: Storybook stories
• tsconfig.json: TS setup
• jest.config.js: Test configuration
• .prettierrc: Code style

© 2025 Wolf Dane Pug — Built for reusable onboarding magic ✨