@rocapine/react-native-onboarding-ui 1.0.0

package/src/UI/Components/ProgressBar.tsx

@@ -0,0 +1,143 @@
+import React, { useEffect } from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+} from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ChevronLeft } from "lucide-react-native";
+import { useRouter } from "expo-router";
+import { defaultTheme, Theme } from "../Theme";
+
+interface ProgressBarProps {
+  backgroundColor?: string;
+  progressColor?: string;
+  progressPercentage: number;
+  theme?: Theme;
+  isProgressBarVisible?: boolean
+}
+
+export const ProgressBar: React.FC<ProgressBarProps> = ({
+  backgroundColor,
+  progressColor,
+  progressPercentage = 0,
+  theme = defaultTheme,
+  isProgressBarVisible = true,
+}) => {
+  const animated = true;
+  const router = useRouter();
+  const { top } = useSafeAreaInsets();
+
+  const height = 12
+  // Use Reanimated shared value for smooth animations
+  const progress = useSharedValue(0);
+
+  useEffect(() => {
+    if (animated) {
+      progress.value = withTiming(progressPercentage, {
+        duration: 300,
+      });
+    } else {
+      progress.value = progressPercentage;
+    }
+  }, [progressPercentage, animated]);
+
+  // Animated style for the progress bar
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      width: `${progress.value}%`,
+    };
+  });
+
+  // Use theme colors with fallback to props
+  const trackBgColor = backgroundColor || theme.colors.neutral.lower;
+  const barColor = progressColor || theme.colors.primary;
+
+  return (
+    isProgressBarVisible && (
+      <View style={[styles.container, { paddingTop: top }]}>
+        <View style={styles.progressBarContainer}>
+          {/* Left section: Back button */}
+          <View style={styles.backButtonSection}>
+            {router.canGoBack() && (
+              <TouchableOpacity
+                onPress={() => router.back()}
+                hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                style={styles.backButton}
+              >
+                <ChevronLeft
+                  size={24}
+                  color={theme.colors.text.primary}
+                  strokeWidth={2}
+                />
+              </TouchableOpacity>
+            )}
+          </View>
+
+          {/* Center section: Progress bar */}
+          <View style={styles.progressSection}>
+            <View
+              style={[styles.track, { height, backgroundColor: trackBgColor }]}
+            >
+              <Animated.View
+                style={[
+                  styles.progress,
+                  {
+                    height,
+                    backgroundColor: barColor,
+                  },
+                  animatedStyle,
+                ]}
+              />
+            </View>
+          </View>
+
+          {/* Right section: Spacer */}
+          <View style={styles.spacerSection} />
+        </View>
+      </View>
+    )
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 10,
+    justifyContent: "center",
+    paddingBottom: 24,
+  },
+  progressBarContainer: {
+    width: "100%",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 16,
+    paddingHorizontal: 16,
+  },
+  backButtonSection: {
+    flex: 1,
+    alignItems: "flex-start",
+  },
+  backButton: {
+    padding: 4,
+  },
+  progressSection: {
+    flex: 5,
+    alignItems: "flex-end",
+  },
+  spacerSection: {
+    flex: 1,
+  },
+  track: {
+    width: "100%",
+    borderRadius: 10,
+    overflow: "hidden",
+  },
+  progress: {
+    borderRadius: 10,
+  },
+});

package/src/UI/Components/StaggeredTextList.tsx

