@rubixscript/react-native-onboarding 1.0.0 → 1.1.0

package/dist/components/SimpleOnboardingScreen.d.ts

@@ -0,0 +1,54 @@
+/**  METADATA
+ * @component SimpleOnboardingScreen
+ * @description A simple, beautiful onboarding screen with customizable slides, colors, and styling
+ *
+ * @props
+ * - onComplete: () => void - Handler called when onboarding is finished
+ * - slides: SimpleSlide[] - Array of slides to display (optional, has default)
+ * - primaryColor: string - Primary color for buttons and active dots (default: '#FF6B6B')
+ * - backgroundColor: string - Background color of the screen (default: '#F6F6F6')
+ * - iconBackgroundColor: string - Background color for icon container (default: 'rgba(255, 107, 107, 0.1)')
+ * - textColor: string - Color for titles (default: '#000000')
+ * - descriptionColor: string - Color for descriptions (default: '#666666')
+ * - buttonTextNext: string - Text for next button (default: 'Next')
+ * - buttonTextDone: string - Text for done button (default: 'Get Started')
+ * - testID?: string - Test identifier for testing
+ *
+ * @states
+ * - currentIndex: number - Current onboarding screen index
+ *
+ * @features
+ * - Step-by-step app introduction
+ * - Interactive animations
+ * - Feature highlights
+ * - Progress indication
+ * - Fully customizable styling
+ *
+ * @dependencies
+ * - react-native-reanimated: For animations
+ * - @expo/vector-icons: For UI icons
+ * - react-native components
+ */
+import React from 'react';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+export interface SimpleSlide {
+    id: string;
+    title: string;
+    description: string;
+    icon: keyof typeof MaterialCommunityIcons.glyphMap;
+}
+interface SimpleOnboardingScreenProps {
+    onComplete: () => Promise<void>;
+    slides?: SimpleSlide[];
+    primaryColor?: string;
+    backgroundColor?: string;
+    iconBackgroundColor?: string;
+    textColor?: string;
+    descriptionColor?: string;
+    buttonTextNext?: string;
+    buttonTextDone?: string;
+    testID?: string;
+}
+export default function SimpleOnboardingScreen({ onComplete, slides, primaryColor, backgroundColor, iconBackgroundColor, textColor, descriptionColor, buttonTextNext, buttonTextDone, testID, }: SimpleOnboardingScreenProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=SimpleOnboardingScreen.d.ts.map

package/dist/components/SimpleOnboardingScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleOnboardingScreen.d.ts","sourceRoot":"","sources":["../../src/components/SimpleOnboardingScreen.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,KAA2B,MAAM,OAAO,CAAC;AAahD,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAK5D,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,OAAO,sBAAsB,CAAC,QAAQ,CAAC;CACpD;AAuBD,UAAU,2BAA2B;IACnC,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAChC,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,UAAU,EACV,MAAsB,EACtB,YAAwB,EACxB,eAA2B,EAC3B,mBAAgD,EAChD,SAAqB,EACrB,gBAA4B,EAC5B,cAAuB,EACvB,cAA8B,EAC9B,MAAM,GACP,EAAE,2BAA2B,qBAuF7B"}

package/dist/components/SimpleOnboardingScreen.js

@@ -0,0 +1,184 @@
+/**  METADATA
+ * @component SimpleOnboardingScreen
+ * @description A simple, beautiful onboarding screen with customizable slides, colors, and styling
+ *
+ * @props
+ * - onComplete: () => void - Handler called when onboarding is finished
+ * - slides: SimpleSlide[] - Array of slides to display (optional, has default)
+ * - primaryColor: string - Primary color for buttons and active dots (default: '#FF6B6B')
+ * - backgroundColor: string - Background color of the screen (default: '#F6F6F6')
+ * - iconBackgroundColor: string - Background color for icon container (default: 'rgba(255, 107, 107, 0.1)')
+ * - textColor: string - Color for titles (default: '#000000')
+ * - descriptionColor: string - Color for descriptions (default: '#666666')
+ * - buttonTextNext: string - Text for next button (default: 'Next')
+ * - buttonTextDone: string - Text for done button (default: 'Get Started')
+ * - testID?: string - Test identifier for testing
+ *
+ * @states
+ * - currentIndex: number - Current onboarding screen index
+ *
+ * @features
+ * - Step-by-step app introduction
+ * - Interactive animations
+ * - Feature highlights
+ * - Progress indication
+ * - Fully customizable styling
+ *
+ * @dependencies
+ * - react-native-reanimated: For animations
+ * - @expo/vector-icons: For UI icons
+ * - react-native components
+ */
+import React, { useRef, useState } from 'react';
+import { View, Text, StyleSheet, Dimensions, TouchableOpacity, FlatList, Platform, StatusBar, } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { BlurView } from 'expo-blur';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import Animated, { FadeIn } from 'react-native-reanimated';
+const { width } = Dimensions.get('window');
+const defaultSlides = [
+    {
+        id: '1',
+        title: 'Focus Timer',
+        description: 'Stay productive with our Pomodoro timer. Work in focused intervals for better results.',
+        icon: 'timer-outline',
+    },
+    {
+        id: '2',
+        title: 'Task Management',
+        description: 'Organize your tasks efficiently. Track progress and set priorities with ease.',
+        icon: 'checkbox-marked-circle-outline',
+    },
+    {
+        id: '3',
+        title: 'Statistics',
+        description: 'Monitor your productivity with detailed statistics and insights.',
+        icon: 'chart-line',
+    },
+];
+export default function SimpleOnboardingScreen({ onComplete, slides = defaultSlides, primaryColor = '#FF6B6B', backgroundColor = '#F6F6F6', iconBackgroundColor = 'rgba(255, 107, 107, 0.1)', textColor = '#000000', descriptionColor = '#666666', buttonTextNext = 'Next', buttonTextDone = 'Get Started', testID, }) {
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const flatListRef = useRef(null);
+    const renderSlide = ({ item }) => (<View style={styles.slide}>
+      <Animated.View entering={FadeIn.duration(500)} style={[styles.iconContainer, { backgroundColor: iconBackgroundColor }]}>
+        <MaterialCommunityIcons name={item.icon} size={80} color={textColor}/>
+      </Animated.View>
+      <Text style={[styles.title, { color: textColor }]}>
+        {item.title}
+      </Text>
+      <Text style={[styles.description, { color: descriptionColor }]}>
+        {item.description}
+      </Text>
+    </View>);
+    const handleNext = () => {
+        if (currentIndex < slides.length - 1) {
+            flatListRef.current?.scrollToIndex({
+                index: currentIndex + 1,
+                animated: true,
+            });
+            setCurrentIndex(currentIndex + 1);
+        }
+        else {
+            onComplete();
+        }
+    };
+    return (<SafeAreaView testID={testID} style={[styles.container, { backgroundColor }]} edges={['top', 'bottom']}>
+      <StatusBar barStyle="dark-content" backgroundColor="transparent" translucent/>
+
+      <FlatList ref={flatListRef} data={slides} renderItem={renderSlide} horizontal pagingEnabled showsHorizontalScrollIndicator={false} onMomentumScrollEnd={(event) => {
+            const index = Math.round(event.nativeEvent.contentOffset.x / width);
+            setCurrentIndex(index);
+        }}/>
+
+      <BlurView intensity={80} tint="light" style={styles.footer}>
+        <View style={styles.pagination}>
+          {slides.map((_, index) => (<View key={index} style={[
+                styles.paginationDot,
+                index === currentIndex && styles.paginationDotActive,
+                index === currentIndex && { backgroundColor: primaryColor },
+            ]}/>))}
+        </View>
+
+        <TouchableOpacity style={[styles.button, { backgroundColor: primaryColor }]} onPress={handleNext}>
+          <Text style={styles.buttonText}>
+            {currentIndex === slides.length - 1 ? buttonTextDone : buttonTextNext}
+          </Text>
+        </TouchableOpacity>
+      </BlurView>
+    </SafeAreaView>);
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    slide: {
+        width,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 40,
+    },
+    iconContainer: {
+        width: 160,
+        height: 160,
+        borderRadius: 80,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 40,
+    },
+    title: {
+        fontSize: 28,
+        fontWeight: '700',
+        marginBottom: 16,
+        textAlign: 'center',
+    },
+    description: {
+        fontSize: 17,
+        textAlign: 'center',
+        lineHeight: 24,
+    },
+    footer: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        paddingHorizontal: 20,
+        paddingVertical: 20,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    pagination: {
+        flexDirection: 'row',
+        gap: 8,
+    },
+    paginationDot: {
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+        backgroundColor: 'rgba(0, 0, 0, 0.2)',
+    },
+    paginationDotActive: {
+        width: 20,
+    },
+    button: {
+        paddingHorizontal: 32,
+        paddingVertical: 16,
+        borderRadius: 24,
+        ...Platform.select({
+            ios: {
+                shadowColor: '#000',
+                shadowOffset: { width: 0, height: 8 },
+                shadowOpacity: 0.15,
+                shadowRadius: 12,
+            },
+            android: {
+                elevation: 8,
+            },
+        }),
+    },
+    buttonText: {
+        color: '#FFFFFF',
+        fontSize: 17,
+        fontWeight: '600',
+    },
+});

