@rocapine/react-native-onboarding 1.10.0 → 1.12.0

package/src/steps/ComposableScreen/elements/RiveElement.ts

@@ -3,7 +3,7 @@ import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 
 export type RiveElementProps = BaseBoxProps & {
   url: string;
-  autoplay?: boolean;
+  autoPlay?: boolean;
   fit?: "Contain" | "Cover" | "Fill" | "FitWidth" | "FitHeight" | "None" | "ScaleDown" | "Layout";
   alignment?: "TopLeft" | "TopCenter" | "TopRight" | "CenterLeft" | "Center" | "CenterRight" | "BottomLeft" | "BottomCenter" | "BottomRight";
   artboardName?: string;
@@ -12,7 +12,7 @@ export type RiveElementProps = BaseBoxProps & {
 
 export const RiveElementPropsSchema = BaseBoxPropsSchema.extend({
   url: z.string().min(1, "url must not be empty"),
-  autoplay: z.boolean().optional(),
+  autoPlay: z.boolean().optional(),
   fit: z.enum(["Contain", "Cover", "Fill", "FitWidth", "FitHeight", "None", "ScaleDown", "Layout"]).optional(),
   alignment: z.enum(["TopLeft", "TopCenter", "TopRight", "CenterLeft", "Center", "CenterRight", "BottomLeft", "BottomCenter", "BottomRight"]).optional(),
   artboardName: z.string().optional(),

package/src/steps/ComposableScreen/elements/StackElement.ts

@@ -1,57 +1,16 @@
 import { z } from "zod";
+import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 
-export type StackElementProps = {
+export type StackElementProps = BaseBoxProps & {
   gap?: number;
-  padding?: number;
-  paddingHorizontal?: number;
-  paddingVertical?: number;
-  margin?: number;
-  marginHorizontal?: number;
-  marginVertical?: number;
-  flex?: number;
-  width?: number;
-  height?: number;
-  minWidth?: number;
-  maxWidth?: number;
-  minHeight?: number;
-  maxHeight?: number;
   alignItems?: "flex-start" | "center" | "flex-end" | "stretch";
-  alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
   justifyContent?: "flex-start" | "center" | "flex-end" | "space-between" | "space-around";
-  backgroundColor?: string;
   flexWrap?: "wrap" | "nowrap";
-  flexShrink?: number;
-  borderWidth?: number;
-  borderRadius?: number;
-  borderColor?: string;
-  overflow?: "hidden" | "visible" | "scroll";
-  opacity?: number;
 };
 
-export const StackElementPropsSchema = z.object({
+export const StackElementPropsSchema = BaseBoxPropsSchema.extend({
   gap: z.number().optional(),
-  padding: z.number().optional(),
-  paddingHorizontal: z.number().optional(),
-  paddingVertical: z.number().optional(),
-  margin: z.number().optional(),
-  marginHorizontal: z.number().optional(),
-  marginVertical: z.number().optional(),
-  flex: z.number().optional(),
-  width: z.number().optional(),
-  height: z.number().optional(),
-  minWidth: z.number().optional(),
-  maxWidth: z.number().optional(),
-  minHeight: z.number().optional(),
-  maxHeight: z.number().optional(),
   alignItems: z.enum(["flex-start", "center", "flex-end", "stretch"]).optional(),
-  alignSelf: z.enum(["auto", "flex-start", "flex-end", "center", "stretch", "baseline"]).optional(),
   justifyContent: z.enum(["flex-start", "center", "flex-end", "space-between", "space-around"]).optional(),
-  backgroundColor: z.string().optional(),
   flexWrap: z.enum(["wrap", "nowrap"]).optional(),
-  flexShrink: z.number().optional(),
-  borderWidth: z.number().optional(),
-  borderRadius: z.number().optional(),
-  borderColor: z.string().optional(),
-  overflow: z.enum(["hidden", "visible", "scroll"]).optional(),
-  opacity: z.number().min(0).max(1).optional(),
 });

package/src/steps/ComposableScreen/elements/TextElement.ts

@@ -1,6 +1,7 @@
 import { z } from "zod";
+import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 
-export type TextElementProps = {
+export type TextElementProps = BaseBoxProps & {
   content: string;
   mode?: "plain" | "expression";
   fontSize?: number;
@@ -10,20 +11,9 @@ export type TextElementProps = {
   textAlign?: "left" | "center" | "right";
   letterSpacing?: number;
   lineHeight?: number;
-  backgroundColor?: string;
-  padding?: number;
-  paddingHorizontal?: number;
-  paddingVertical?: number;
-  margin?: number;
-  marginHorizontal?: number;
-  marginVertical?: number;
-  borderWidth?: number;
-  borderRadius?: number;
-  borderColor?: string;
-  opacity?: number;
 };
 
-export const TextElementPropsSchema = z.object({
+export const TextElementPropsSchema = BaseBoxPropsSchema.extend({
   content: z.string(),
   mode: z.enum(["plain", "expression"]).optional(),
   fontSize: z.number().optional(),
@@ -33,15 +23,4 @@ export const TextElementPropsSchema = z.object({
   textAlign: z.enum(["left", "center", "right"]).optional(),
   letterSpacing: z.number().optional(),
   lineHeight: z.number().optional(),
-  backgroundColor: z.string().optional(),
-  padding: z.number().optional(),
-  paddingHorizontal: z.number().optional(),
-  paddingVertical: z.number().optional(),
-  margin: z.number().optional(),
-  marginHorizontal: z.number().optional(),
-  marginVertical: z.number().optional(),
-  borderWidth: z.number().optional(),
-  borderRadius: z.number().optional(),
-  borderColor: z.string().optional(),
-  opacity: z.number().min(0).max(1).optional(),
 });

package/src/steps/ComposableScreen/types.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { CustomPayloadSchema } from "../common.types";
+import { BaseStepTypeSchema } from "../common.types";
 import { type StackElementProps, StackElementPropsSchema } from "./elements/StackElement";
 import { type TextElementProps, TextElementPropsSchema } from "./elements/TextElement";
 import { type ImageElementProps, ImageElementPropsSchema } from "./elements/ImageElement";
@@ -12,6 +12,7 @@ import { type ButtonElementProps, ButtonElementPropsSchema } from "./elements/Bu
 import { type RadioGroupElementProps, RadioGroupElementPropsSchema } from "./elements/RadioGroupElement";
 import { type CheckboxGroupElementProps, CheckboxGroupElementPropsSchema } from "./elements/CheckboxGroupElement";
 import { type DatePickerElementProps, DatePickerElementPropsSchema } from "./elements/DatePickerElement";
+import { type CarouselElementProps, CarouselElementPropsSchema } from "./elements/CarouselElement";
 
 export type { BaseBoxProps } from "./elements/BaseBoxProps";
 export { BaseBoxPropsSchema } from "./elements/BaseBoxProps";
@@ -27,6 +28,7 @@ export type { ButtonElementProps } from "./elements/ButtonElement";
 export type { RadioGroupElementProps } from "./elements/RadioGroupElement";
 export type { CheckboxGroupElementProps } from "./elements/CheckboxGroupElement";
 export type { DatePickerElementProps } from "./elements/DatePickerElement";
+export type { CarouselElementProps } from "./elements/CarouselElement";
 
 // UIElement union — must live here (not in elements/) to avoid circular deps
 // because the Stack variant's children: UIElement[] references itself.
@@ -103,6 +105,13 @@ type UIElement =
       name?: string;
       type: "DatePicker";
       props: DatePickerElementProps;
+    }
+  | {
+      id: string;
+      name?: string;
+      type: "Carousel";
+      props: CarouselElementProps;
+      children: UIElement[];
     };
 
 const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
@@ -180,6 +189,13 @@ const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
       type: z.literal("DatePicker"),
       props: DatePickerElementPropsSchema,
     }),
+    z.object({
+      id: z.string(),
+      name: z.string().optional(),
+      type: z.literal("Carousel"),
+      props: CarouselElementPropsSchema,
+      children: z.array(UIElementSchema),
+    }),
   ])
 );
 
@@ -187,15 +203,9 @@ export const ComposableScreenStepPayloadSchema = z.object({
   elements: z.array(UIElementSchema),
 });
 
-export const ComposableScreenStepTypeSchema = z.object({
-  id: z.string(),
+export const ComposableScreenStepTypeSchema = BaseStepTypeSchema.extend({
   type: z.literal("ComposableScreen"),
-  name: z.string(),
-  displayProgressHeader: z.boolean(),
   payload: ComposableScreenStepPayloadSchema,
-  customPayload: CustomPayloadSchema,
-  continueButtonLabel: z.string().optional().default("Continue"),
-  figmaUrl: z.string().nullable(),
 });
 
 export type ComposableScreenStepType = z.infer<typeof ComposableScreenStepTypeSchema>;

package/src/steps/Loader/types.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { ButtonSectionSchema, CustomPayloadSchema, MediaSourceSchema } from "../common.types";
+import { BaseStepTypeSchema, MediaSourceSchema } from "../common.types";
 
 export const LoaderStepSchema = z.object({
   label: z.string(),
@@ -17,16 +17,9 @@ export const LoaderStepPayloadSchema = z.object({
     .default("bars"),
 });
 
-export const LoaderStepTypeSchema = z.object({
-  id: z.string(),
+export const LoaderStepTypeSchema = BaseStepTypeSchema.extend({
   type: z.literal("Loader"),
-  name: z.string(),
-  displayProgressHeader: z.boolean(),
   payload: LoaderStepPayloadSchema,
-  customPayload: CustomPayloadSchema,
-  continueButtonLabel: z.string().optional().default("Continue"),
-  buttonSection: ButtonSectionSchema.optional(),
-  figmaUrl: z.string().nullish(),
 });
 
 export type LoaderStepType = z.infer<typeof LoaderStepTypeSchema>;

package/src/steps/MediaContent/types.ts

@@ -1,10 +1,5 @@
 import { z } from "zod";
-import {
-  ButtonSectionSchema,
-  CustomPayloadSchema,
-  MediaSourceSchema,
-  SocialProofSchema,
-} from "../common.types";
+import { BaseStepTypeSchema, MediaSourceSchema, SocialProofSchema } from "../common.types";
 
 export const MediaContentLayoutStyleSchema = z.enum(["default", "media_top", "media_bottom"]).default("default");
 
@@ -16,16 +11,9 @@ export const MediaContentStepPayloadSchema = z.object({
   layoutStyle: MediaContentLayoutStyleSchema.optional(),
 });
 
-export const MediaContentStepTypeSchema = z.object({
-  id: z.string(),
+export const MediaContentStepTypeSchema = BaseStepTypeSchema.extend({
   type: z.literal("MediaContent"),
-  name: z.string(),
-  displayProgressHeader: z.boolean(),
   payload: MediaContentStepPayloadSchema,
-  customPayload: CustomPayloadSchema,
-  continueButtonLabel: z.string().optional().default("Continue"),
-  buttonSection: ButtonSectionSchema.optional(),
-  figmaUrl: z.string().nullish(),
 });
 
 export type MediaContentStepType = z.infer<typeof MediaContentStepTypeSchema>;

package/src/steps/Picker/types.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { ButtonSectionSchema, CustomPayloadSchema } from "../common.types";
+import { BaseStepTypeSchema } from "../common.types";
 
 export const PickerTypeEnum = z.enum([
   "height",
@@ -17,16 +17,10 @@ export const PickerStepPayloadSchema = z.object({
   pickerType: z.union([PickerTypeEnum, z.string()]),
 });
 
-export const PickerStepTypeSchema = z.object({
-  id: z.string(),
+export const PickerStepTypeSchema = BaseStepTypeSchema.extend({
   type: z.literal("Picker"),
-  name: z.string(),
-  displayProgressHeader: z.boolean(),
   payload: PickerStepPayloadSchema,
-  customPayload: CustomPayloadSchema,
-  continueButtonLabel: z.string().optional().default("Continue"),
-  buttonSection: ButtonSectionSchema.optional(),
-  figmaUrl: z.string().nullish(),
+  variableName: z.string().min(1).optional(),
 });
 
 export type PickerStepType = z.infer<typeof PickerStepTypeSchema>;

package/src/steps/Question/types.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { ButtonSectionSchema, CustomPayloadSchema, InfoBoxSchema } from "../common.types";
+import { BaseStepTypeSchema, InfoBoxSchema } from "../common.types";
 
 export const AnswerSchema = z.object({
   label: z.string(),
@@ -16,16 +16,10 @@ export const QuestionStepPayloadSchema = z.object({
   infoBox: InfoBoxSchema.nullish(),
 });
 
-export const QuestionStepTypeSchema = z.object({
-  id: z.string(),
+export const QuestionStepTypeSchema = BaseStepTypeSchema.extend({
   type: z.literal("Question"),
-  name: z.string(),
-  displayProgressHeader: z.boolean(),
   payload: QuestionStepPayloadSchema,
-  customPayload: CustomPayloadSchema,
-  continueButtonLabel: z.string().optional().default("Continue"),
-  buttonSection: ButtonSectionSchema.optional(),
-  figmaUrl: z.string().nullish(),
+  variableName: z.string().min(1).optional(),
 });
 
 export type QuestionStepType = z.infer<typeof QuestionStepTypeSchema>;

package/src/steps/Ratings/types.ts

@@ -1,5 +1,5 @@
 import z from "zod";
-import { ButtonSectionSchema, CustomPayloadSchema, SocialProofSchema } from "../common.types";
+import { BaseStepTypeSchema, SocialProofSchema } from "../common.types";
 
 export const RatingsStepPayloadSchema = z.object({
   title: z.string(),
@@ -8,16 +8,9 @@ export const RatingsStepPayloadSchema = z.object({
   rateTheAppButtonLabel: z.string().optional().default("Rate the app"),
 });
 
-export const RatingsStepTypeSchema = z.object({
-  id: z.string(),
+export const RatingsStepTypeSchema = BaseStepTypeSchema.extend({
   type: z.literal("Ratings"),
-  name: z.string(),
-  displayProgressHeader: z.boolean(),
   payload: RatingsStepPayloadSchema,
-  customPayload: CustomPayloadSchema,
-  continueButtonLabel: z.string().optional().default("Continue"),
-  buttonSection: ButtonSectionSchema.optional(),
-  figmaUrl: z.string().nullish(),
 });
 
 export type RatingsStepType = z.infer<typeof RatingsStepTypeSchema>;

package/src/steps/common.types.ts

@@ -28,3 +28,75 @@ export const ButtonSectionSchema = z.object({
   label: z.string().optional(),
   icon: z.string().nullish(),
 });
+
+// ── Branching / nextStep schemas ─────────────────────────────────────────────
+
+export const ConditionOperatorSchema = z.enum([
+  "eq",
+  "neq",
+  "gt",
+  "lt",
+  "gte",
+  "lte",
+  "contains",
+  "in",
+  "not_in",
+]);
+export type ConditionOperator = z.infer<typeof ConditionOperatorSchema>;
+
+export const ConditionValueSchema = z.union([
+  z.string(),
+  z.number(),
+  z.boolean(),
+  z.array(z.union([z.string(), z.number(), z.boolean()])),
+]);
+export type ConditionValue = z.infer<typeof ConditionValueSchema>;
+
+export const LeafConditionSchema = z.object({
+  variable: z.string().min(1),
+  operator: ConditionOperatorSchema,
+  value: ConditionValueSchema,
+});
+export type LeafCondition = z.infer<typeof LeafConditionSchema>;
+
+export type ConditionGroup = {
+  logic: "and" | "or";
+  conditions: Array<LeafCondition | ConditionGroup>;
+};
+
+export const ConditionGroupSchema: z.ZodType<ConditionGroup> = z.lazy(() =>
+  z.object({
+    logic: z.enum(["and", "or"]),
+    conditions: z
+      .array(z.union([LeafConditionSchema, ConditionGroupSchema]))
+      .min(1),
+  })
+);
+
+export const BranchSchema = z.object({
+  condition: z.union([LeafConditionSchema, ConditionGroupSchema]).nullable().default(null),
+  targetStepId: z.string().min(1),
+});
+export type Branch = z.infer<typeof BranchSchema>;
+
+export const NextStepSchema = z
+  .object({
+    defaultTargetStepId: z.string().min(1),
+    branches: z.array(BranchSchema).default([]),
+  })
+  .nullable()
+  .default(null);
+export type NextStep = z.infer<typeof NextStepSchema>;
+
+// ── Base step schema ──────────────────────────────────────────────────────────
+
+export const BaseStepTypeSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  displayProgressHeader: z.boolean(),
+  customPayload: CustomPayloadSchema,
+  continueButtonLabel: z.string().optional().default("Continue"),
+  buttonSection: ButtonSectionSchema.optional(),
+  figmaUrl: z.string().nullish(),
+  nextStep: NextStepSchema,
+});

package/src/types.ts

@@ -1,3 +1,5 @@
+import type { NextStep } from "./steps/common.types";
+
 /**
  * Base step type that all onboarding steps must conform to.
  * This is the minimal interface required by the headless SDK.
@@ -11,6 +13,7 @@ export type BaseStepType = {
   customPayload?: any;
   continueButtonLabel?: string;
   figmaUrl?: string | null;
+  nextStep?: NextStep;
 };
 
 export type OnboardingStudioClientOptions<