@@ -0,0 +1,152 @@
+import React, { useEffect } from "react";
+import { View, StyleSheet } from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  withSequence,
+  Easing,
+  interpolateColor,
+  SharedValue,
+} from "react-native-reanimated";
+import { useTheme } from "../Theme/useTheme";
+import { Theme } from "../Theme/types";
+
+type TextItem = {
+  label: string;
+  completed: string;
+};
+
+type StaggeredTextListProps = {
+  items: TextItem[];
+  duration: number;
+};
+
+export const StaggeredTextList = ({
+  items,
+  duration,
+}: StaggeredTextListProps) => {
+  const { theme } = useTheme();
+  const styles = createStyles(theme);
+
+  // Create a shared value to track the current active index
+  const activeIndex = useSharedValue(0);
+
+  useEffect(() => {
+    // Reset animation
+    activeIndex.value = 0;
+
+    // Animate sequentially through each text
+    const animateSequentially = async () => {
+      for (let i = 0; i < items.length; i++) {
+        activeIndex.value = i;
+
+        // Wait for duration before moving to next
+        // Last item stays longer
+        const waitTime = i === items.length - 1 ? duration * 1.5 : duration;
+        await new Promise((resolve) => setTimeout(resolve, waitTime));
+      }
+    };
+
+    animateSequentially();
+  }, [items, duration, activeIndex]);
+
+  return (
+    <View style={styles.container}>
+      {items.map((item, index) => (
+        <AnimatedTextItem
+          key={index}
+          item={item}
+          index={index}
+          activeIndex={activeIndex}
+          totalItems={items.length}
+        />
+      ))}
+    </View>
+  );
+};
+
+type AnimatedTextItemProps = {
+  item: TextItem;
+  index: number;
+  activeIndex: SharedValue<number>;
+  totalItems: number;
+};
+
+const AnimatedTextItem = ({
+  item,
+  index,
+  activeIndex,
+  totalItems,
+}: AnimatedTextItemProps) => {
+  const { theme } = useTheme();
+  const styles = createStyles(theme);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const isActive = activeIndex.value === index;
+    const wasActive = activeIndex.value > index;
+    const willBeActive = activeIndex.value < index;
+
+    // Opacity animation
+    const opacity = withTiming(
+      isActive ? 1 : wasActive ? 0.6 : willBeActive ? 0.4 : 0.4,
+      {
+        duration: 400,
+        easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+      }
+    );
+
+    // Color interpolation
+    const color = interpolateColor(
+      isActive ? 1 : 0,
+      [0, 1],
+      [theme.colors.text.disable, theme.colors.text.primary]
+    );
+
+    // Subtle translateY for active text
+    const translateY = withTiming(isActive ? 0 : 2, {
+      duration: 300,
+      easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+    });
+
+    // Pulse effect for the last active item
+    const scale =
+      isActive && index === totalItems - 1
+        ? withSequence(
+          withTiming(1, { duration: 1000 }),
+          withTiming(1.05, { duration: 1000 }),
+          withTiming(1, { duration: 1000 })
+        )
+        : 1;
+
+    return {
+      opacity,
+      color,
+      transform: [{ translateY }, { scale }],
+    };
+  });
+
+  return (
+    <Animated.Text style={[styles.text, animatedStyle]}>
+      {item.label}
+    </Animated.Text>
+  );
+};
+
+const createStyles = (theme: Theme) =>
+  StyleSheet.create({
+    container: {
+      gap: 8,
+      alignItems: "center",
+      width: "100%",
+    },
+    text: {
+      fontFamily: theme.typography.textStyles.heading3.fontFamily,
+      fontSize: theme.typography.textStyles.heading3.fontSize,
+      fontWeight: theme.typography.fontWeight.medium,
+      textAlign: "center",
+      lineHeight:
+        theme.typography.textStyles.heading3.fontSize * theme.typography.lineHeight.normal,
+      letterSpacing: 0.3,
+    },
+  });

package/src/UI/Components/index.ts

@@ -0,0 +1,3 @@
+export * from "./ProgressBar";
+export * from "./CircularProgress";
+export * from "./StaggeredTextList";

