@rubixscript/react-native-onboarding 1.2.0 → 1.3.0

package/src/presets/index.ts

@@ -1,214 +1,117 @@
-import { SlideData, OnboardingConfig } from '../types';
+import { SlideData, OnboardingConfig, ImageSlideData, IconSlideData, FormSlideData } from '../types';
 
 // ============================================================================
-// ONEPAGE PRESET SLIDES
+// HELPER FUNCTIONS TO CREATE SLIDES
 // ============================================================================
 
-export const onepageSlides: SlideData[] = [
-  {
-    id: 'welcome',
-    type: 'image',
-    title: 'Welcome to 1Page',
-    description: 'Your personal reading companion for tracking and discovering amazing books.',
-    image: require('../../assets/images/onboarding/welcome.png'),
-    gradientColors: ['#667EEA', '#764BA2'],
-  },
-  {
-    id: 'library',
-    type: 'image',
-    title: 'Smart Library',
-    description: 'Organize your books effortlessly and discover insights about your reading habits.',
-    image: require('../../assets/images/onboarding/library.png'),
-    gradientColors: ['#667EEA', '#06D6A0'],
-  },
-  {
-    id: 'progress',
-    type: 'image',
-    title: 'Track Progress',
-    description: 'Monitor your reading journey with beautiful statistics and achievements.',
-    image: require('../../assets/images/onboarding/progress.png'),
-    gradientColors: ['#06D6A0', '#764BA2'],
-  },
-  {
-    id: 'profile',
-    type: 'form',
-    title: 'Let\'s Get Started',
-    description: 'Tell us a bit about yourself to personalize your experience.',
-    fields: [
-      {
-        key: 'name',
-        label: 'What should we call you?',
-        placeholder: 'Enter your name',
-        type: 'text',
-        required: true,
-      },
-      {
-        key: 'readerLevel',
-        label: 'Reader Level',
-        placeholder: 'Select your level',
-        type: 'select',
-        required: true,
-        options: [
-          { value: 'novice', label: 'Novice', icon: 'book-outline' },
-          { value: 'reader', label: 'Reader', icon: 'book' },
-          { value: 'bookworm', label: 'Bookworm', icon: 'library' },
-          { value: 'scholar', label: 'Scholar', icon: 'school' },
-          { value: 'sage', label: 'Sage', icon: 'sparkles' },
-          { value: 'master', label: 'Master', icon: 'trophy' },
-        ],
-      },
-      {
-        key: 'yearlyPages',
-        label: 'Yearly Reading Goal',
-        placeholder: 'Select your goal',
-        type: 'select',
-        required: true,
-        options: [
-          { value: '0-500', label: '0-500 pages' },
-          { value: '500-1500', label: '500-1500 pages' },
-          { value: '1500-3000', label: '1500-3000 pages' },
-          { value: '3000-5000', label: '3000-5000 pages' },
-          { value: '5000+', label: '5000+ pages' },
-        ],
-      },
-    ],
-    submitLabel: 'Start Reading',
-    gradientColors: ['#667EEA', '#764BA2'],
+/**
+ * Create an image slide with a gradient background
+ * @param id Unique slide identifier
+ * @param title Slide title
+ * @param description Slide description
+ * @param image Image source (use require() for local images)
+ * @param gradientColors Array of gradient colors
+ * @param overlayIcon Optional icon to show on the image
+ */
+export const createImageSlide = (
+  id: string,
+  title: string,
+  description: string,
+  image: any,
+  gradientColors?: string[],
+  overlayIcon?: { name: string; size?: number; color?: string }
+): ImageSlideData => ({
+  id,
+  type: 'image',
+  title,
+  description,
+  image,
+  gradientColors,
+  overlayIcon,
+});
+
+/**
+ * Create an icon slide
+ * @param id Unique slide identifier
+ * @param title Slide title
+ * @param description Slide description
+ * @param iconName Icon name from the icon library
+ * @param iconType Icon library type
+ * @param backgroundColor Background color
+ * @param iconColor Icon color
+ */
+export const createIconSlide = (
+  id: string,
+  title: string,
+  description: string,
+  iconName: string,
+  iconType: 'ionicons' | 'material' | 'material-community' | 'font-awesome' = 'material-community',
+  backgroundColor: string = '#F6F6F6',
+  iconColor: string = '#000000',
+  iconBackgroundColor: string = 'rgba(255, 107, 107, 0.1)'
+): IconSlideData => ({
+  id,
+  type: 'icon',
+  title,
+  description,
+  icon: {
+    name: iconName,
+    type: iconType,
+    size: 80,
+    color: iconColor,
+    backgroundColor: iconBackgroundColor,
+    backgroundSize: 160,
   },
-];
+  backgroundColor,
+});
+
+/**
+ * Create a form slide for user data collection
+ * @param id Unique slide identifier
+ * @param title Form title
+ * @param description Form description
+ * @param fields Array of form field configurations
+ * @param submitLabel Button label for form submission
+ * @param gradientColors Optional gradient background colors
+ */
+export const createFormSlide = (
+  id: string,
+  title: string,
+  description: string,
+  fields: FormSlideData['fields'],
+  submitLabel: string = 'Get Started',
+  gradientColors?: string[]
+): FormSlideData => ({
+  id,
+  type: 'form',
+  title,
+  description,
+  fields,
+  submitLabel,
+  gradientColors,
+});
 
 // ============================================================================
-// ZAPRECIPE PRESET SLIDES
+// NOTE: Example slides below are for reference only.
+// Apps should create their own slides using the helper functions above
+// or by defining SlideData objects directly.
 // ============================================================================
 
-export const zaprecipeSlides: SlideData[] = [
-  {
-    id: 'discover',
-    type: 'image',
-    title: 'Find Perfect Recipes',
-    description: 'Discover thousands of recipes tailored to your taste and dietary preferences.',
-    image: require('../../assets/images/onboarding/recipes.jpg'),
-    overlayIcon: { name: 'search', size: 40 },
-    gradientColors: ['#667eea', '#764ba2', '#6B4EFF'],
-  },
-  {
-    id: 'save',
-    type: 'image',
-    title: 'Save Your Favorites',
-    description: 'Build your personal cookbook with recipes you love and want to try.',
-    image: require('../../assets/images/onboarding/favorites.jpg'),
-    overlayIcon: { name: 'heart', size: 40 },
-    gradientColors: ['#667eea', '#764ba2', '#6B4EFF'],
-  },
-  {
-    id: 'cook',
-    type: 'image',
-    title: 'Cook with Confidence',
-    description: 'Step-by-step instructions make cooking easy and enjoyable for everyone.',
-    image: require('../../assets/images/onboarding/cooking.jpg'),
-    overlayIcon: { name: 'restaurant', size: 40 },
-    gradientColors: ['#667eea', '#764ba2', '#6B4EFF'],
-  },
-  {
-    id: 'profile',
-    type: 'form',
-    title: 'Tell Us About Yourself',
-    description: 'Help us personalize your cooking experience.',
-    fields: [
-      {
-        key: 'name',
-        label: 'Your Name',
-        placeholder: 'Enter your name',
-        type: 'text',
-        required: true,
-      },
-      {
-        key: 'cookingLevel',
-        label: 'Cooking Level',
-        placeholder: 'Select your level',
-        type: 'select',
-        required: true,
-        options: [
-          { value: 'beginner', label: 'Beginner', icon: 'leaf' },
-          { value: 'intermediate', label: 'Intermediate', icon: 'flame' },
-          { value: 'advanced', label: 'Advanced', icon: 'star' },
-        ],
-      },
-      {
-        key: 'improveHabits',
-        label: 'What cooking habits do you want to improve?',
-        placeholder: 'e.g., Faster prep, Better seasoning',
-        type: 'text',
-      },
-      {
-        key: 'masterSkill',
-        label: 'What culinary skill do you want to master?',
-        placeholder: 'e.g., Knife skills, Baking',
-        type: 'text',
-      },
-    ],
-    submitLabel: "Let's Start Cooking!",
-    gradientColors: ['#667eea', '#764ba2', '#6B4EFF'],
-  },
-];
-
 // ============================================================================
-// POMODO PRESET SLIDES
+// ICON STYLE PRESET - Example slides for icon-based onboarding
 // ============================================================================
 
-export const pomodoSlides: SlideData[] = [
-  {
-    id: '1',
-    type: 'icon',
-    title: 'Focus Timer',
-    description: 'Stay productive with our Pomodoro timer. Work in focused intervals for better results.',
-    icon: {
-      name: 'timer-outline',
-      type: 'material-community',
-      size: 80,
-      color: '#000000',
-      backgroundColor: 'rgba(255, 107, 107, 0.1)',
-      backgroundSize: 160,
-    },
-    backgroundColor: '#F6F6F6',
-  },
-  {
-    id: '2',
-    type: 'icon',
-    title: 'Task Management',
-    description: 'Organize your tasks efficiently. Track progress and set priorities with ease.',
-    icon: {
-      name: 'checkbox-marked-circle-outline',
-      type: 'material-community',
-      size: 80,
-      color: '#000000',
-      backgroundColor: 'rgba(255, 107, 107, 0.1)',
-      backgroundSize: 160,
-    },
-    backgroundColor: '#F6F6F6',
-  },
-  {
-    id: '3',
-    type: 'icon',
-    title: 'Statistics',
-    description: 'Monitor your productivity with detailed statistics and insights.',
-    icon: {
-      name: 'chart-line',
-      type: 'material-community',
-      size: 80,
-      color: '#000000',
-      backgroundColor: 'rgba(255, 107, 107, 0.1)',
-      backgroundSize: 160,
-    },
-    backgroundColor: '#F6F6F6',
-  },
+export const iconStyleSlides: SlideData[] = [
+  createIconSlide('1', 'Feature One', 'Discover the first amazing feature of our app.', 'star-outline'),
+  createIconSlide('2', 'Feature Two', 'Explore the second feature that makes us unique.', 'heart-outline'),
+  createIconSlide('3', 'Feature Three', 'Complete your journey with our third feature.', 'check-circle-outline'),
 ];
 
 // ============================================================================
-// MODERN PRESET SLIDES
+// MODERN STYLE PRESET - Modern icon-based design with vibrant colors
 // ============================================================================
 
-export const modernSlides: SlideData[] = [
+export const modernStyleSlides: SlideData[] = [
   {
     id: 'welcome',
     type: 'icon',
@@ -254,10 +157,10 @@ export const modernSlides: SlideData[] = [
 ];
 
 // ============================================================================
-// MINIMAL PRESET SLIDES
+// MINIMAL STYLE PRESET - Clean, simple design
 // ============================================================================
 
-export const minimalSlides: SlideData[] = [
+export const minimalStyleSlides: SlideData[] = [
   {
     id: 'one',
     type: 'icon',
@@ -303,32 +206,54 @@ export const minimalSlides: SlideData[] = [
 ];
 
 // ============================================================================
-// GRADIENT PRESET SLIDES
+// GRADIENT STYLE PRESET - Icon slides with gradient colors
+// Note: For image-based gradient slides, use createImageSlide() with your own images
 // ============================================================================
 
-export const gradientSlides: SlideData[] = [
+export const gradientStyleSlides: SlideData[] = [
   {
     id: 'discover',
-    type: 'image',
+    type: 'icon',
     title: 'Discover',
     description: 'Explore new possibilities and unlock your potential.',
-    image: require('../../assets/images/onboarding/gradient1.jpg'),
+    icon: {
+      name: 'compass-outline',
+      type: 'material-community',
+      size: 72,
+      color: '#FFFFFF',
+      backgroundColor: '#667EEA',
+      backgroundSize: 160,
+    },
     gradientColors: ['#667EEA', '#764BA2'],
   },
   {
     id: 'create',
-    type: 'image',
+    type: 'icon',
     title: 'Create',
     description: 'Build something amazing with powerful tools at your fingertips.',
-    image: require('../../assets/images/onboarding/gradient2.jpg'),
+    icon: {
+      name: 'lightbulb-outline',
+      type: 'material-community',
+      size: 72,
+      color: '#FFFFFF',
+      backgroundColor: '#f093fb',
+      backgroundSize: 160,
+    },
     gradientColors: ['#f093fb', '#f5576c'],
   },
   {
     id: 'share',
-    type: 'image',
+    type: 'icon',
     title: 'Share',
     description: 'Connect with others and share your journey.',
-    image: require('../../assets/images/onboarding/gradient3.jpg'),
+    icon: {
+      name: 'share-variant-outline',
+      type: 'material-community',
+      size: 72,
+      color: '#FFFFFF',
+      backgroundColor: '#4facfe',
+      backgroundSize: 160,
+    },
     gradientColors: ['#4facfe', '#00f2fe'],
   },
 ];
@@ -339,14 +264,12 @@ export const gradientSlides: SlideData[] = [
 
 export const getPresetSlides = (preset: string): SlideData[] => {
   const slidesMap: Record<string, SlideData[]> = {
-    onepage: onepageSlides,
-    zaprecipe: zaprecipeSlides,
-    pomodo: pomodoSlides,
-    modern: modernSlides,
-    minimal: minimalSlides,
-    gradient: gradientSlides,
+    icon: iconStyleSlides,
+    modern: modernStyleSlides,
+    minimal: minimalStyleSlides,
+    gradient: gradientStyleSlides,
   };
-  return slidesMap[preset] || modernSlides;
+  return slidesMap[preset] || modernStyleSlides;
 };
 
 export const getPresetConfig = (preset: string): Partial<OnboardingConfig> => {
@@ -357,35 +280,46 @@ export const getPresetConfig = (preset: string): Partial<OnboardingConfig> => {
 };
 
 // ============================================================================
-// QUICK START CONFIGS
+// QUICK START CONFIGS - Generic configurations for each style
 // ============================================================================
 
-export const onepageConfig: OnboardingConfig = {
-  slides: onepageSlides,
-  storage: { key: '@1page:onboarding_complete', enabled: true },
+export const iconStyleConfig: OnboardingConfig = {
+  slides: iconStyleSlides,
+  storage: { key: '@onboarding:icon_complete', enabled: true },
+  navigation: { showSkip: false },
 };
 
-export const zaprecipeConfig: OnboardingConfig = {
-  slides: zaprecipeSlides,
-  storage: { key: '@zaprecipe:onboarding_complete', enabled: true },
+export const modernStyleConfig: OnboardingConfig = {
+  slides: modernStyleSlides,
+  storage: { key: '@onboarding:modern_complete', enabled: true },
 };
 
-export const pomodoConfig: OnboardingConfig = {
-  slides: pomodoSlides,
-  storage: { key: '@pomodo:onboarding_complete', enabled: true },
-  navigation: { showSkip: false },
+export const minimalStyleConfig: OnboardingConfig = {
+  slides: minimalStyleSlides,
+  storage: { key: '@onboarding:minimal_complete', enabled: true },
+};
+
+export const gradientStyleConfig: OnboardingConfig = {
+  slides: gradientStyleSlides,
+  storage: { key: '@onboarding:gradient_complete', enabled: true },
 };
 
 export default {
-  onepageSlides,
-  zaprecipeSlides,
-  pomodoSlides,
-  modernSlides,
-  minimalSlides,
-  gradientSlides,
+  // Helper functions for creating slides
+  createImageSlide,
+  createIconSlide,
+  createFormSlide,
+  // Example slides
+  iconStyleSlides,
+  modernStyleSlides,
+  minimalStyleSlides,
+  gradientStyleSlides,
+  // Getters
   getPresetSlides,
   getPresetConfig,
-  onepageConfig,
-  zaprecipeConfig,
-  pomodoConfig,
+  // Configs
+  iconStyleConfig,
+  modernStyleConfig,
+  minimalStyleConfig,
+  gradientStyleConfig,
 };

package/src/themes/index.ts

@@ -66,10 +66,10 @@ const createShadows = () => ({
 });
 
 // ============================================================================
-// ONEPAGE THEME
+// IMAGE STYLE THEME - For image-based onboarding with gradient backgrounds
 // ============================================================================
 
-export const onepageTheme: OnboardingTheme = {
+export const imageStyleTheme: OnboardingTheme = {
   colors: {
     primary: '#667EEA',
     secondary: '#06D6A0',
@@ -110,8 +110,8 @@ export const onepageTheme: OnboardingTheme = {
   shadows: createShadows(),
 };
 
-export const onepagePreset: PresetConfig = {
-  theme: onepageTheme,
+export const imageStylePreset: PresetConfig = {
+  theme: imageStyleTheme,
   navigation: {
     style: 'dots',
     position: 'bottom',
@@ -120,7 +120,7 @@ export const onepagePreset: PresetConfig = {
     skipLabel: 'Skip',
     backLabel: 'Back',
     nextLabel: 'Next',
-    doneLabel: "Let's Get Started",
+    doneLabel: "Get Started",
   },
   animation: {
     type: 'slide',
@@ -148,10 +148,10 @@ export const onepagePreset: PresetConfig = {
 };
 
 // ============================================================================
-// ZAPRECIPE THEME
+// IMAGE GRADIENT THEME - Image slides with gradient overlay (dark text on gradient)
 // ============================================================================
 
-export const zaprecipeTheme: OnboardingTheme = {
+export const imageGradientTheme: OnboardingTheme = {
   colors: {
     primary: '#6B4EFF',
     secondary: '#FF8C42',
@@ -192,8 +192,8 @@ export const zaprecipeTheme: OnboardingTheme = {
   shadows: createShadows(),
 };
 
-export const zaprecipePreset: PresetConfig = {
-  theme: zaprecipeTheme,
+export const imageGradientPreset: PresetConfig = {
+  theme: imageGradientTheme,
   navigation: {
     style: 'dots',
     position: 'floating',
@@ -202,7 +202,7 @@ export const zaprecipePreset: PresetConfig = {
     skipLabel: 'Skip',
     backLabel: 'Back',
     nextLabel: 'Continue',
-    doneLabel: "Let's Start Cooking!",
+    doneLabel: "Get Started",
   },
   animation: {
     type: 'fade',
@@ -230,10 +230,10 @@ export const zaprecipePreset: PresetConfig = {
 };
 
 // ============================================================================
-// POMODO THEME
+// ICON STYLE THEME - For icon-based onboarding
 // ============================================================================
 
-export const pomodoTheme: OnboardingTheme = {
+export const iconStyleTheme: OnboardingTheme = {
   colors: {
     primary: '#FF6B6B',
     secondary: '#667EEA',
@@ -269,8 +269,8 @@ export const pomodoTheme: OnboardingTheme = {
   shadows: createShadows(),
 };
 
-export const pomodoPreset: PresetConfig = {
-  theme: pomodoTheme,
+export const iconStylePreset: PresetConfig = {
+  theme: iconStyleTheme,
   navigation: {
     style: 'dots',
     position: 'bottom',
@@ -523,9 +523,9 @@ export const gradientPreset: PresetConfig = {
 
 export const getTheme = (preset: string): OnboardingTheme => {
   const themes: Record<string, OnboardingTheme> = {
-    onepage: onepageTheme,
-    zaprecipe: zaprecipeTheme,
-    pomodo: pomodoTheme,
+    image: imageStyleTheme,
+    imageGradient: imageGradientTheme,
+    icon: iconStyleTheme,
     modern: modernTheme,
     minimal: minimalTheme,
     gradient: gradientTheme,
@@ -535,9 +535,9 @@ export const getTheme = (preset: string): OnboardingTheme => {
 
 export const getPreset = (preset: string): PresetConfig => {
   const presets: Record<string, PresetConfig> = {
-    onepage: onepagePreset,
-    zaprecipe: zaprecipePreset,
-    pomodo: pomodoPreset,
+    image: imageStylePreset,
+    imageGradient: imageGradientPreset,
+    icon: iconStylePreset,
     modern: modernPreset,
     minimal: minimalPreset,
     gradient: gradientPreset,
@@ -558,15 +558,15 @@ export const mergeTheme = (base: OnboardingTheme, custom?: Partial<OnboardingThe
 };
 
 export default {
-  onepageTheme,
-  zaprecipeTheme,
-  pomodoTheme,
+  imageStyleTheme,
+  imageGradientTheme,
+  iconStyleTheme,
   modernTheme,
   minimalTheme,
   gradientTheme,
-  onepagePreset,
-  zaprecipePreset,
-  pomodoPreset,
+  imageStylePreset,
+  imageGradientPreset,
+  iconStylePreset,
   modernPreset,
   minimalPreset,
   gradientPreset,

package/src/types/index.ts

@@ -232,7 +232,7 @@ export interface NavigationButtonProps {
 // PRESET TYPES
 // ============================================================================
 
-export type OnboardingPreset = 'onepage' | 'zaprecipe' | 'pomodo' | 'modern' | 'minimal' | 'gradient';
+export type OnboardingPreset = 'image' | 'imageGradient' | 'icon' | 'modern' | 'minimal' | 'gradient';
 
 export interface PresetConfig {
   theme: OnboardingTheme;