@omnify/onboarding-flow

A comprehensive, customizable onboarding flow component for React applications with a 5-step process including profile setup, company setup, analytics connection, asset upload, and brand guidelines.

✨ Features

• 5-Step Onboarding Process: Complete user onboarding flow
• Responsive Design: Mobile-first, responsive UI components
• TypeScript Support: Full TypeScript support with comprehensive types
• Customizable: Easy to customize themes, validation rules, and components
• Form Validation: Built-in validation for each step
• File Upload: Support for multiple file types (images, PDFs, CSVs, Excel)
• Progress Tracking: Visual progress indicator with step navigation
• Accessibility: Built with accessibility best practices
• Modern UI: Clean, modern design using Tailwind CSS

🚀 Installation

npm install @omnify/onboarding-flow
# or
yarn add @omnify/onboarding-flow

📦 Peer Dependencies

This package requires the following peer dependencies:

{
  "react": ">=16.8.0",
  "react-dom": ">=16.8.0"
}

🎯 Quick Start

import React from 'react';
import { OnboardingFlow } from '@omnify/onboarding-flow';

function App() {
  const handleOnboardingComplete = (data) => {
    console.log('Onboarding completed:', data);
    // Handle completion logic
  };

  const user = {
    id: 'user-123',
    email: '[email protected]',
    name: 'John Doe'
  };

  return (
    <OnboardingFlow
      user={user}
      onComplete={handleOnboardingComplete}
    />
  );
}

🔧 Configuration

Basic Props

<OnboardingFlow
  user={user}
  onComplete={handleComplete}
  onStepChange={handleStepChange}
  initialData={initialData}
  showHeader={true}
  showFooter={true}
  className="custom-class"
/>

Props Reference

| Prop | Type | Default | Description | |------|------|---------|-------------| | user | User | Required | User object with basic information | | onComplete | (data: OnboardingData) => void | Required | Callback when onboarding completes | | onStepChange | (step: number, data: Partial<OnboardingData>) => void | Optional | Callback when step changes | | initialData | Partial<OnboardingData> | {} | Pre-populate form fields | | showHeader | boolean | true | Show/hide the header component | | showFooter | boolean | true | Show/hide the footer component | | className | string | '' | Additional CSS classes |

📋 Onboarding Steps

1. Profile Setup

• First Name
• Last Name
• Role (CEO, CMO, Marketing, etc.)

2. Company Setup

• Company Name
• Industry
• Primary Marketing Objective

3. Analytics Connection

• File upload (CSV, PDF, Excel)
• Platform selection (Social media platforms)
• Google Analytics connection option

4. Asset Upload

• Campaign assets upload
• Ad copy input
• File management

5. Brand Guidelines

• Brand colors selection
• Tone of voice
• Target audience
• Brand style preferences

🎨 Customization

Custom Validation Rules

import { validateStep } from '@omnify/onboarding-flow';

// Custom validation for step 1
const customValidation = (step: number, data: OnboardingData) => {
  if (step === 1) {
    // Custom validation logic
    return {
      isValid: data.firstName.length > 2,
      errors: data.firstName.length <= 2 ? ['First name must be at least 3 characters'] : []
    };
  }
  return validateStep(step, data);
};

Custom Components

import { OnboardingFlow, ProfileStep } from '@omnify/onboarding-flow';

// Use custom step component
const CustomProfileStep = (props) => {
  // Custom implementation
  return <ProfileStep {...props} />;
};

// Replace default step
<OnboardingFlow
  user={user}
  onComplete={handleComplete}
  customComponents={{
    ProfileStep: CustomProfileStep
  }}
/>

Theme Customization

const customTheme = {
  primaryColor: '#FF6B6B',
  secondaryColor: '#4ECDC4',
  backgroundColor: '#F8F9FA',
  textColor: '#212529'
};

<OnboardingFlow
  user={user}
  onComplete={handleComplete}
  theme={customTheme}
/>

📊 Data Structure

OnboardingData Interface

interface OnboardingData {
  // Step 1: Profile
  firstName: string;
  lastName: string;
  role: string;
  
  // Step 2: Company
  companyName: string;
  industry: string;
  objective: string;
  
  // Step 3: Analytics
  analyticsConnected: boolean;
  selectedPlatforms: string[];
  
  // Step 4: Assets
  assets: Asset[];
  adCopy: string;
  
  // Step 5: Brand
  brandGuidelines: BrandGuidelines;
}

User Interface

interface User {
  id: string;
  name?: string;
  email: string;
  companyName?: string;
  role?: 'CEO' | 'CMO' | 'Marketing' | 'MarketingTeam' | 'General';
}

🔍 Validation

Each step includes built-in validation:

• Profile Step: Requires first name, last name, and role
• Company Step: Requires company name, industry, and objective
• Analytics Step: Requires either analytics connection or platform selection
• Assets Step: Requires either assets upload or ad copy
• Brand Step: Requires brand colors, tone of voice, and target audience

📁 File Upload

Supported file types:

• Images: JPG, PNG, GIF, WebP
• Documents: PDF, CSV, Excel (XLSX, XLS)
• Maximum file size: 10MB
• Maximum files: 20

🎯 Use Cases

• SaaS Onboarding: User setup and configuration
• Marketing Platforms: Campaign setup and brand configuration
• E-commerce: Store setup and preferences
• Analytics Tools: Data source connection
• Creative Platforms: Asset management and style preferences

🚀 Advanced Usage

Step-by-Step Navigation

const [currentStep, setCurrentStep] = useState(1);

const handleStepChange = (step: number, data: Partial<OnboardingData>) => {
  console.log(`Step ${step} data:`, data);
  setCurrentStep(step);
};

<OnboardingFlow
  user={user}
  onComplete={handleComplete}
  onStepChange={handleStepChange}
/>

Data Persistence

const [onboardingData, setOnboardingData] = useState(() => {
  const saved = localStorage.getItem('onboarding-data');
  return saved ? JSON.parse(saved) : {};
});

const handleDataChange = (data: Partial<OnboardingData>) => {
  const newData = { ...onboardingData, ...data };
  setOnboardingData(newData);
  localStorage.setItem('onboarding-data', JSON.stringify(newData));
};

🧪 Development

Building the Package

npm run build

Development Mode

npm run dev

Type Checking

npm run type-check

📄 License

MIT License - see LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please read our contributing guidelines and submit pull requests.

📞 Support

For support and questions:

• Create an issue on GitHub
• Check the documentation
• Contact the Omnify team

🔄 Changelog

v1.0.0

• Initial release
• 5-step onboarding flow
• TypeScript support
• Responsive design
• File upload functionality
• Customizable components