@rocapine/react-native-onboarding-ui 1.0.0

package/src/UI/Pages/Carousel/Renderer.tsx

@@ -0,0 +1,210 @@
+import { OnboardingTemplate } from "../../Templates/OnboardingTemplate";
+import {
+  CarouselStepType,
+  CarouselStepTypeSchema,
+  CarouselScreenType,
+} from "./types";
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  useWindowDimensions,
+  Image,
+  NativeSyntheticEvent,
+  NativeScrollEvent,
+} from "react-native";
+import { useRef, useState } from "react";
+import { Theme } from "../../Theme/types";
+import { defaultTheme } from "../../Theme/defaultTheme";
+import { getTextStyle } from "../../Theme/helpers";
+
+type ContentProps = {
+  step: CarouselStepType;
+  onContinue: () => void;
+  theme?: Theme;
+};
+
+const CarouselRendererBase = ({ step, onContinue, theme = defaultTheme }: ContentProps) => {
+  const validatedData = CarouselStepTypeSchema.parse(step);
+  const { screens } = validatedData.payload;
+  const { width } = useWindowDimensions();
+  const scrollViewRef = useRef<ScrollView>(null);
+  const [currentPage, setCurrentPage] = useState(0);
+
+  const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const newPage = Math.round(event.nativeEvent.contentOffset.x / width);
+    if (newPage !== currentPage) {
+      setCurrentPage(newPage);
+    }
+  };
+
+  const handleButtonPress = () => {
+    const isLastPage = currentPage === screens.length - 1;
+
+    if (isLastPage) {
+      onContinue();
+      return;
+    }
+
+    const nextPage = currentPage + 1;
+    scrollViewRef.current?.scrollTo({
+      x: nextPage * width,
+      animated: true,
+    });
+    setCurrentPage(nextPage);
+  };
+
+  const isLastPage = currentPage === screens.length - 1;
+
+  return (
+    <OnboardingTemplate
+      step={step}
+      onContinue={handleButtonPress}
+      theme={theme}
+      button={{
+        text: isLastPage ? validatedData.continueButtonLabel : "Next",
+      }}
+    >
+      <View style={styles.container}>
+        <ScrollView
+          ref={scrollViewRef}
+          horizontal
+          pagingEnabled
+          showsHorizontalScrollIndicator={false}
+          scrollEventThrottle={16}
+          onMomentumScrollEnd={handleScroll}
+          style={styles.scrollView}
+        >
+          {screens.map((screen, index) => (
+            <CarouselScreen key={index} width={width} screen={screen} theme={theme} />
+          ))}
+        </ScrollView>
+
+        {/* Page Indicators */}
+        <View style={styles.indicatorContainer}>
+          {screens.map((_, index) => (
+            <View
+              key={index}
+              style={[
+                styles.indicator,
+                {
+                  backgroundColor: index === currentPage ? theme.colors.primary : theme.colors.neutral.lower
+                },
+                index === currentPage && styles.indicatorActive,
+              ]}
+            />
+          ))}
+        </View>
+      </View>
+    </OnboardingTemplate>
+  );
+};
+
+type CarouselScreenProps = {
+  width: number;
+  screen: CarouselScreenType;
+  theme: Theme;
+};
+
+const CarouselScreen = ({ width, screen, theme }: CarouselScreenProps) => {
+  const renderMedia = () => {
+    const { mediaUrl } = screen;
+
+    if (mediaUrl.includes(".riv")) {
+      return (
+        <View style={[styles.mediaPlaceholder, { backgroundColor: theme.colors.neutral.lowest }]}>
+          <Text style={[getTextStyle(theme, "body"), styles.placeholderText, { color: theme.colors.text.disable }]}>Rive Animation</Text>
+        </View>
+      );
+    } else if (mediaUrl.includes(".json")) {
+      return <View style={[styles.mediaPlaceholder, { backgroundColor: theme.colors.neutral.lowest }]}>
+        <Text style={[getTextStyle(theme, "body"), styles.placeholderText, { color: theme.colors.text.disable }]}>Lottie Animation</Text>
+      </View>
+    } else {
+      return (
+        <Image
+          source={{ uri: mediaUrl }}
+          style={styles.mediaImage}
+          resizeMode="contain"
+        />
+      );
+    }
+  };
+
+  return (
+    <View style={[styles.screenContainer, { width }]}>
+      {/* Media */}
+      <View style={styles.mediaContainer}>{renderMedia()}</View>
+
+      {/* Text Content */}
+      <View style={styles.textContainer}>
+        <Text style={[getTextStyle(theme, "heading1"), styles.title, { color: theme.colors.text.primary }]}>{screen.title}</Text>
+        {screen.subtitle && (
+          <Text style={[getTextStyle(theme, "heading3"), styles.subtitle, { color: theme.colors.text.secondary }]}>{screen.subtitle}</Text>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  screenContainer: {
+    flex: 1,
+    paddingHorizontal: 24,
+    gap: 32,
+  },
+  mediaContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    minHeight: 300,
+  },
+  mediaImage: {
+    width: "100%",
+    height: "100%",
+  },
+  mediaPlaceholder: {
+    width: "100%",
+    height: "100%",
+    borderRadius: 32,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  placeholderText: {},
+  textContainer: {
+    gap: 16,
+    paddingBottom: 24,
+  },
+  title: {
+    textAlign: "center",
+    letterSpacing: -0.76,
+  },
+  subtitle: {
+    textAlign: "center",
+  },
+  indicatorContainer: {
+    flexDirection: "row",
+    justifyContent: "center",
+    gap: 8,
+    paddingVertical: 20,
+  },
+  indicator: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+  },
+  indicatorActive: {
+    width: 24,
+  },
+});
+
+import { withErrorBoundary } from '../../ErrorBoundary';
+
+export const CarouselRenderer = withErrorBoundary(CarouselRendererBase, 'Carousel');

package/src/UI/Pages/Carousel/index.ts

@@ -0,0 +1,2 @@
+export * from "./Renderer";
+export * from "./types";

package/src/UI/Pages/Carousel/types.ts

@@ -0,0 +1,26 @@
+import { z } from "zod";
+import { CustomPayloadSchema } from "../types";
+
+export const CarouselScreenSchema = z.object({
+  mediaUrl: z.string(),
+  title: z.string(),
+  subtitle: z.string().nullish(),
+});
+
+export const CarouselStepPayloadSchema = z.object({
+  screens: z.array(CarouselScreenSchema),
+});
+
+export const CarouselStepTypeSchema = z.object({
+  id: z.string(),
+  type: z.literal("Carousel"),
+  name: z.string(),
+  displayProgressHeader: z.boolean(),
+  payload: CarouselStepPayloadSchema,
+  customPayload: CustomPayloadSchema,
+  continueButtonLabel: z.string().optional().default("Continue"),
+  figmaUrl: z.string().nullish(),
+});
+
+export type CarouselStepType = z.infer<typeof CarouselStepTypeSchema>;
+export type CarouselScreenType = z.infer<typeof CarouselScreenSchema>;

package/src/UI/Pages/Commitment/Renderer.tsx

@@ -0,0 +1,312 @@
+import React, { useState, useRef, useCallback } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  TouchableOpacity,
+} from "react-native";
+import { CommitmentStepType, CommitmentStepTypeSchema } from "./types";
+import { OnboardingTemplate } from "../../Templates/OnboardingTemplate";
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+} from "react-native-gesture-handler";
+import { runOnJS } from "react-native-reanimated";
+import { Theme } from "../../Theme/types";
+import { defaultTheme } from "../../Theme/defaultTheme";
+import { getTextStyle } from "../../Theme/helpers";
+
+// Lazy load Skia - only needed for signature variant
+let SkiaModule: any;
+try {
+  SkiaModule = require("@shopify/react-native-skia");
+} catch (e) {
+  // Skia not installed - will show error if signature variant is used
+  SkiaModule = null;
+}
+
+type ContentProps = {
+  step: CommitmentStepType;
+  onContinue: () => void;
+  theme?: Theme;
+};
+
+const CommitmentRendererBase = ({ step, onContinue, theme = defaultTheme }: ContentProps) => {
+  const validatedData = CommitmentStepTypeSchema.parse(step);
+  const { payload } = validatedData;
+
+  // Check if Skia is needed and available
+  const needsSkia = payload.variant === "signature";
+  if (needsSkia && !SkiaModule) {
+    throw new Error(
+      "Commitment screens with signature variant require @shopify/react-native-skia. Install it with: npm install @shopify/react-native-skia"
+    );
+  }
+
+  const Skia = SkiaModule?.Skia;
+  const currentPath = useRef<any>(null);
+  const [paths, setPaths] = useState<any[]>([]);
+  const [hasSignature, setHasSignature] = useState(false);
+
+  const updatePaths = useCallback((newPath: any) => {
+    setPaths((prevState) => [...prevState, newPath]);
+  }, []);
+
+  const panGesture = Gesture.Pan()
+    .runOnJS(true)
+    .onBegin(({ x, y }: { x: number; y: number }) => {
+      if (Skia) {
+        currentPath.current = Skia.Path.Make();
+        currentPath.current.moveTo(x, y);
+        runOnJS(updatePaths)(currentPath.current);
+        runOnJS(setHasSignature)(true);
+      }
+    })
+    .onUpdate(({ x, y }: { x: number; y: number }) => {
+      if (currentPath.current) {
+        currentPath.current.lineTo(x, y);
+        setPaths((prev) => [...prev]);
+      }
+    });
+
+  const handleClearSignature = () => {
+    setPaths([]);
+    currentPath.current = null;
+    setHasSignature(false);
+  };
+
+  const isButtonDisabled = payload.variant === "signature" && !hasSignature;
+
+  return (
+    <OnboardingTemplate
+      step={validatedData}
+      onContinue={onContinue}
+      theme={theme}
+      button={{
+        text: validatedData.continueButtonLabel,
+        disabled: isButtonDisabled,
+      }}
+    >
+      <ScrollView
+        style={styles.scrollView}
+        contentContainerStyle={styles.contentContainer}
+        showsVerticalScrollIndicator={false}
+        alwaysBounceVertical={false}
+      >
+        <View style={styles.container}>
+          {/* Title */}
+          <Text style={[getTextStyle(theme, "heading1"), styles.title, { color: theme.colors.text.primary }]}>
+            {payload.title}
+          </Text>
+
+          {/* Content Section */}
+          <View style={styles.contentSection}>
+            {/* Subtitle */}
+            {payload.subtitle && (
+              <Text
+                style={[
+                  getTextStyle(theme, "heading3"),
+                  styles.subtitle,
+                  { color: theme.colors.text.secondary },
+                ]}
+              >
+                {payload.subtitle}
+              </Text>
+            )}
+
+            {/* Description or Commitments List */}
+            {payload.description ? (
+              <Text
+                style={[
+                  getTextStyle(theme, "body"),
+                  styles.description,
+                  { color: theme.colors.text.secondary },
+                ]}
+              >
+                {payload.description}
+              </Text>
+            ) : (
+              payload.commitments && (
+                <View style={styles.commitmentsContainer}>
+                  {payload.commitments.map(
+                    (commitment: { text: string }, index: number) => (
+                      <View key={index} style={styles.commitmentRow}>
+                        <View
+                          style={[
+                            styles.checkmark,
+                            { backgroundColor: theme.colors.primary },
+                          ]}
+                        >
+                          <Text style={[styles.checkmarkText, { color: theme.colors.text.opposite }]}>✓</Text>
+                        </View>
+                        <Text
+                          style={[
+                            getTextStyle(theme, "body"),
+                            styles.commitmentText,
+                            { color: theme.colors.text.secondary },
+                          ]}
+                        >
+                          {commitment.text}
+                        </Text>
+                      </View>
+                    )
+                  )}
+                </View>
+              )
+            )}
+          </View>
+
+          {/* Signature Canvas */}
+          {payload.variant === "signature" && (
+            <View style={styles.signatureSection}>
+              <GestureHandlerRootView style={styles.gestureRoot}>
+                <View
+                  style={[
+                    styles.signatureContainer,
+                    { borderColor: theme.colors.primary },
+                  ]}
+                >
+                  {/* Clear button */}
+                  {hasSignature && (
+                    <TouchableOpacity
+                      style={[
+                        styles.clearButton,
+                        { backgroundColor: theme.colors.neutral.higher },
+                      ]}
+                      onPress={handleClearSignature}
+                      activeOpacity={0.8}
+                    >
+                      <Text style={[styles.clearButtonText, { color: theme.colors.text.opposite }]}>✕</Text>
+                    </TouchableOpacity>
+                  )}
+
+                  {/* Canvas */}
+                  <GestureDetector gesture={panGesture}>
+                    {SkiaModule && (
+                      <SkiaModule.Canvas style={styles.canvas}>
+                        {paths.map((path: any, index: number) => (
+                          <SkiaModule.Path
+                            key={index}
+                            path={path}
+                            color={theme.colors.text.primary}
+                            style="stroke"
+                            strokeWidth={2}
+                            strokeCap="round"
+                            strokeJoin="round"
+                          />
+                        ))}
+                      </SkiaModule.Canvas>
+                    )}
+                  </GestureDetector>
+                </View>
+              </GestureHandlerRootView>
+
+              {/* Caption */}
+              <Text
+                style={[
+                  getTextStyle(theme, "caption"),
+                  styles.signatureCaption,
+                  { color: theme.colors.text.secondary },
+                ]}
+              >
+                {payload.signatureCaption}
+              </Text>
+            </View>
+          )}
+        </View>
+      </ScrollView>
+    </OnboardingTemplate>
+  );
+};
+
+const styles = StyleSheet.create({
+  scrollView: {
+    flex: 1,
+  },
+  contentContainer: {
+    flexGrow: 1,
+  },
+  container: {
+    flex: 1,
+    paddingHorizontal: 24,
+    paddingTop: 24,
+    gap: 48,
+  },
+  title: {
+    letterSpacing: -0.76,
+  },
+  contentSection: {
+    gap: 24,
+  },
+  subtitle: {},
+  description: {
+    paddingVertical: 8,
+  },
+  commitmentsContainer: {
+    gap: 16,
+  },
+  commitmentRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 16,
+  },
+  checkmark: {
+    width: 24,
+    height: 24,
+    borderRadius: 30,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 6,
+  },
+  checkmarkText: {
+    fontSize: 12,
+    fontWeight: "600",
+  },
+  commitmentText: {
+    flex: 1,
+  },
+  signatureSection: {
+    gap: 8,
+  },
+  gestureRoot: {
+    width: "100%",
+  },
+  signatureContainer: {
+    borderWidth: 2,
+    borderRadius: 32,
+    padding: 12,
+    height: 169,
+    position: "relative",
+  },
+  clearButton: {
+    position: "absolute",
+    top: 12,
+    right: 12,
+    zIndex: 1,
+    width: 32,
+    height: 32,
+    borderRadius: 20,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  clearButtonText: {
+    fontSize: 16,
+    fontWeight: "400",
+  },
+  canvas: {
+    flex: 1,
+    borderRadius: 20,
+  },
+  signatureCaption: {
+    marginBottom: 32,
+  },
+});
+
+import { withErrorBoundary } from "../../ErrorBoundary";
+
+export const CommitmentRenderer = withErrorBoundary(
+  CommitmentRendererBase,
+  "Commitment"
+);