package/src/UI/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,181 @@
+import React, { Component, ReactNode } from 'react';
+import { View, Text, StyleSheet, ScrollView } from 'react-native';
+import { ZodError } from 'zod';
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+  stepType?: string;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+  }
+
+  formatZodError(error: ZodError<any>): string {
+    try {
+      // @ts-ignore
+      return error.errors
+        // @ts-ignore
+        .map((err) => {
+          const path = err.path.join(' > ');
+          return `• ${path || 'root'}: ${err.message}`;
+        })
+        .join('\n');
+    } catch (error) {
+      console.error('Error formatting Zod error:', error);
+      return 'An error occurred while formatting the Zod error';
+    }
+  }
+
+  render() {
+    if (this.state.hasError && this.state.error) {
+      const isZodError = this.state.error instanceof ZodError;
+      const { stepType } = this.props;
+
+      return (
+        <View style={styles.container}>
+          <View style={styles.content}>
+            <Text style={styles.emoji}>⚠️</Text>
+            <Text style={styles.title}>
+              {isZodError ? 'Invalid Step Payload' : 'Something went wrong'}
+            </Text>
+
+            {stepType && (
+              <Text style={styles.stepType}>Step Type: {stepType}</Text>
+            )}
+
+            <ScrollView style={styles.errorScroll} contentContainerStyle={styles.errorScrollContent}>
+              {isZodError ? (
+                <View style={styles.errorSection}>
+                  <Text style={styles.errorLabel}>Validation Errors:</Text>
+                  <Text style={styles.errorMessage}>
+                    {this.formatZodError(this.state.error as ZodError<any>)}
+                  </Text>
+                </View>
+              ) : (
+                <View style={styles.errorSection}>
+                  <Text style={styles.errorLabel}>Error Message:</Text>
+                  <Text style={styles.errorMessage}>
+                    {this.state.error.message}
+                  </Text>
+                  {this.state.error.stack && (
+                    <>
+                      <Text style={styles.errorLabel}>Stack Trace:</Text>
+                      <Text style={styles.errorStack}>
+                        {this.state.error.stack}
+                      </Text>
+                    </>
+                  )}
+                </View>
+              )}
+            </ScrollView>
+
+            {isZodError && (
+              <View style={styles.hint}>
+                <Text style={styles.hintText}>
+                  💡 Check the step payload structure and ensure all required fields match the schema.
+                </Text>
+              </View>
+            )}
+          </View>
+        </View>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  content: {
+    maxWidth: 600,
+    width: '100%',
+    alignItems: 'center',
+  },
+  emoji: {
+    fontSize: 48,
+    marginBottom: 16,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: '600',
+    color: '#dc2626',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  stepType: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#6b7280',
+    marginBottom: 24,
+    textAlign: 'center',
+  },
+  errorScroll: {
+    maxHeight: 400,
+    width: '100%',
+  },
+  errorScrollContent: {
+    paddingVertical: 16,
+  },
+  errorSection: {
+    backgroundColor: '#fef2f2',
+    borderRadius: 12,
+    padding: 16,
+    borderLeftWidth: 4,
+    borderLeftColor: '#dc2626',
+  },
+  errorLabel: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#991b1b',
+    marginBottom: 8,
+  },
+  errorMessage: {
+    fontSize: 14,
+    color: '#7f1d1d',
+    fontFamily: 'Courier',
+    lineHeight: 20,
+  },
+  errorStack: {
+    fontSize: 12,
+    color: '#991b1b',
+    fontFamily: 'Courier',
+    lineHeight: 16,
+    marginTop: 8,
+  },
+  hint: {
+    marginTop: 24,
+    backgroundColor: '#eff6ff',
+    borderRadius: 8,
+    padding: 12,
+    borderLeftWidth: 3,
+    borderLeftColor: '#3b82f6',
+  },
+  hintText: {
+    fontSize: 14,
+    color: '#1e40af',
+    lineHeight: 20,
+  },
+});

package/src/UI/ErrorBoundary/README.md

@@ -0,0 +1,71 @@
+# Error Boundary
+
+The Error Boundary is a Higher Order Component (HOC) that wraps all renderers to catch and display errors gracefully, especially Zod validation errors.
+
+## Features
+
+- **Automatic Error Catching**: Catches all errors thrown by renderers
+- **Zod Error Formatting**: Specially formats Zod validation errors to show which fields are invalid
+- **Developer-Friendly Display**: Shows error messages, stack traces, and validation details
+- **Type-Specific Context**: Displays which step type caused the error
+
+## How It Works
+
+All renderers are automatically wrapped with the `withErrorBoundary` HOC:
+
+```typescript
+import { QuestionRenderer as QuestionRendererBase } from './Renderer';
+import { withErrorBoundary } from '../../ErrorBoundary';
+
+export const QuestionRenderer = withErrorBoundary(QuestionRendererBase, 'Question');
+```
+
+When a Zod validation error occurs (e.g., missing required fields, wrong types), the error boundary will display:
+
+1. Step Type (e.g., "Question", "Ratings")
+2. Validation Errors (formatted list of field paths and messages)
+3. Helpful hints for fixing the payload
+
+## Example
+
+If you pass an invalid payload:
+
+```typescript
+const invalidStep = {
+  id: 'test',
+  type: 'Question',
+  payload: {
+    title: 'Test',
+    // Missing required 'answers' field
+    // Missing required 'multipleAnswer' field
+  }
+} as any;
+```
+
+The error boundary will show:
+```
+⚠️ Invalid Step Payload
+Step Type: Question
+
+Validation Errors:
+• payload > answers: Required
+• payload > multipleAnswer: Required
+
+💡 Check the step payload structure and ensure all required fields match the schema.
+```
+
+## Manual Usage
+
+You can also use the ErrorBoundary component directly:
+
+```typescript
+import { ErrorBoundary } from '@rocapine/react-native-onboarding-studio';
+
+<ErrorBoundary stepType="MyCustomComponent">
+  <MyCustomComponent />
+</ErrorBoundary>
+```
+
+## Testing
+
+An error test example is available at `/example/error-test` in the example app to see the error boundary in action.

