omnify-onboarding-package/README.md

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

# @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

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

## 📦 Peer Dependencies

This package requires the following peer dependencies:

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

## 🎯 Quick Start

```tsx
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: 'user@example.com',
    name: 'John Doe'
  };

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

## 🔧 Configuration

### Basic Props

```tsx
<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

```tsx
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

```tsx
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

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

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

## 📊 Data Structure

### OnboardingData Interface

```tsx
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

```tsx
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

```tsx
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

```tsx
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

```bash
npm run build
```

### Development Mode

```bash
npm run dev
```

### Type Checking

```bash
npm run type-check
```

## 📄 License

MIT License - see [LICENSE](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