@umituz/react-native-onboarding 3.3.11 → 3.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "3.3.11",
+  "version": "3.5.1",
   "description": "Advanced onboarding flow for React Native apps with personalization questions, theme-aware colors, animations, and customizable slides. SOLID, DRY, KISS principles applied.",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -31,10 +31,9 @@
     "url": "https://github.com/umituz/react-native-onboarding"
   },
   "peerDependencies": {
-    "@umituz/react-native-icons": "latest",
     "@umituz/react-native-storage": "latest",
     "@umituz/react-native-localization": "latest",
-    "@umituz/react-native-design-system": "latest",
+    "@umituz/react-native-design-system": "^2.1.0",
     "@expo/vector-icons": ">=14.0.0",
     "expo-image": ">=2.0.0",
     "expo-linear-gradient": ">=13.0.0",
@@ -42,13 +41,12 @@
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
     "react-native-safe-area-context": ">=4.0.0",
-    "zustand": ">=5.0.0"
+    "zustand": "^4.5.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@umituz/react-native-icons": "latest",
     "@umituz/react-native-storage": "latest",
     "@umituz/react-native-localization": "latest",
-    "@umituz/react-native-design-system": "latest",
+    "@umituz/react-native-design-system": "^2.1.0",
     "@expo/vector-icons": "^14.0.0",
     "expo-image": "~2.0.0",
     "expo-linear-gradient": "^15.0.7",
@@ -68,4 +66,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

package/src/index.ts

@@ -68,6 +68,7 @@ export {
 export { OnboardingScreen, type OnboardingScreenProps } from "./presentation/screens/OnboardingScreen";
 export { OnboardingHeader, type OnboardingHeaderProps } from "./presentation/components/OnboardingHeader";
 export { OnboardingFooter, type OnboardingFooterProps } from "./presentation/components/OnboardingFooter";
+export { OnboardingThemeProvider, type OnboardingThemeProviderProps, useOnboardingTheme } from "./presentation/providers/OnboardingThemeProvider";
 
 // Export OnboardingSlide component
 // Note: TypeScript doesn't allow exporting both a type and a value with the same name

package/src/infrastructure/storage/OnboardingStore.ts

@@ -5,7 +5,7 @@
  * Uses @umituz/react-native-storage for persistence
  */
 
-import { create } from "zustand";
+import { create, StoreApi } from "zustand";
 import type { OnboardingStoreState } from "./OnboardingStoreState";
 import { initialOnboardingState } from "./OnboardingStoreState";
 import { createOnboardingStoreActions } from "./OnboardingStoreActions";
@@ -27,8 +27,8 @@ interface OnboardingStore extends OnboardingStoreState {
   setUserData: (data: any) => Promise<void>;
 }
 
-export const useOnboardingStore = create<OnboardingStore>((set, get) => {
-  const actions = createOnboardingStoreActions(set as any, get);
+export const useOnboardingStore = create<OnboardingStore>((set: StoreApi<OnboardingStore>['setState'], get: StoreApi<OnboardingStore>['getState']) => {
+  const actions = createOnboardingStoreActions(set, get);
 
   return {
     ...initialOnboardingState,
@@ -54,7 +54,7 @@ export const useOnboardingStore = create<OnboardingStore>((set, get) => {
  */
 export const useOnboarding = () => {
   const store = useOnboardingStore();
-  const setState = store.setState as any;
+  const setState = store.setState;
   const getState = () => store;
   const actions = createOnboardingStoreActions(setState, getState);
   const selectors = createOnboardingStoreSelectors(getState);

package/src/presentation/components/OnboardingScreenContent.tsx

@@ -14,10 +14,10 @@ import { OnboardingSlide as OnboardingSlideComponent } from "./OnboardingSlide";
 import { QuestionSlide } from "./QuestionSlide";
 import { OnboardingFooter } from "./OnboardingFooter";
 import { BackgroundVideo } from "./BackgroundVideo";
+import { useOnboardingTheme } from "../providers/OnboardingThemeProvider";
 
 export interface OnboardingScreenContentProps {
   containerStyle?: any;
-  useGradient: boolean;
   currentSlide: OnboardingSlide | undefined;
   isFirstSlide: boolean;
   isLastSlide: boolean;
@@ -58,7 +58,6 @@ export interface OnboardingScreenContentProps {
 
 export const OnboardingScreenContent = ({
   containerStyle,
-  useGradient,
   currentSlide,
   isFirstSlide,
   isLastSlide,
@@ -86,6 +85,7 @@ export const OnboardingScreenContent = ({
   variant = "default",
 }: OnboardingScreenContentProps) => {
   const { themeMode } = useTheme();
+  const { useGradient } = useOnboardingTheme();
 
   const hasMedia = !!currentSlide?.backgroundImage || !!currentSlide?.backgroundVideo;
   const overlayOpacity = currentSlide?.overlayOpacity ?? 0.5;
@@ -157,7 +157,6 @@ export const OnboardingScreenContent = ({
           showBackButton={showBackButton}
           showSkipButton={showSkipButton}
           skipButtonText={skipButtonText}
-          useGradient={effectivelyUseGradient}
         />
       )}
       {currentSlide &&
@@ -168,13 +167,11 @@ export const OnboardingScreenContent = ({
             slide={currentSlide}
             value={currentAnswer}
             onChange={onAnswerChange}
-            useGradient={effectivelyUseGradient}
             variant={variant}
           />
         ) : (
           <OnboardingSlideComponent
             slide={currentSlide}
-            useGradient={effectivelyUseGradient}
             variant={variant}
           />
         ))}
@@ -199,7 +196,6 @@ export const OnboardingScreenContent = ({
           nextButtonText={nextButtonText}
           getStartedButtonText={getStartedButtonText}
           disabled={!isAnswerValid}
-          useGradient={effectivelyUseGradient}
         />
       )}
     </View>

package/src/presentation/screens/OnboardingScreen.tsx

@@ -118,7 +118,6 @@ export const OnboardingScreen = ({
     <OnboardingThemeProvider useGradient={useGradient}>
       <OnboardingScreenContent
         containerStyle={[styles.container, containerStyle]}
-        useGradient={useGradient}
         currentSlide={currentSlide}
         isFirstSlide={isFirstSlide}
         isLastSlide={isLastSlide}

package/README.md

@@ -1,387 +0,0 @@
-# @umituz/react-native-onboarding
-
-Advanced onboarding flow for React Native apps with **personalization questions**, gradient backgrounds, animations, and customizable slides. Built with SOLID, DRY, KISS principles.
-
-## ✨ Features
-
-- 🎨 **Beautiful gradient backgrounds** with smooth transitions
-- ❓ **Personalization questions** - Get to know your users
-- 📝 **Multiple question types** - Single choice, multiple choice, text input, slider, rating
-- ✅ **Built-in validation** - Required fields, min/max values, custom validators
-- 🔄 **Conditional slides** - Skip slides based on previous answers
-- 💾 **Persistent storage** - Save user answers and onboarding state
-- 🎯 **Type-safe** - Full TypeScript support
-- 🎭 **Customizable** - Custom header, footer, and slide components
-- 📱 **Universal** - Works on iOS, Android, and Web
-- 🚀 **Production-ready** - Used in hundreds of apps
-
-## 📦 Installation
-
-```bash
-npm install @umituz/react-native-onboarding
-```
-
-### Peer Dependencies
-
-```bash
-npm install \
-  @umituz/react-native-storage \
-  @umituz/react-native-localization \
-  @umituz/react-native-design-system-theme \
-  @umituz/react-native-design-system \
-  @umituz/react-native-design-system-atoms \
-  @react-native-community/slider \
-  expo-linear-gradient \
-  react-native-safe-area-context \
-  zustand
-```
-
-## 🚀 Quick Start
-
-### Basic Onboarding (Info Slides Only)
-
-```tsx
-import { OnboardingScreen } from '@umituz/react-native-onboarding';
-
-const slides = [
-  {
-    id: '1',
-    title: 'Welcome to Our App',
-    description: 'Discover amazing features',
-    icon: '👋',
-    gradient: ['#667eea', '#764ba2'],
-  },
-  {
-    id: '2',
-    title: 'Stay Organized',
-    description: 'Keep track of everything',
-    icon: '📋',
-    gradient: ['#f093fb', '#f5576c'],
-  },
-];
-
-<OnboardingScreen
-  slides={slides}
-  onComplete={() => console.log('Onboarding completed')}
-/>
-```
-
-### Advanced Onboarding (With Personalization Questions)
-
-```tsx
-import { OnboardingScreen, OnboardingSlide } from '@umituz/react-native-onboarding';
-
-const slides: OnboardingSlide[] = [
-  // Welcome slide
-  {
-    id: '1',
-    type: 'welcome',
-    title: 'Welcome to FishWise',
-    description: 'Your personal aquarium assistant',
-    icon: '🐠',
-    gradient: ['#667eea', '#764ba2'],
-  },
-  
-  // Question: Experience level
-  {
-    id: '2',
-    type: 'question',
-    title: 'What\'s your experience level?',
-    description: 'Help us personalize your experience',
-    icon: '🎯',
-    gradient: ['#f093fb', '#f5576c'],
-    question: {
-      id: 'experience_level',
-      type: 'single_choice',
-      question: 'Select your experience level',
-      storageKey: '@user_experience_level',
-      validation: { required: true },
-      options: [
-        { id: 'beginner', label: 'Beginner', icon: '🌱' },
-        { id: 'intermediate', label: 'Intermediate', icon: '🌿' },
-        { id: 'expert', label: 'Expert', icon: '🌳' },
-      ],
-    },
-  },
-  
-  // Question: Tank size
-  {
-    id: '3',
-    type: 'question',
-    title: 'What\'s your tank size?',
-    description: 'This helps us recommend suitable fish',
-    icon: '📏',
-    gradient: ['#4facfe', '#00f2fe'],
-    question: {
-      id: 'tank_size',
-      type: 'slider',
-      question: 'Select your tank size (gallons)',
-      storageKey: '@user_tank_size',
-      validation: { required: true, min: 10, max: 500 },
-      defaultValue: 50,
-    },
-  },
-  
-  // Question: Interests
-  {
-    id: '4',
-    type: 'question',
-    title: 'What interests you most?',
-    description: 'Select all that apply',
-    icon: '❤️',
-    gradient: ['#fa709a', '#fee140'],
-    question: {
-      id: 'interests',
-      type: 'multiple_choice',
-      question: 'Choose your interests',
-      storageKey: '@user_interests',
-      validation: { required: true, minSelections: 1, maxSelections: 3 },
-      options: [
-        { id: 'freshwater', label: 'Freshwater Fish', icon: '🐟' },
-        { id: 'saltwater', label: 'Saltwater Fish', icon: '🐠' },
-        { id: 'plants', label: 'Aquatic Plants', icon: '🌿' },
-        { id: 'equipment', label: 'Equipment & Tech', icon: '⚙️' },
-      ],
-    },
-  },
-  
-  // Completion slide
-  {
-    id: '5',
-    type: 'completion',
-    title: 'You\'re All Set!',
-    description: 'Let\'s start your aquarium journey',
-    icon: '🎉',
-    gradient: ['#30cfd0', '#330867'],
-  },
-];
-
-import Slider from '@react-native-community/slider';
-
-<OnboardingScreen
-  slides={slides}
-  SliderComponent={Slider}
-  onComplete={async () => {
-    const userData = onboardingStore.getUserData();
-    console.log('User answers:', userData.answers);
-    // Save to backend, navigate to home, etc.
-  }}
-/>
-```
-
-## 📖 API Reference
-
-### OnboardingScreen Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `slides` | `OnboardingSlide[]` | Required | Array of slides to display |
-| `onComplete` | `() => void \| Promise<void>` | - | Callback when onboarding is completed |
-| `onSkip` | `() => void \| Promise<void>` | - | Callback when onboarding is skipped |
-| `skipButtonText` | `string` | "Skip" | Custom skip button text |
-| `nextButtonText` | `string` | "Next" | Custom next button text |
-| `getStartedButtonText` | `string` | "Get Started" | Custom get started button text |
-| `showSkipButton` | `boolean` | `true` | Show skip button |
-| `showBackButton` | `boolean` | `true` | Show back button |
-| `showProgressBar` | `boolean` | `true` | Show progress bar |
-| `showDots` | `boolean` | `true` | Show dots indicator |
-| `showProgressText` | `boolean` | `true` | Show progress text (1 of 5) |
-| `storageKey` | `string` | - | Custom storage key for completion state |
-| `autoComplete` | `boolean` | `false` | Auto-complete on last slide |
-| `SliderComponent` | `React.ComponentType` | - | **Required if using slider questions.** Import from `@react-native-community/slider` |
-
-### OnboardingSlide Interface
-
-```typescript
-interface OnboardingSlide {
-  id: string;
-  type?: 'info' | 'question' | 'welcome' | 'completion';
-  title: string;
-  description: string;
-  icon: string; // Emoji or Lucide icon name
-  gradient: string[]; // [startColor, endColor] or [color1, color2, color3]
-  image?: string;
-  features?: string[];
-  question?: OnboardingQuestion;
-  skipIf?: (answers: Record<string, any>) => boolean;
-}
-```
-
-### Question Types
-
-#### Single Choice
-
-```typescript
-{
-  type: 'single_choice',
-  question: 'What is your goal?',
-  options: [
-    { id: 'weight_loss', label: 'Weight Loss', icon: '🏃' },
-    { id: 'muscle_gain', label: 'Muscle Gain', icon: '💪' },
-  ],
-}
-```
-
-#### Multiple Choice
-
-```typescript
-{
-  type: 'multiple_choice',
-  question: 'Select your interests',
-  validation: { minSelections: 1, maxSelections: 3 },
-  options: [
-    { id: 'yoga', label: 'Yoga', icon: '🧘' },
-    { id: 'running', label: 'Running', icon: '🏃' },
-    { id: 'swimming', label: 'Swimming', icon: '🏊' },
-  ],
-}
-```
-
-#### Text Input
-
-```typescript
-{
-  type: 'text_input',
-  question: 'What is your name?',
-  placeholder: 'Enter your name',
-  validation: { required: true, minLength: 2, maxLength: 50 },
-}
-```
-
-#### Slider
-
-**⚠️ Important:** When using slider questions, you must provide the `SliderComponent` prop to `OnboardingScreen`:
-
-```tsx
-import Slider from '@react-native-community/slider';
-
-<OnboardingScreen
-  slides={slides}
-  SliderComponent={Slider}
-  onComplete={handleComplete}
-/>
-```
-
-```typescript
-{
-  type: 'slider',
-  question: 'What is your age?',
-  validation: { min: 18, max: 100 },
-  defaultValue: 25,
-}
-```
-
-**Note:** Make sure `@react-native-community/slider` is installed and properly linked (run `pod install` for iOS).
-
-#### Rating
-
-```typescript
-{
-  type: 'rating',
-  question: 'Rate your experience',
-  validation: { max: 5 },
-}
-```
-
-## 🎨 Customization
-
-### Custom Header
-
-```tsx
-<OnboardingScreen
-  slides={slides}
-  renderHeader={({ isFirstSlide, onBack, onSkip }) => (
-    <View>
-      {!isFirstSlide && <Button onPress={onBack}>Back</Button>}
-      <Button onPress={onSkip}>Skip</Button>
-    </View>
-  )}
-/>
-```
-
-### Custom Footer
-
-```tsx
-<OnboardingScreen
-  slides={slides}
-  renderFooter={({ currentIndex, totalSlides, isLastSlide, onNext }) => (
-    <View>
-      <Text>{currentIndex + 1} / {totalSlides}</Text>
-      <Button onPress={onNext}>
-        {isLastSlide ? 'Get Started' : 'Next'}
-      </Button>
-    </View>
-  )}
-/>
-```
-
-### Conditional Slides
-
-```tsx
-{
-  id: '3',
-  title: 'Advanced Features',
-  description: 'Only for experienced users',
-  icon: '⚡',
-  gradient: ['#667eea', '#764ba2'],
-  skipIf: (answers) => answers.experience_level === 'beginner',
-}
-```
-
-## 💾 Accessing User Data
-
-```tsx
-import { useOnboarding } from '@umituz/react-native-onboarding';
-
-const { userData, getAnswer } = useOnboarding();
-
-// Get specific answer
-const experienceLevel = getAnswer('experience_level');
-
-// Get all answers
-const allAnswers = userData.answers;
-
-// Check if onboarding was completed
-const isComplete = userData.completedAt !== undefined;
-
-// Check if onboarding was skipped
-const wasSkipped = userData.skipped === true;
-```
-
-## 🔄 Resetting Onboarding
-
-```tsx
-import { useOnboarding } from '@umituz/react-native-onboarding';
-
-const { reset } = useOnboarding();
-
-// Reset onboarding (useful for testing or settings)
-await reset();
-```
-
-## 📱 Platform Support
-
-- ✅ iOS
-- ✅ Android
-- ✅ Web
-
-## 🏗️ Architecture
-
-Built with Domain-Driven Design (DDD):
-
-- **Domain Layer**: Entities and interfaces (business logic)
-- **Infrastructure Layer**: Storage and hooks (state management)
-- **Presentation Layer**: Components and screens (UI)
-
-## 📄 License
-
-MIT
-
-## 🤝 Contributing
-
-Contributions are welcome! Please open an issue or PR.
-
-## 📧 Support
-
-For issues and questions, please open an issue on GitHub.
-