@rubixscript/react-native-onboarding 1.0.0 → 1.1.0

package/dist/slides/IconSlide.js

@@ -0,0 +1,133 @@
+import React, { useMemo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import Animated, { 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';
+export const IconSlide = ({ 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 = {
+            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 = 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,
+            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/dist/slides/ImageSlide.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageSlide.d.ts","sourceRoot":"","sources":["../../src/slides/ImageSlide.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3D,UAAU,eAAe;IACvB,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAID,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAsFhD,CAAC;AA8BF,eAAe,UAAU,CAAC"}

package/dist/slides/ImageSlide.js

@@ -0,0 +1,99 @@
+import React, { useMemo } from 'react';
+import { View, Image, StyleSheet, Dimensions } from 'react-native';
+import Animated, { FadeIn, FadeInDown } from 'react-native-reanimated';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Ionicons } from '@expo/vector-icons';
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+export const ImageSlide = ({ data, theme, darkMode }) => {
+    const { image, title, description, imageResizeMode = 'cover', imageStyle, overlayIcon, gradientColors } = data;
+    const containerStyle = useMemo(() => {
+        const styles = {
+            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 = 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} 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;

package/dist/slides/VideoSlide.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"VideoSlide.d.ts","sourceRoot":"","sources":["../../src/slides/VideoSlide.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAKzD,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3D,UAAU,eAAe;IACvB,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAID,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA2GhD,CAAC;AAuBF,eAAe,UAAU,CAAC"}

package/dist/slides/VideoSlide.js

@@ -0,0 +1,101 @@
+import React, { useMemo, useState, useRef } from 'react';
+import { View, StyleSheet, Dimensions } from 'react-native';
+import { Video, ResizeMode } from 'expo-av';
+import Animated, { FadeIn, FadeInDown } from 'react-native-reanimated';
+import { LinearGradient } from 'expo-linear-gradient';
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+export const VideoSlide = ({ data, theme, darkMode }) => {
+    const { videoSource, title, description, autoPlay = true, loop = true, muted = true, poster, gradientColors } = data;
+    const videoRef = useRef(null);
+    const [isReady, setIsReady] = useState(false);
+    const handleVideoLoad = (status) => {
+        if (status.isLoaded) {
+            setIsReady(true);
+            if (autoPlay) {
+                videoRef.current?.playAsync();
+            }
+        }
+    };
+    const containerStyle = useMemo(() => {
+        const styles = {
+            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 videoContainerStyle = useMemo(() => ({
+        ...styles.videoContainer,
+        marginBottom: theme.spacing.lg,
+    }), [theme]);
+    const videoStyle = {
+        width: SCREEN_WIDTH - theme.spacing.xl * 2,
+        height: (SCREEN_WIDTH - theme.spacing.xl * 2) * (9 / 16),
+        borderRadius: theme.borderRadius.lg,
+    };
+    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 videoSourceUri = typeof videoSource === 'string' ? { uri: videoSource } : videoSource;
+    const content = (<>
+      {/* Video */}
+      <Animated.View entering={FadeIn.duration(400)} style={videoContainerStyle}>
+        <View style={videoStyle}>
+          <Video ref={videoRef} source={videoSourceUri} style={StyleSheet.absoluteFillObject} useNativeControls={false} resizeMode={ResizeMode.CONTAIN} shouldPlay={autoPlay} isLooping={loop} isMuted={muted} onLoad={handleVideoLoad}/>
+          {!isReady && poster && (<Animated.Image source={poster} style={StyleSheet.absoluteFillObject} resizeMode="cover"/>)}
+        </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({
+    videoContainer: {
+        width: '100%',
+        alignItems: 'center',
+        overflow: 'hidden',
+    },
+    title: {
+        fontSize: 28,
+        fontWeight: '700',
+        textAlign: 'center',
+        marginBottom: 12,
+        paddingHorizontal: 20,
+    },
+    description: {
+        fontSize: 15,
+        textAlign: 'center',
+        paddingHorizontal: 32,
+        lineHeight: 22,
+    },
+});
+export default VideoSlide;

package/dist/slides/index.d.ts

@@ -0,0 +1,14 @@
+export { ImageSlide } from './ImageSlide';
+export { IconSlide } from './IconSlide';
+export { FormSlide } from './FormSlide';
+export { VideoSlide } from './VideoSlide';
+import { SlideData, OnboardingTheme } from '../types';
+interface SlideRendererProps {
+    data: SlideData;
+    theme: OnboardingTheme;
+    darkMode?: boolean;
+    onSubmit?: (data: Record<string, any>) => void;
+    isSubmitting?: boolean;
+}
+export declare const SlideRenderer: React.FC<SlideRendererProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/slides/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM1C,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEtD,UAAU,kBAAkB;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgBtD,CAAC"}

package/dist/slides/index.js

@@ -0,0 +1,25 @@
+export { ImageSlide } from './ImageSlide';
+export { IconSlide } from './IconSlide';
+export { FormSlide } from './FormSlide';
+export { VideoSlide } from './VideoSlide';
+import { ImageSlide } from './ImageSlide';
+import { IconSlide } from './IconSlide';
+import { FormSlide } from './FormSlide';
+import { VideoSlide } from './VideoSlide';
+export const SlideRenderer = ({ data, theme, darkMode, onSubmit, isSubmitting }) => {
+    switch (data.type) {
+        case 'image':
+            return <ImageSlide data={data} theme={theme} darkMode={darkMode}/>;
+        case 'icon':
+            return <IconSlide data={data} theme={theme} darkMode={darkMode}/>;
+        case 'form':
+            return <FormSlide data={data} theme={theme} onSubmit={onSubmit || (() => { })} darkMode={darkMode} isSubmitting={isSubmitting}/>;
+        case 'video':
+            return <VideoSlide data={data} theme={theme} darkMode={darkMode}/>;
+        case 'custom':
+            const CustomComponent = data.component;
+            return <CustomComponent {...data.props} theme={theme} darkMode={darkMode}/>;
+        default:
+            return null;
+    }
+};

package/dist/themes/index.d.ts

@@ -0,0 +1,35 @@
+import { OnboardingTheme, PresetConfig } from '../types';
+export declare const onepageTheme: OnboardingTheme;
+export declare const onepagePreset: PresetConfig;
+export declare const zaprecipeTheme: OnboardingTheme;
+export declare const zaprecipePreset: PresetConfig;
+export declare const pomodoTheme: OnboardingTheme;
+export declare const pomodoPreset: PresetConfig;
+export declare const modernTheme: OnboardingTheme;
+export declare const modernPreset: PresetConfig;
+export declare const minimalTheme: OnboardingTheme;
+export declare const minimalPreset: PresetConfig;
+export declare const gradientTheme: OnboardingTheme;
+export declare const gradientPreset: PresetConfig;
+export declare const getTheme: (preset: string) => OnboardingTheme;
+export declare const getPreset: (preset: string) => PresetConfig;
+export declare const mergeTheme: (base: OnboardingTheme, custom?: Partial<OnboardingTheme>) => OnboardingTheme;
+declare const _default: {
+    onepageTheme: OnboardingTheme;
+    zaprecipeTheme: OnboardingTheme;
+    pomodoTheme: OnboardingTheme;
+    modernTheme: OnboardingTheme;
+    minimalTheme: OnboardingTheme;
+    gradientTheme: OnboardingTheme;
+    onepagePreset: PresetConfig;
+    zaprecipePreset: PresetConfig;
+    pomodoPreset: PresetConfig;
+    modernPreset: PresetConfig;
+    minimalPreset: PresetConfig;
+    gradientPreset: PresetConfig;
+    getTheme: (preset: string) => OnboardingTheme;
+    getPreset: (preset: string) => PresetConfig;
+    mergeTheme: (base: OnboardingTheme, custom?: Partial<OnboardingTheme>) => OnboardingTheme;
+};
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/dist/themes/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/themes/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAsEzD,eAAO,MAAM,YAAY,EAAE,eAuC1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,YAmC3B,CAAC;AAMF,eAAO,MAAM,cAAc,EAAE,eAuC5B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,YAmC7B,CAAC;AAMF,eAAO,MAAM,WAAW,EAAE,eAkCzB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,YAsC1B,CAAC;AAMF,eAAO,MAAM,WAAW,EAAE,eAkCzB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,YA2B1B,CAAC;AAMF,eAAO,MAAM,YAAY,EAAE,eAiC1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,YA0B3B,CAAC;AAMF,eAAO,MAAM,aAAa,EAAE,eAkC3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,YA8B5B,CAAC;AAMF,eAAO,MAAM,QAAQ,GAAI,QAAQ,MAAM,KAAG,eAUzC,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,QAAQ,MAAM,KAAG,YAU1C,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,MAAM,eAAe,EAAE,SAAS,OAAO,CAAC,eAAe,CAAC,KAAG,eAUrF,CAAC;;;;;;;;;;;;;;uBAlC+B,MAAM,KAAG,eAAe;wBAYvB,MAAM,KAAG,YAAY;uBAYtB,eAAe,WAAW,OAAO,CAAC,eAAe,CAAC,KAAG,eAAe;;AAYrG,wBAgBE"}