@rocapine/react-native-onboarding-ui 1.0.1 → 1.1.3

package/dist/UI/Pages/Loader/types.d.ts

@@ -10,10 +10,10 @@ export declare const LoaderStepPayloadSchema: z.ZodObject<{
         completed: z.ZodString;
     }, z.core.$strip>>;
     didYouKnowImages: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodUnion<readonly [z.ZodObject<{
-        type: z.ZodUnion<[z.ZodUnion<[z.ZodLiteral<"image">, z.ZodLiteral<"lottie">]>, z.ZodLiteral<"rive">]>;
+        type: z.ZodUnion<[z.ZodUnion<[z.ZodUnion<[z.ZodLiteral<"video">, z.ZodLiteral<"image">]>, z.ZodLiteral<"lottie">]>, z.ZodLiteral<"rive">]>;
         localPathId: z.ZodString;
     }, z.core.$strip>, z.ZodObject<{
-        type: z.ZodUnion<[z.ZodUnion<[z.ZodLiteral<"image">, z.ZodLiteral<"lottie">]>, z.ZodLiteral<"rive">]>;
+        type: z.ZodUnion<[z.ZodUnion<[z.ZodUnion<[z.ZodLiteral<"video">, z.ZodLiteral<"image">]>, z.ZodLiteral<"lottie">]>, z.ZodLiteral<"rive">]>;
         url: z.ZodString;
     }, z.core.$strip>]>>>>;
     duration: z.ZodDefault<z.ZodOptional<z.ZodNumber>>;
@@ -35,10 +35,10 @@ export declare const LoaderStepTypeSchema: z.ZodObject<{
             completed: z.ZodString;
         }, z.core.$strip>>;
         didYouKnowImages: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodUnion<readonly [z.ZodObject<{
-            type: z.ZodUnion<[z.ZodUnion<[z.ZodLiteral<"image">, z.ZodLiteral<"lottie">]>, z.ZodLiteral<"rive">]>;
+            type: z.ZodUnion<[z.ZodUnion<[z.ZodUnion<[z.ZodLiteral<"video">, z.ZodLiteral<"image">]>, z.ZodLiteral<"lottie">]>, z.ZodLiteral<"rive">]>;
             localPathId: z.ZodString;
         }, z.core.$strip>, z.ZodObject<{
-            type: z.ZodUnion<[z.ZodUnion<[z.ZodLiteral<"image">, z.ZodLiteral<"lottie">]>, z.ZodLiteral<"rive">]>;
+            type: z.ZodUnion<[z.ZodUnion<[z.ZodUnion<[z.ZodLiteral<"video">, z.ZodLiteral<"image">]>, z.ZodLiteral<"lottie">]>, z.ZodLiteral<"rive">]>;
             url: z.ZodString;
         }, z.core.$strip>]>>>>;
         duration: z.ZodDefault<z.ZodOptional<z.ZodNumber>>;

package/dist/UI/Pages/MediaContent/types.d.ts