package/dist/components/index.d.ts

@@ -0,0 +1,7 @@
+export { Pagination } from './Pagination';
+export { NavigationButton, NavigationButtons } from './NavigationButtons';
+export { Onboarding, useOnboarding } from './Onboarding';
+export { default as SimpleOnboardingScreen } from './SimpleOnboardingScreen';
+export type { SimpleSlide } from './SimpleOnboardingScreen';
+export { default } from './Onboarding';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,YAAY,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAE5D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/index.js

@@ -0,0 +1,5 @@
+export { Pagination } from './Pagination';
+export { NavigationButton, NavigationButtons } from './NavigationButtons';
+export { Onboarding, useOnboarding } from './Onboarding';
+export { default as SimpleOnboardingScreen } from './SimpleOnboardingScreen';
+export { default } from './Onboarding';

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { Onboarding, useOnboarding } from './components/Onboarding';
+export { SimpleOnboardingScreen } from './components';
+export type { SimpleSlide } from './components';
+export { ImageSlide, IconSlide, FormSlide, VideoSlide, SlideRenderer, } from './slides';
+export { Pagination, NavigationButton, NavigationButtons, } from './components';
+export { onepageTheme, zaprecipeTheme, pomodoTheme, modernTheme, minimalTheme, gradientTheme, onepagePreset, zaprecipePreset, pomodoPreset, modernPreset, minimalPreset, gradientPreset, getTheme, getPreset, mergeTheme, } from './themes';
+export type { SlideType, BaseSlideData, ImageSlideData, IconSlideData, FormSlideData, VideoSlideData, CustomSlideData, SlideData, OnboardingTheme, NavigationStyle, NavigationConfig, AnimationType, AnimationConfig, StorageConfig, OnboardingConfig, OnboardingProps, FormSlideCustomProps, PaginationProps, NavigationButtonProps, OnboardingPreset, PresetConfig, } from './types';
+export { default } from './components/Onboarding';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAGpE,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,YAAY,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGhD,OAAO,EACL,UAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,aAAa,GACd,MAAM,UAAU,CAAC;AAGlB,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,cAAc,CAAC;AAGtB,OAAO,EACL,YAAY,EACZ,cAAc,EACd,WAAW,EACX,WAAW,EACX,YAAY,EACZ,aAAa,EACb,aAAa,EACb,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,cAAc,EACd,QAAQ,EACR,SAAS,EACT,UAAU,GACX,MAAM,UAAU,CAAC;AAGlB,YAAY,EACV,SAAS,EACT,aAAa,EACb,cAAc,EACd,aAAa,EACb,aAAa,EACb,cAAc,EACd,eAAe,EACf,SAAS,EACT,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,oBAAoB,EACpB,eAAe,EACf,qBAAqB,EACrB,gBAAgB,EAChB,YAAY,GACb,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/index.js

