@rubixscript/react-native-onboarding 1.0.0 → 1.1.0

package/dist/presets/index.js

@@ -0,0 +1,370 @@
+// ============================================================================
+// ONEPAGE PRESET SLIDES
+// ============================================================================
+export const onepageSlides = [
+    {
+        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'],
+    },
+];
+// ============================================================================
+// ZAPRECIPE PRESET SLIDES
+// ============================================================================
+export const zaprecipeSlides = [
+    {
+        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
+// ============================================================================
+export const pomodoSlides = [
+    {
+        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',
+    },
+];
+// ============================================================================
+// MODERN PRESET SLIDES
+// ============================================================================
+export const modernSlides = [
+    {
+        id: 'welcome',
+        type: 'icon',
+        title: 'Welcome Aboard',
+        description: 'Get started with an amazing experience tailored just for you.',
+        icon: {
+            name: 'rocket',
+            type: 'ionicons',
+            size: 72,
+            color: '#FFFFFF',
+            backgroundColor: '#8B5CF6',
+            backgroundSize: 180,
+        },
+    },
+    {
+        id: 'features',
+        type: 'icon',
+        title: 'Powerful Features',
+        description: 'Discover tools and features designed to help you achieve more.',
+        icon: {
+            name: 'apps',
+            type: 'ionicons',
+            size: 72,
+            color: '#FFFFFF',
+            backgroundColor: '#EC4899',
+            backgroundSize: 180,
+        },
+    },
+    {
+        id: 'ready',
+        type: 'icon',
+        title: 'Ready to Go?',
+        description: 'Let\'s set up your account and get started on your journey.',
+        icon: {
+            name: 'checkmark-done',
+            type: 'ionicons',
+            size: 72,
+            color: '#FFFFFF',
+            backgroundColor: '#10B981',
+            backgroundSize: 180,
+        },
+    },
+];
+// ============================================================================
+// MINIMAL PRESET SLIDES
+// ============================================================================
+export const minimalSlides = [
+    {
+        id: 'one',
+        type: 'icon',
+        title: 'Simple',
+        description: 'Clean and intuitive interface that\'s easy to use.',
+        icon: {
+            name: 'remove',
+            type: 'ionicons',
+            size: 48,
+            color: '#111827',
+            backgroundColor: '#F3F4F6',
+            backgroundSize: 120,
+        },
+    },
+    {
+        id: 'two',
+        type: 'icon',
+        title: 'Fast',
+        description: 'Lightning quick performance for a smooth experience.',
+        icon: {
+            name: 'flash',
+            type: 'ionicons',
+            size: 48,
+            color: '#111827',
+            backgroundColor: '#F3F4F6',
+            backgroundSize: 120,
+        },
+    },
+    {
+        id: 'three',
+        type: 'icon',
+        title: 'Yours',
+        description: 'Personalized to fit your needs perfectly.',
+        icon: {
+            name: 'person',
+            type: 'ionicons',
+            size: 48,
+            color: '#111827',
+            backgroundColor: '#F3F4F6',
+            backgroundSize: 120,
+        },
+    },
+];
+// ============================================================================
+// GRADIENT PRESET SLIDES
+// ============================================================================
+export const gradientSlides = [
+    {
+        id: 'discover',
+        type: 'image',
+        title: 'Discover',
+        description: 'Explore new possibilities and unlock your potential.',
+        image: require('../../assets/images/onboarding/gradient1.jpg'),
+        gradientColors: ['#667EEA', '#764BA2'],
+    },
+    {
+        id: 'create',
+        type: 'image',
+        title: 'Create',
+        description: 'Build something amazing with powerful tools at your fingertips.',
+        image: require('../../assets/images/onboarding/gradient2.jpg'),
+        gradientColors: ['#f093fb', '#f5576c'],
+    },
+    {
+        id: 'share',
+        type: 'image',
+        title: 'Share',
+        description: 'Connect with others and share your journey.',
+        image: require('../../assets/images/onboarding/gradient3.jpg'),
+        gradientColors: ['#4facfe', '#00f2fe'],
+    },
+];
+// ============================================================================
+// PRESET CONFIGURATIONS
+// ============================================================================
+export const getPresetSlides = (preset) => {
+    const slidesMap = {
+        onepage: onepageSlides,
+        zaprecipe: zaprecipeSlides,
+        pomodo: pomodoSlides,
+        modern: modernSlides,
+        minimal: minimalSlides,
+        gradient: gradientSlides,
+    };
+    return slidesMap[preset] || modernSlides;
+};
+export const getPresetConfig = (preset) => {
+    return {
+        slides: getPresetSlides(preset),
+        // Theme and navigation presets are applied via theme prop
+    };
+};
+// ============================================================================
+// QUICK START CONFIGS
+// ============================================================================
+export const onepageConfig = {
+    slides: onepageSlides,
+    storage: { key: '@1page:onboarding_complete', enabled: true },
+};
+export const zaprecipeConfig = {
+    slides: zaprecipeSlides,
+    storage: { key: '@zaprecipe:onboarding_complete', enabled: true },
+};
+export const pomodoConfig = {
+    slides: pomodoSlides,
+    storage: { key: '@pomodo:onboarding_complete', enabled: true },
+    navigation: { showSkip: false },
+};
+export default {
+    onepageSlides,
+    zaprecipeSlides,
+    pomodoSlides,
+    modernSlides,
+    minimalSlides,
+    gradientSlides,
+    getPresetSlides,
+    getPresetConfig,
+    onepageConfig,
+    zaprecipeConfig,
+    pomodoConfig,
+};

package/dist/slides/FormSlide.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { FormSlideData, OnboardingTheme } from '../types';
+interface FormSlideProps {
+    data: FormSlideData;
+    theme: OnboardingTheme;
+    onSubmit: (formData: Record<string, any>) => void;
+    darkMode?: boolean;
+    isSubmitting?: boolean;
+}
+export declare const FormSlide: React.FC<FormSlideProps>;
+export default FormSlide;
+//# sourceMappingURL=FormSlide.d.ts.map

package/dist/slides/FormSlide.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSlide.d.ts","sourceRoot":"","sources":["../../src/slides/FormSlide.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAejD,OAAO,EAAE,aAAa,EAAE,eAAe,EAAmB,MAAM,UAAU,CAAC;AAE3E,UAAU,cAAc;IACtB,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA+L9C,CAAC;AAiGF,eAAe,SAAS,CAAC"}

package/dist/slides/FormSlide.js

@@ -0,0 +1,227 @@
+import React, { useMemo, useState } from 'react';
+import { View, Text, TextInput, TouchableOpacity, StyleSheet, ScrollView, KeyboardAvoidingView, Platform, } from 'react-native';
+import Animated, { FadeIn } from 'react-native-reanimated';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Ionicons } from '@expo/vector-icons';
+export const FormSlide = ({ data, theme, onSubmit, darkMode, isSubmitting = false, }) => {
+    const { title, description, fields, submitLabel = 'Get Started', gradientColors } = data;
+    const [formData, setFormData] = useState({});
+    const [errors, setErrors] = useState({});
+    const containerStyle = useMemo(() => {
+        const styles = {
+            flex: 1,
+        };
+        if (data.backgroundColor) {
+            styles.backgroundColor = data.backgroundColor;
+        }
+        else if (gradientColors && gradientColors.length > 0) {
+            // Will use LinearGradient
+        }
+        else {
+            styles.backgroundColor = theme.colors.background;
+        }
+        return styles;
+    }, [data, theme]);
+    const updateField = (key, value) => {
+        setFormData(prev => ({ ...prev, [key]: value }));
+        // Clear error when user starts typing
+        if (errors[key]) {
+            setErrors(prev => {
+                const newErrors = { ...prev };
+                delete newErrors[key];
+                return newErrors;
+            });
+        }
+    };
+    const validateForm = () => {
+        const newErrors = {};
+        fields.forEach(field => {
+            if (field.required && !formData[field.key]) {
+                newErrors[field.key] = `${field.label} is required`;
+            }
+            else if (field.validation && formData[field.key]) {
+                const validationResult = field.validation(formData[field.key]);
+                if (typeof validationResult === 'string') {
+                    newErrors[field.key] = validationResult;
+                }
+                else if (!validationResult) {
+                    newErrors[field.key] = `${field.label} is invalid`;
+                }
+            }
+        });
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    };
+    const handleSubmit = () => {
+        if (validateForm()) {
+            onSubmit(formData);
+        }
+    };
+    const renderField = (field) => {
+        const value = formData[field.key];
+        const error = errors[field.key];
+        if (field.type === 'select') {
+            return (<View key={field.key} style={styles.fieldContainer}>
+          <Text style={styles.label}>{field.label}</Text>
+          <View style={styles.optionsContainer}>
+            {field.options?.map(option => (<TouchableOpacity key={option.value} style={[
+                        styles.optionCard,
+                        value === option.value && styles.optionCardActive,
+                        { borderColor: theme.colors.border },
+                    ]} onPress={() => updateField(field.key, option.value)}>
+                {option.icon && (<Ionicons name={option.icon} size={20} color={value === option.value ? theme.colors.text.inverse : theme.colors.text.secondary} style={{ marginRight: 8 }}/>)}
+                <Text style={[
+                        styles.optionLabel,
+                        value === option.value && { color: theme.colors.text.inverse },
+                    ]}>
+                  {option.label}
+                </Text>
+              </TouchableOpacity>))}
+          </View>
+          {error && <Text style={styles.errorText}>{error}</Text>}
+        </View>);
+        }
+        return (<View key={field.key} style={styles.fieldContainer}>
+        <Text style={styles.label}>{field.label}</Text>
+        <TextInput style={[
+                styles.input,
+                { borderColor: error ? theme.colors.text.secondary : theme.colors.border },
+            ]} placeholder={field.placeholder} placeholderTextColor={theme.colors.text.secondary} value={value} onChangeText={text => updateField(field.key, text)} keyboardType={field.type === 'number' ? 'numeric' : field.type === 'email' ? 'email-address' : 'default'} secureTextEntry={field.type === 'password'} multiline={field.multiline} numberOfLines={field.numberOfLines}/>
+        {error && <Text style={styles.errorText}>{error}</Text>}
+      </View>);
+    };
+    const headerStyle = useMemo(() => ({
+        ...styles.header,
+        backgroundColor: 'transparent',
+    }), []);
+    const titleStyle = useMemo(() => ({
+        ...styles.title,
+        color: gradientColors?.length ? theme.colors.text.primary : theme.colors.text.primary,
+    }), [gradientColors, theme]);
+    const descriptionStyle = useMemo(() => ({
+        ...styles.description,
+        color: gradientColors?.length ? theme.colors.text.secondary : theme.colors.text.secondary,
+    }), [gradientColors, theme]);
+    const content = (<KeyboardAvoidingView style={styles.keyboardContainer} behavior={Platform.OS === 'ios' ? 'padding' : 'height'} keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 20}>
+      <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
+        {/* Header */}
+        <Animated.View entering={FadeIn.duration(300)} style={headerStyle}>
+          {title && <Text style={titleStyle}>{title}</Text>}
+          {description && <Text style={descriptionStyle}>{description}</Text>}
+        </Animated.View>
+
+        {/* Form Fields */}
+        <View style={styles.formContainer}>
+          {fields.map(renderField)}
+        </View>
+
+        {/* Submit Button */}
+        <Animated.View entering={FadeIn.delay(300).duration(300)} style={styles.buttonContainer}>
+          <TouchableOpacity style={[styles.submitButton, { backgroundColor: theme.colors.primary }]} onPress={handleSubmit} disabled={isSubmitting} activeOpacity={0.8}>
+            <Text style={styles.submitButtonText}>{isSubmitting ? 'Submitting...' : submitLabel}</Text>
+          </TouchableOpacity>
+        </Animated.View>
+      </ScrollView>
+    </KeyboardAvoidingView>);
+    if (gradientColors && gradientColors.length > 0) {
+        return (<LinearGradient colors={gradientColors} style={StyleSheet.absoluteFillObject}>
+        <View style={containerStyle}>{content}</View>
+      </LinearGradient>);
+    }
+    return <View style={containerStyle}>{content}</View>;
+};
+const styles = StyleSheet.create({
+    keyboardContainer: {
+        flex: 1,
+    },
+    scrollView: {
+        flex: 1,
+    },
+    scrollContent: {
+        padding: 24,
+        paddingBottom: 40,
+    },
+    header: {
+        marginBottom: 32,
+        alignItems: 'center',
+    },
+    title: {
+        fontSize: 28,
+        fontWeight: '700',
+        textAlign: 'center',
+        marginBottom: 12,
+    },
+    description: {
+        fontSize: 15,
+        textAlign: 'center',
+        paddingHorizontal: 20,
+        lineHeight: 22,
+    },
+    formContainer: {
+        width: '100%',
+        gap: 20,
+    },
+    fieldContainer: {
+        width: '100%',
+    },
+    label: {
+        fontSize: 14,
+        fontWeight: '600',
+        marginBottom: 8,
+        marginLeft: 4,
+    },
+    input: {
+        borderWidth: 1.5,
+        borderRadius: 12,
+        paddingHorizontal: 16,
+        paddingVertical: 14,
+        fontSize: 16,
+        backgroundColor: 'rgba(255, 255, 255, 0.9)',
+    },
+    optionsContainer: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 12,
+    },
+    optionCard: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        borderRadius: 12,
+        borderWidth: 1.5,
+        backgroundColor: 'rgba(255, 255, 255, 0.9)',
+        minWidth: 100,
+    },
+    optionCardActive: {
+        backgroundColor: '#6B4EFF',
+        borderColor: '#6B4EFF',
+    },
+    optionLabel: {
+        fontSize: 14,
+        fontWeight: '500',
+    },
+    errorText: {
+        fontSize: 12,
+        color: '#EF4444',
+        marginTop: 4,
+        marginLeft: 4,
+    },
+    buttonContainer: {
+        marginTop: 24,
+        alignItems: 'center',
+    },
+    submitButton: {
+        paddingHorizontal: 48,
+        paddingVertical: 16,
+        borderRadius: 9999,
+        minWidth: 200,
+        alignItems: 'center',
+    },
+    submitButtonText: {
+        color: '#FFFFFF',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+});
+export default FormSlide;

package/dist/slides/IconSlide.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IconSlideData, OnboardingTheme } from '../types';
+interface IconSlideProps {
+    data: IconSlideData;
+    theme: OnboardingTheme;
+    darkMode?: boolean;
+}
+export declare const IconSlide: React.FC<IconSlideProps>;
+export default IconSlide;
+//# sourceMappingURL=IconSlide.d.ts.map

package/dist/slides/IconSlide.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconSlide.d.ts","sourceRoot":"","sources":["../../src/slides/IconSlide.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE1D,UAAU,cAAc;IACtB,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA+H9C,CAAC;AAyBF,eAAe,SAAS,CAAC"}