@@ -1,10 +1,10 @@
 import { z } from "zod";
 export declare const MediaContentStepPayloadSchema: z.ZodObject<{
     mediaSource: z.ZodUnion<readonly [z.ZodObject<{
-        type: z.ZodUnion<[z.ZodUnion<[z.ZodLiteral<"image">, z.ZodLiteral<"lottie">]>, z.ZodLiteral<"rive">]>;
+        type: z.ZodUnion<[z.ZodUnion<[z.ZodUnion<[z.ZodLiteral<"video">, z.ZodLiteral<"image">]>, z.ZodLiteral<"lottie">]>, z.ZodLiteral<"rive">]>;
         localPathId: z.ZodString;
     }, z.core.$strip>, z.ZodObject<{
-        type: z.ZodUnion<[z.ZodUnion<[z.ZodLiteral<"image">, z.ZodLiteral<"lottie">]>, z.ZodLiteral<"rive">]>;
+        type: z.ZodUnion<[z.ZodUnion<[z.ZodUnion<[z.ZodLiteral<"video">, z.ZodLiteral<"image">]>, z.ZodLiteral<"lottie">]>, z.ZodLiteral<"rive">]>;
         url: z.ZodString;
     }, z.core.$strip>]>;
     title: z.ZodString;
@@ -22,10 +22,10 @@ export declare const MediaContentStepTypeSchema: z.ZodObject<{
     displayProgressHeader: z.ZodBoolean;
     payload: z.ZodObject<{
         mediaSource: z.ZodUnion<readonly [z.ZodObject<{
-            type: z.ZodUnion<[z.ZodUnion<[z.ZodLiteral<"image">, z.ZodLiteral<"lottie">]>, z.ZodLiteral<"rive">]>;
+            type: z.ZodUnion<[z.ZodUnion<[z.ZodUnion<[z.ZodLiteral<"video">, z.ZodLiteral<"image">]>, z.ZodLiteral<"lottie">]>, z.ZodLiteral<"rive">]>;
             localPathId: z.ZodString;
         }, z.core.$strip>, z.ZodObject<{
-            type: z.ZodUnion<[z.ZodUnion<[z.ZodLiteral<"image">, z.ZodLiteral<"lottie">]>, z.ZodLiteral<"rive">]>;
+            type: z.ZodUnion<[z.ZodUnion<[z.ZodUnion<[z.ZodLiteral<"video">, z.ZodLiteral<"image">]>, z.ZodLiteral<"lottie">]>, z.ZodLiteral<"rive">]>;
             url: z.ZodString;
         }, z.core.$strip>]>;
         title: z.ZodString;

package/dist/UI/Pages/types.d.ts

@@ -1,10 +1,10 @@
 import { z } from "zod";
 export declare const CustomPayloadSchema: z.ZodOptional<z.ZodNullable<z.ZodRecord<z.ZodString, z.ZodAny>>>;
 export declare const MediaSourceSchema: z.ZodUnion<readonly [z.ZodObject<{
-    type: z.ZodUnion<[z.ZodUnion<[z.ZodLiteral<"image">, z.ZodLiteral<"lottie">]>, z.ZodLiteral<"rive">]>;
+    type: z.ZodUnion<[z.ZodUnion<[z.ZodUnion<[z.ZodLiteral<"video">, z.ZodLiteral<"image">]>, z.ZodLiteral<"lottie">]>, z.ZodLiteral<"rive">]>;
     localPathId: z.ZodString;
 }, z.core.$strip>, z.ZodObject<{
-    type: z.ZodUnion<[z.ZodUnion<[z.ZodLiteral<"image">, z.ZodLiteral<"lottie">]>, z.ZodLiteral<"rive">]>;
+    type: z.ZodUnion<[z.ZodUnion<[z.ZodUnion<[z.ZodLiteral<"video">, z.ZodLiteral<"image">]>, z.ZodLiteral<"lottie">]>, z.ZodLiteral<"rive">]>;
     url: z.ZodString;
 }, z.core.$strip>]>;
 export declare const SocialProofSchema: z.ZodObject<{

package/dist/UI/Pages/types.js

@@ -5,11 +5,11 @@ const zod_1 = require("zod");
 exports.CustomPayloadSchema = zod_1.z.record(zod_1.z.string(), zod_1.z.any()).nullish();
 exports.MediaSourceSchema = zod_1.z.union([
     zod_1.z.object({
-        type: zod_1.z.literal("image").or(zod_1.z.literal("lottie")).or(zod_1.z.literal("rive")),
+        type: zod_1.z.literal("video").or(zod_1.z.literal("image")).or(zod_1.z.literal("lottie")).or(zod_1.z.literal("rive")),
         localPathId: zod_1.z.string(),
     }),
     zod_1.z.object({
-        type: zod_1.z.literal("image").or(zod_1.z.literal("lottie")).or(zod_1.z.literal("rive")),
+        type: zod_1.z.literal("video").or(zod_1.z.literal("image")).or(zod_1.z.literal("lottie")).or(zod_1.z.literal("rive")),
         url: zod_1.z.string(),
     }),
 ]);

package/dist/UI/Pages/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/UI/Pages/types.ts"],"names":[],"mappings":";;;AAAA,6BAAwB;AAEX,QAAA,mBAAmB,GAAG,OAAC,CAAC,MAAM,CAAC,OAAC,CAAC,MAAM,EAAE,EAAE,OAAC,CAAC,GAAG,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC;AAE9D,QAAA,iBAAiB,GAAG,OAAC,CAAC,KAAK,CAAC;IACvC,OAAC,CAAC,MAAM,CAAC;QACP,IAAI,EAAE,OAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,OAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,OAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QACtE,WAAW,EAAE,OAAC,CAAC,MAAM,EAAE;KACxB,CAAC;IACF,OAAC,CAAC,MAAM,CAAC;QACP,IAAI,EAAE,OAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,OAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,OAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QACtE,GAAG,EAAE,OAAC,CAAC,MAAM,EAAE;KAChB,CAAC;CACH,CAAC,CAAC;AAEU,QAAA,iBAAiB,GAAG,OAAC,CAAC,MAAM,CAAC;IACxC,YAAY,EAAE,OAAC,CAAC,MAAM,EAAE;IACxB,OAAO,EAAE,OAAC,CAAC,MAAM,EAAE;IACnB,UAAU,EAAE,OAAC,CAAC,MAAM,EAAE;CACvB,CAAC,CAAC;AAEU,QAAA,aAAa,GAAG,OAAC,CAAC,MAAM,CAAC;IACpC,KAAK,EAAE,OAAC,CAAC,MAAM,EAAE;IACjB,OAAO,EAAE,OAAC,CAAC,MAAM,EAAE;CACpB,CAAC,CAAC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/UI/Pages/types.ts"],"names":[],"mappings":";;;AAAA,6BAAwB;AAEX,QAAA,mBAAmB,GAAG,OAAC,CAAC,MAAM,CAAC,OAAC,CAAC,MAAM,EAAE,EAAE,OAAC,CAAC,GAAG,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC;AAE9D,QAAA,iBAAiB,GAAG,OAAC,CAAC,KAAK,CAAC;IACvC,OAAC,CAAC,MAAM,CAAC;QACP,IAAI,EAAE,OAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,OAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,OAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,OAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QAC7F,WAAW,EAAE,OAAC,CAAC,MAAM,EAAE;KACxB,CAAC;IACF,OAAC,CAAC,MAAM,CAAC;QACP,IAAI,EAAE,OAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,OAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,OAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,OAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QAC7F,GAAG,EAAE,OAAC,CAAC,MAAM,EAAE;KAChB,CAAC;CACH,CAAC,CAAC;AAEU,QAAA,iBAAiB,GAAG,OAAC,CAAC,MAAM,CAAC;IACxC,YAAY,EAAE,OAAC,CAAC,MAAM,EAAE;IACxB,OAAO,EAAE,OAAC,CAAC,MAAM,EAAE;IACnB,UAAU,EAAE,OAAC,CAAC,MAAM,EAAE;CACvB,CAAC,CAAC;AAEU,QAAA,aAAa,GAAG,OAAC,CAAC,MAAM,CAAC;IACpC,KAAK,EAAE,OAAC,CAAC,MAAM,EAAE;IACjB,OAAO,EAAE,OAAC,CAAC,MAAM,EAAE;CACpB,CAAC,CAAC"}

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@rocapine/react-native-onboarding-ui",
-  "version": "1.0.1",
+  "version": "1.1.3",
   "description": "UI components and renderers for Rocapine Onboarding Studio - Built on top of the headless SDK",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "tsc && cp -r src/assets dist/",
-    "prepare": "npm run build",
     "watch": "tsc --watch",
     "patch": "npm version patch && npm run build && npm publish"
   },

package/src/UI/ErrorBoundary/README.md

@@ -14,10 +14,13 @@ The Error Boundary is a Higher Order Component (HOC) that wraps all renderers to
 All renderers are automatically wrapped with the `withErrorBoundary` HOC:
 
 ```typescript
-import { QuestionRenderer as QuestionRendererBase } from './Renderer';
-import { withErrorBoundary } from '../../ErrorBoundary';
+import { QuestionRenderer as QuestionRendererBase } from "./Renderer";
+import { withErrorBoundary } from "../../ErrorBoundary";
 
-export const QuestionRenderer = withErrorBoundary(QuestionRendererBase, 'Question');
+export const QuestionRenderer = withErrorBoundary(
+  QuestionRendererBase,
+  "Question"
+);
 ```
 
 When a Zod validation error occurs (e.g., missing required fields, wrong types), the error boundary will display:
@@ -32,17 +35,18 @@ If you pass an invalid payload:
 
 ```typescript
 const invalidStep = {
-  id: 'test',
-  type: 'Question',
+  id: "test",
+  type: "Question",
   payload: {
-    title: 'Test',
+    title: "Test",
     // Missing required 'answers' field
     // Missing required 'multipleAnswer' field
-  }
+  },
 } as any;
 ```
 
 The error boundary will show:
+
 ```
 ⚠️ Invalid Step Payload
 Step Type: Question
@@ -59,11 +63,11 @@ Validation Errors:
 You can also use the ErrorBoundary component directly:
 
 ```typescript
-import { ErrorBoundary } from '@rocapine/react-native-onboarding-studio';
+import { ErrorBoundary } from "@rocapine/react-native-onboarding";
 
 <ErrorBoundary stepType="MyCustomComponent">
   <MyCustomComponent />
-</ErrorBoundary>
+</ErrorBoundary>;
 ```
 
 ## Testing

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

@@ -14,15 +14,13 @@ type ContentProps = {
 const MediaContentRendererBase = ({ step, onContinue, theme = defaultTheme }: ContentProps) => {
   // Validate the schema
   const validatedData = MediaContentStepTypeSchema.parse(step);
-  const { mediaSource, title, description } = validatedData.payload;
+  const { mediaSource, title, description, layoutStyle = "default" } = validatedData.payload;
 
   const renderMedia = () => {
     if (mediaSource.type === "image") {
-      // Check if it's a local path or URL
       if ("localPathId" in mediaSource) {
-        // TODO: Map localPathId to actual local image path
         return (
-          <View style={[styles.mediaPlaceholder, { backgroundColor: theme.colors.neutral.lowest }]}>
+          <View style={[styles.mediaContainer, styles.mediaPlaceholder, { backgroundColor: theme.colors.neutral.lowest }]}>
             <Text style={[getTextStyle(theme, "body"), styles.placeholderText, { color: theme.colors.text.disable }]}>
               Image: {mediaSource.localPathId}
             </Text>
@@ -30,36 +28,92 @@ const MediaContentRendererBase = ({ step, onContinue, theme = defaultTheme }: Co
         );
       } else if ("url" in mediaSource) {
         return (
-          <Image
-            source={{ uri: mediaSource.url }}
-            style={styles.mediaImage}
-            resizeMode="cover"
-          />
+          <View style={styles.mediaContainer}>
+            <Image source={{ uri: mediaSource.url }} style={styles.mediaImage} resizeMode="cover" />
+          </View>
         );
       }
     } else if (mediaSource.type === "lottie") {
-      // TODO: Implement Lottie animation support
       return (
-        <View style={[styles.mediaPlaceholder, { backgroundColor: theme.colors.neutral.lowest }]}>
+        <View style={[styles.mediaContainer, styles.mediaPlaceholder, { backgroundColor: theme.colors.neutral.lowest }]}>
           <Text style={[getTextStyle(theme, "body"), styles.placeholderText, { color: theme.colors.text.disable }]}>Lottie Animation</Text>
         </View>
       );
     } else if (mediaSource.type === "rive") {
-      // Rive animation placeholder
       return (
-        <View style={[styles.mediaPlaceholder, { backgroundColor: theme.colors.neutral.lowest }]}>
+        <View style={[styles.mediaContainer, styles.mediaPlaceholder, { backgroundColor: theme.colors.neutral.lowest }]}>
           <Text style={[getTextStyle(theme, "body"), styles.placeholderText, { color: theme.colors.text.disable }]}>Rive Animation</Text>
         </View>
       );
     }
 
     return (
-      <View style={[styles.mediaPlaceholder, { backgroundColor: theme.colors.neutral.lowest }]}>
+      <View style={[styles.mediaContainer, styles.mediaPlaceholder, { backgroundColor: theme.colors.neutral.lowest }]}>
         <Text style={[getTextStyle(theme, "body"), styles.placeholderText, { color: theme.colors.text.disable }]}>Media</Text>
       </View>
     );
   };
 
+  const renderTextBlock = () => (
+    <>
+      <Text style={[getTextStyle(theme, "heading1"), styles.title, { color: theme.colors.text.primary }]}>{title}</Text>
+      {description && <Text style={[getTextStyle(theme, "heading3"), styles.subtitle, { color: theme.colors.text.secondary }]}>{description}</Text>}
+    </>
+  );
+
+  const renderContent = () => {
+    switch (layoutStyle) {
+      case "media_bottom":
+        return (
+          <ScrollView
+            contentContainerStyle={[styles.scrollContent, { paddingTop: 0 }]}
+            showsVerticalScrollIndicator={false}
+            alwaysBounceVertical={false}
+          >
+            <View style={[styles.container, styles.containerSpaceBetween]}>
+              <View style={styles.textBlock}>{renderTextBlock()}</View>
+              <View style={styles.flexSpacer} />
+              {renderMedia()}
+            </View>
+          </ScrollView>
+        );
+
+      case "media_top":
+        return (
+          <ScrollView
+            contentContainerStyle={styles.scrollContent}
+            showsVerticalScrollIndicator={false}
+            alwaysBounceVertical={false}
+          >
+            <View style={styles.container}>
+              {renderMedia()}
+              {renderTextBlock()}
+            </View>
+          </ScrollView>
+        );
+
+      case "default":
+      default:
+        return (
+          <ScrollView
+            contentContainerStyle={styles.scrollContent}
+            showsVerticalScrollIndicator={false}
+            alwaysBounceVertical={false}
+          >
+            <View style={[styles.container, styles.containerCenter]}>
+              <Text style={[getTextStyle(theme, "heading1"), styles.title, { color: theme.colors.text.primary }]}>{title}</Text>
+              {renderMedia()}
+              {description && (
+                <Text style={[getTextStyle(theme, "heading3"), styles.subtitle, { color: theme.colors.text.secondary }]}>
+                  {description}
+                </Text>
+              )}
+            </View>
+          </ScrollView>
+        );
+    }
+  };
+
   return (
     <OnboardingTemplate
       step={step}
@@ -67,22 +121,7 @@ const MediaContentRendererBase = ({ step, onContinue, theme = defaultTheme }: Co
       theme={theme}
       button={{ text: validatedData.continueButtonLabel }}
     >
-      <ScrollView
-        contentContainerStyle={styles.scrollContent}
-        showsVerticalScrollIndicator={false}
-        alwaysBounceVertical={false}
-      >
-        <View style={styles.container}>
-          {/* Title */}
-          <Text style={[getTextStyle(theme, "heading1"), styles.title, { color: theme.colors.text.primary }]}>{title}</Text>
-
-          {/* Media Content */}
-          <View style={styles.mediaContainer}>{renderMedia()}</View>
-
-          {/* Description/Subtitle */}
-          {description && <Text style={[getTextStyle(theme, "heading3"), styles.subtitle, { color: theme.colors.text.secondary }]}>{description}</Text>}
-        </View>
-      </ScrollView>
+      {renderContent()}
     </OnboardingTemplate>
   );
 };
@@ -99,13 +138,28 @@ const styles = StyleSheet.create({
     gap: 24,
     alignItems: "center",
   },
+  containerCenter: {
+    justifyContent: "center",
+  },
+  containerSpaceBetween: {
+    justifyContent: "flex-start",
+    paddingTop: 32,
+  },
+  flexSpacer: {
+    flex: 0.4,
+  },
+  textBlock: {
+    gap: 8,
+    alignItems: "center",
+    width: "100%",
+  },
   title: {
     textAlign: "center",
     letterSpacing: -0.76,
   },
   mediaContainer: {
     width: "100%",
-    height: 400,
+    aspectRatio: 1,
     borderRadius: 32,
     overflow: "hidden",
   },

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

@@ -5,11 +5,16 @@ import {
   SocialProofSchema,
 } from "../types";
 
+export const MediaContentLayoutStyleSchema = z
+  .enum(["default", "media_top", "media_bottom"])
+  .default("default");
+
 export const MediaContentStepPayloadSchema = z.object({
   mediaSource: MediaSourceSchema,
   title: z.string(),
   description: z.string().nullish(),
   socialProof: SocialProofSchema.nullish(),
+  layoutStyle: MediaContentLayoutStyleSchema.optional(),
 });
 
 export const MediaContentStepTypeSchema = z.object({

package/src/UI/Pages/types.ts

@@ -4,11 +4,11 @@ export const CustomPayloadSchema = z.record(z.string(), z.any()).nullish();
 
 export const MediaSourceSchema = z.union([
   z.object({
-    type: z.literal("image").or(z.literal("lottie")).or(z.literal("rive")),
+    type: z.literal("video").or(z.literal("image")).or(z.literal("lottie")).or(z.literal("rive")),
     localPathId: z.string(),
   }),
   z.object({
-    type: z.literal("image").or(z.literal("lottie")).or(z.literal("rive")),
+    type: z.literal("video").or(z.literal("image")).or(z.literal("lottie")).or(z.literal("rive")),
     url: z.string(),
   }),
 ]);