@rubixscript/react-native-onboarding 1.0.0

package/src/slides/FormSlide.tsx

@@ -0,0 +1,314 @@
+import React, { useMemo, useState } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  StyleSheet,
+  ScrollView,
+  KeyboardAvoidingView,
+  Platform,
+  ViewStyle,
+} from 'react-native';
+import Animated, { FadeIn } from 'react-native-reanimated';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Ionicons } from '@expo/vector-icons';
+import { FormSlideData, OnboardingTheme, FormFieldConfig } from '../types';
+
+interface FormSlideProps {
+  data: FormSlideData;
+  theme: OnboardingTheme;
+  onSubmit: (formData: Record<string, any>) => void;
+  darkMode?: boolean;
+  isSubmitting?: boolean;
+}
+
+export const FormSlide: React.FC<FormSlideProps> = ({
+  data,
+  theme,
+  onSubmit,
+  darkMode,
+  isSubmitting = false,
+}) => {
+  const { title, description, fields, submitLabel = 'Get Started', gradientColors } = data;
+  const [formData, setFormData] = useState<Record<string, any>>({});
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  const containerStyle = useMemo(() => {
+    const styles: any = {
+      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: string, value: any) => {
+    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 = (): boolean => {
+    const newErrors: Record<string, string> = {};
+
+    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: FormFieldConfig) => {
+    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 as any}
+                    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/src/slides/IconSlide.tsx

@@ -0,0 +1,166 @@
+import React, { useMemo } from 'react';
+import { View, Text, StyleSheet, ViewStyle } from 'react-native';
+import Animated, { FadeIn, FadeInDown, withSpring, useSharedValue, useAnimatedStyle, withDelay } from 'react-native-reanimated';
+import { Ionicons, MaterialIcons, MaterialCommunityIcons, FontAwesome, Octicons, Feather } from '@expo/vector-icons';
+import { LinearGradient } from 'expo-linear-gradient';
+import { IconSlideData, OnboardingTheme } from '../types';
+
+interface IconSlideProps {
+  data: IconSlideData;
+  theme: OnboardingTheme;
+  darkMode?: boolean;
+}
+
+export const IconSlide: React.FC<IconSlideProps> = ({ data, theme, darkMode }) => {
+  const { icon, title, description, subtitle, gradientColors } = data;
+
+  const scale = useSharedValue(0);
+  const rotate = useSharedValue(0);
+
+  React.useEffect(() => {
+    scale.value = withSpring(1, { damping: 15, stiffness: 150 });
+    rotate.value = withDelay(200, withSpring(0, { damping: 20, stiffness: 100 }));
+  }, []);
+
+  const iconAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      { scale: scale.value },
+      { rotate: `${rotate.value}deg` },
+    ],
+  }));
+
+  const containerStyle = useMemo(() => {
+    const styles: any = {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      padding: theme.spacing.lg,
+    };
+
+    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 iconContainerStyle: ViewStyle = useMemo(() => ({
+    width: icon.backgroundSize || 160,
+    height: icon.backgroundSize || 160,
+    borderRadius: (icon.backgroundSize || 160) / 2,
+    backgroundColor: icon.backgroundColor || theme.colors.primary,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: theme.spacing.lg,
+  }), [icon, theme]);
+
+  const renderIcon = () => {
+    const iconProps = {
+      name: icon.name as any,
+      size: icon.size || 64,
+      color: icon.color || theme.colors.text.inverse,
+    };
+
+    switch (icon.type) {
+      case 'material':
+        return <MaterialIcons {...iconProps} />;
+      case 'material-community':
+        return <MaterialCommunityIcons {...iconProps} />;
+      case 'font-awesome':
+        return <FontAwesome {...iconProps} />;
+      case 'octicons':
+        return <Octicons {...iconProps} />;
+      case 'feather':
+        return <Feather {...iconProps} />;
+      case 'ionicons':
+      default:
+        return <Ionicons {...iconProps} />;
+    }
+  };
+
+  const titleStyle = useMemo(() => ({
+    ...styles.title,
+    color: gradientColors?.length ? theme.colors.text.primary : theme.colors.text.primary,
+  }), [gradientColors, theme]);
+
+  const subtitleStyle = useMemo(() => ({
+    ...styles.subtitle,
+    color: gradientColors?.length ? theme.colors.text.secondary : theme.colors.text.secondary,
+  }), [gradientColors, theme]);
+
+  const descriptionStyle = useMemo(() => ({
+    ...styles.description,
+    color: gradientColors?.length ? theme.colors.text.secondary : theme.colors.text.secondary,
+  }), [gradientColors, theme]);
+
+  const content = (
+    <>
+      {/* Icon */}
+      <Animated.View style={iconAnimatedStyle}>
+        <View style={iconContainerStyle}>
+          {renderIcon()}
+        </View>
+      </Animated.View>
+
+      {/* Title */}
+      {title && (
+        <Animated.Text entering={FadeInDown.delay(100).springify()} style={titleStyle}>
+          {title}
+        </Animated.Text>
+      )}
+
+      {/* Subtitle */}
+      {subtitle && (
+        <Animated.Text entering={FadeInDown.delay(200).springify()} style={subtitleStyle}>
+          {subtitle}
+        </Animated.Text>
+      )}
+
+      {/* Description */}
+      {description && (
+        <Animated.Text entering={FadeInDown.delay(300).springify()} style={descriptionStyle}>
+          {description}
+        </Animated.Text>
+      )}
+    </>
+  );
+
+  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({
+  title: {
+    fontSize: 24,
+    fontWeight: '700',
+    textAlign: 'center',
+    marginBottom: 8,
+    paddingHorizontal: 20,
+  },
+  subtitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    textAlign: 'center',
+    marginBottom: 12,
+    paddingHorizontal: 20,
+  },
+  description: {
+    fontSize: 15,
+    textAlign: 'center',
+    paddingHorizontal: 32,
+    lineHeight: 22,
+  },
+});
+
+export default IconSlide;

package/src/slides/ImageSlide.tsx

@@ -0,0 +1,132 @@
+import React, { useMemo } from 'react';
+import { View, Text, Image, StyleSheet, ImageStyle, Dimensions } from 'react-native';
+import Animated, { FadeIn, FadeInDown } from 'react-native-reanimated';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Ionicons } from '@expo/vector-icons';
+import { ImageSlideData, OnboardingTheme } from '../types';
+
+interface ImageSlideProps {
+  data: ImageSlideData;
+  theme: OnboardingTheme;
+  darkMode?: boolean;
+}
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
+export const ImageSlide: React.FC<ImageSlideProps> = ({ data, theme, darkMode }) => {
+  const { image, title, description, imageResizeMode = 'cover', imageStyle, overlayIcon, gradientColors } = data;
+
+  const containerStyle = useMemo(() => {
+    const styles: any = {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      padding: theme.spacing.lg,
+    };
+
+    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 imageContainerStyle = useMemo(() => ({
+    ...styles.imageContainer,
+    marginBottom: theme.spacing.lg,
+  }), [theme]);
+
+  const baseImageStyle: ImageStyle = useMemo(() => ({
+    width: SCREEN_WIDTH - theme.spacing.xl * 2,
+    height: 280,
+    borderRadius: theme.borderRadius.lg,
+    resizeMode: imageResizeMode,
+    ...imageStyle,
+  }), [theme, imageResizeMode, imageStyle]);
+
+  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 = (
+    <>
+      {/* Image with optional overlay icon */}
+      <Animated.View entering={FadeIn.duration(400).springify()} style={imageContainerStyle}>
+        <Image source={image} style={baseImageStyle} />
+        {overlayIcon && (
+          <View style={styles.overlayIcon}>
+            <Ionicons
+              name={overlayIcon.name as any}
+              size={overlayIcon.size || 48}
+              color={overlayIcon.color || '#FFFFFF'}
+            />
+          </View>
+        )}
+      </Animated.View>
+
+      {/* Title */}
+      {title && (
+        <Animated.Text entering={FadeInDown.delay(100).springify()} style={titleStyle}>
+          {title}
+        </Animated.Text>
+      )}
+
+      {/* Description */}
+      {description && (
+        <Animated.Text entering={FadeInDown.delay(200).springify()} style={descriptionStyle}>
+          {description}
+        </Animated.Text>
+      )}
+    </>
+  );
+
+  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({
+  imageContainer: {
+    width: '100%',
+    alignItems: 'center',
+  },
+  overlayIcon: {
+    position: 'absolute',
+    top: 20,
+    right: 20,
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    borderRadius: 20,
+    padding: 8,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: '700',
+    textAlign: 'center',
+    marginBottom: 12,
+    paddingHorizontal: 20,
+  },
+  description: {
+    fontSize: 15,
+    textAlign: 'center',
+    paddingHorizontal: 32,
+    lineHeight: 22,
+  },
+});
+
+export default ImageSlide;