@@ -0,0 +1,12 @@
+// Main Component
+export { Onboarding, useOnboarding } from './components/Onboarding';
+// Simple Onboarding Screen - A simple, customizable onboarding component
+export { SimpleOnboardingScreen } from './components';
+// Slide Components
+export { ImageSlide, IconSlide, FormSlide, VideoSlide, SlideRenderer, } from './slides';
+// UI Components
+export { Pagination, NavigationButton, NavigationButtons, } from './components';
+// Themes & Presets
+export { onepageTheme, zaprecipeTheme, pomodoTheme, modernTheme, minimalTheme, gradientTheme, onepagePreset, zaprecipePreset, pomodoPreset, modernPreset, minimalPreset, gradientPreset, getTheme, getPreset, mergeTheme, } from './themes';
+// Default export
+export { default } from './components/Onboarding';

package/dist/presets/index.d.ts

@@ -0,0 +1,27 @@
+import { SlideData, OnboardingConfig } from '../types';
+export declare const onepageSlides: SlideData[];
+export declare const zaprecipeSlides: SlideData[];
+export declare const pomodoSlides: SlideData[];
+export declare const modernSlides: SlideData[];
+export declare const minimalSlides: SlideData[];
+export declare const gradientSlides: SlideData[];
+export declare const getPresetSlides: (preset: string) => SlideData[];
+export declare const getPresetConfig: (preset: string) => Partial<OnboardingConfig>;
+export declare const onepageConfig: OnboardingConfig;
+export declare const zaprecipeConfig: OnboardingConfig;
+export declare const pomodoConfig: OnboardingConfig;
+declare const _default: {
+    onepageSlides: SlideData[];
+    zaprecipeSlides: SlideData[];
+    pomodoSlides: SlideData[];
+    modernSlides: SlideData[];
+    minimalSlides: SlideData[];
+    gradientSlides: SlideData[];
+    getPresetSlides: (preset: string) => SlideData[];
+    getPresetConfig: (preset: string) => Partial<OnboardingConfig>;
+    onepageConfig: OnboardingConfig;
+    zaprecipeConfig: OnboardingConfig;
+    pomodoConfig: OnboardingConfig;
+};
+export default _default;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/presets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAMvD,eAAO,MAAM,aAAa,EAAE,SAAS,EAuEpC,CAAC;AAMF,eAAO,MAAM,eAAe,EAAE,SAAS,EAqEtC,CAAC;AAMF,eAAO,MAAM,YAAY,EAAE,SAAS,EA8CnC,CAAC;AAMF,eAAO,MAAM,YAAY,EAAE,SAAS,EA2CnC,CAAC;AAMF,eAAO,MAAM,aAAa,EAAE,SAAS,EA2CpC,CAAC;AAMF,eAAO,MAAM,cAAc,EAAE,SAAS,EAyBrC,CAAC;AAMF,eAAO,MAAM,eAAe,GAAI,QAAQ,MAAM,KAAG,SAAS,EAUzD,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,QAAQ,MAAM,KAAG,OAAO,CAAC,gBAAgB,CAKxE,CAAC;AAMF,eAAO,MAAM,aAAa,EAAE,gBAG3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,gBAG7B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,gBAI1B,CAAC;;;;;;;;8BArCsC,MAAM,KAAG,SAAS,EAAE;8BAYpB,MAAM,KAAG,OAAO,CAAC,gBAAgB,CAAC;;;;;AA2B1E,wBAYE"}