package/src/UI/ErrorBoundary/index.ts

@@ -0,0 +1,2 @@
+export { ErrorBoundary } from './ErrorBoundary';
+export { withErrorBoundary } from './withErrorBoundary';

package/src/UI/ErrorBoundary/withErrorBoundary.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ErrorBoundary } from './ErrorBoundary';
+
+export function withErrorBoundary<P extends object>(
+  Component: React.ComponentType<P>,
+  stepType?: string
+) {
+  const WrappedComponent = (props: P) => {
+    return (
+      <ErrorBoundary stepType={stepType}>
+        <Component {...props} />
+      </ErrorBoundary>
+    );
+  };
+
+  WrappedComponent.displayName = `withErrorBoundary(${Component.displayName || Component.name || 'Component'})`;
+
+  return WrappedComponent;
+}

package/src/UI/OnboardingPage.tsx

@@ -0,0 +1,53 @@
+import { OnboardingStepType } from "./types";
+import { RatingsRenderer, PickerRenderer, CommitmentRenderer, CarouselRenderer, LoaderRenderer, MediaContentRenderer, QuestionRenderer, QuestionAnswerButtonProps, QuestionAnswersListProps } from "./Pages";
+import { View, Text, Button } from 'react-native';
+import { useTheme } from "./Theme/useTheme";
+import { Theme } from "./Theme";
+
+
+interface OnboardingPageProps {
+  step: OnboardingStepType;
+  onContinue: (args?: any) => void;
+  isSandbox?: boolean;
+  theme?: Theme;
+  customComponents?: {
+    QuestionAnswerButton?: React.ComponentType<QuestionAnswerButtonProps>;
+    QuestionAnswersList?: React.ComponentType<QuestionAnswersListProps>;
+  };
+}
+
+export const OnboardingPage = ({ step, onContinue, isSandbox }: OnboardingPageProps) => {
+  const { theme } = useTheme();
+
+  switch (step.type) {
+    case 'Ratings':
+      return <RatingsRenderer step={step} onContinue={onContinue} theme={theme} />;
+    case 'Picker':
+      return <PickerRenderer step={step} onContinue={onContinue} theme={theme} />;
+    case 'Commitment':
+      return <CommitmentRenderer step={step} onContinue={onContinue} theme={theme} />;
+    case 'Carousel':
+      return <CarouselRenderer step={step} onContinue={onContinue} theme={theme} />;
+    case 'MediaContent':
+      return <MediaContentRenderer step={step} onContinue={onContinue} theme={theme} />;
+    case 'Loader':
+      return <LoaderRenderer step={step} onContinue={onContinue} theme={theme} />;
+    case 'Question':
+      return <QuestionRenderer step={step} onContinue={onContinue} theme={theme} />;
+    default:
+      if (isSandbox) {
+        // @ts-ignore
+        const stepType = step.type;
+        return <View>
+          <Text>Screen {stepType} not implemented</Text>
+          <Button title="Continue" onPress={onContinue} />
+        </View>
+      } else {
+        onContinue("onboarding_screen_not_implemented");
+        return <View>
+          <Text>You are almost done</Text>
+          <Button title="Continue" onPress={onContinue} />
+        </View>
+      }
+  }
+};