package/src/UI/Pages/Commitment/index.ts

@@ -0,0 +1,2 @@
+export * from "./Renderer";
+export * from "./types";

package/src/UI/Pages/Commitment/types.ts

@@ -0,0 +1,28 @@
+import { z } from "zod";
+import { CustomPayloadSchema } from "../types";
+
+export const CommitmentItemSchema = z.object({
+  text: z.string(),
+});
+
+export const CommitmentStepPayloadSchema = z.object({
+  title: z.string(),
+  subtitle: z.string().nullish(),
+  description: z.string().nullish(),
+  commitments: z.array(CommitmentItemSchema).nullish(),
+  signatureCaption: z.string().default("Your signature is not recorded"),
+  variant: z.enum(["signature", "simple"]).default("signature"),
+});
+
+export const CommitmentStepTypeSchema = z.object({
+  id: z.string(),
+  type: z.literal("Commitment"),
+  name: z.string(),
+  displayProgressHeader: z.boolean(),
+  payload: CommitmentStepPayloadSchema,
+  customPayload: CustomPayloadSchema,
+  continueButtonLabel: z.string().optional().default("Continue"),
+  figmaUrl: z.string().nullish(),
+});
+
+export type CommitmentStepType = z.infer<typeof CommitmentStepTypeSchema>;