@rocapine/react-native-onboarding-ui 1.9.0 → 1.11.1

package/src/UI/Pages/ComposableScreen/elements/TextElement.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import { z } from "zod";
 import { Text } from "react-native";
+import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import { UIElement } from "../types";
-import { RenderContext, interpolate } from "./shared";
+import { RenderContext, interpolate, dim } from "./shared";
 
-export type TextElementProps = {
+export type TextElementProps = BaseBoxProps & {
   content: string;
   mode?: "plain" | "expression";
   fontSize?: number;
@@ -14,20 +15,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(),
@@ -37,17 +27,6 @@ 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(),
 });
 
 type TextUIElement = Extract<UIElement, { type: "Text" }>;
@@ -60,33 +39,43 @@ type Props = {
 
 export const TextElementComponent = ({ element, ctx, parentType }: Props): React.ReactElement => {
   const { theme, variables } = ctx;
+  const p = element.props;
   const content =
-    element.props.mode === "expression"
-      ? interpolate(element.props.content, variables)
-      : element.props.content;
+    p.mode === "expression"
+      ? interpolate(p.content, variables)
+      : p.content;
 
   return (
     <Text
       style={{
-        fontSize: element.props.fontSize,
-        fontWeight: element.props.fontWeight as any,
-        fontFamily: element.props.fontFamily,
-        color: element.props.color ?? theme.colors.text.primary,
-        textAlign: element.props.textAlign,
-        letterSpacing: element.props.letterSpacing,
-        lineHeight: element.props.lineHeight,
-        backgroundColor: element.props.backgroundColor,
-        padding: element.props.padding,
-        paddingHorizontal: element.props.paddingHorizontal,
-        paddingVertical: element.props.paddingVertical,
-        margin: element.props.margin,
-        marginHorizontal: element.props.marginHorizontal,
-        marginVertical: element.props.marginVertical,
-        borderWidth: element.props.borderWidth,
-        borderRadius: element.props.borderRadius,
-        borderColor: element.props.borderColor,
-        opacity: element.props.opacity,
-        flexShrink: parentType === "XStack" ? 1 : undefined,
+        flex: p.flex,
+        flexShrink: p.flexShrink ?? (parentType === "XStack" ? 1 : undefined),
+        flexGrow: p.flexGrow,
+        alignSelf: p.alignSelf,
+        width: dim(p.width),
+        height: dim(p.height),
+        minWidth: p.minWidth,
+        maxWidth: p.maxWidth,
+        minHeight: p.minHeight,
+        maxHeight: p.maxHeight,
+        fontSize: p.fontSize,
+        fontWeight: p.fontWeight as any,
+        fontFamily: p.fontFamily,
+        color: p.color ?? theme.colors.text.primary,
+        textAlign: p.textAlign,
+        letterSpacing: p.letterSpacing,
+        lineHeight: p.lineHeight,
+        backgroundColor: p.backgroundColor,
+        padding: p.padding,
+        paddingHorizontal: p.paddingHorizontal,
+        paddingVertical: p.paddingVertical,
+        margin: p.margin,
+        marginHorizontal: p.marginHorizontal,
+        marginVertical: p.marginVertical,
+        borderWidth: p.borderWidth,
+        borderRadius: p.borderRadius,
+        borderColor: p.borderColor,
+        opacity: p.opacity,
       }}
     >
       {content}

package/src/UI/Pages/ComposableScreen/elements/VideoElement.tsx

@@ -3,7 +3,7 @@ import { z } from "zod";
 import { View, Text, StyleSheet } from "react-native";
 import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import { UIElement } from "../types";
-import { RenderContext } from "./shared";
+import { RenderContext, dim } from "./shared";
 import { getTextStyle } from "../../../Theme/helpers";
 
 export type VideoElementProps = BaseBoxProps & {
@@ -65,9 +65,18 @@ type Props = {
 export const VideoElementRenderer = ({ element, ctx }: Props): React.ReactElement => {
   const { theme } = ctx;
   const wrapperStyle = {
-    width: element.props.width ?? ("100%" as `${number}%`),
-    height: element.props.height ?? 200,
+    flex: element.props.flex,
+    flexShrink: element.props.flexShrink,
+    flexGrow: element.props.flexGrow,
+    alignSelf: element.props.alignSelf,
+    width: dim(element.props.width) ?? ("100%" as `${number}%`),
+    height: dim(element.props.height ?? 200),
+    minWidth: element.props.minWidth,
+    maxWidth: element.props.maxWidth,
+    minHeight: element.props.minHeight,
+    maxHeight: element.props.maxHeight,
     opacity: element.props.opacity,
+    backgroundColor: element.props.backgroundColor,
     margin: element.props.margin,
     marginHorizontal: element.props.marginHorizontal,
     marginVertical: element.props.marginVertical,

package/src/UI/Pages/ComposableScreen/elements/renderElement.tsx

@@ -12,6 +12,8 @@ import { InputElementComponent } from "./InputElement";
 import { RadioGroupComponent } from "./RadioGroupElement";
 import { CheckboxGroupComponent } from "./CheckboxGroupElement";
 import { ButtonElementComponent } from "./ButtonElement";
+import { DatePickerElementComponent } from "./DatePickerElement";
+import { CarouselElementComponent } from "./CarouselElement";
 
 export const renderElement = (
   element: UIElement,
@@ -62,5 +64,13 @@ export const renderElement = (
     return <ButtonElementComponent key={element.id} element={element} ctx={ctx} />;
   }
 
+  if (element.type === "DatePicker") {
+    return <DatePickerElementComponent key={element.id} element={element} ctx={ctx} />;
+  }
+
+  if (element.type === "Carousel") {
+    return <CarouselElementComponent key={element.id} element={element} ctx={ctx} />;
+  }
+
   return null;
 };

package/src/UI/Pages/ComposableScreen/elements/shared.ts

@@ -13,3 +13,7 @@ export type RenderContext = {
 
 export const interpolate = (template: string, variables: Record<string, ComposableVariableEntry>): string =>
   template.replace(/\{\{([^}]+?)\}\}/g, (_, key) => variables[key]?.label ?? variables[key]?.value ?? "");
+
+// Cast number | string dimension values to DimensionValue for React Native style props
+export const dim = (v: number | string | undefined): import("react-native").DimensionValue | undefined =>
+  v as import("react-native").DimensionValue | undefined;

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

@@ -11,6 +11,8 @@ import { type InputElementProps, InputElementPropsSchema } from "./elements/Inpu
 import { type ButtonElementProps, ButtonElementPropsSchema } from "./elements/ButtonElement";
 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";
@@ -25,6 +27,8 @@ export type { InputElementProps } from "./elements/InputElement";
 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.
@@ -95,6 +99,19 @@ export type UIElement =
       name?: string;
       type: "CheckboxGroup";
       props: CheckboxGroupElementProps;
+    }
+  | {
+      id: string;
+      name?: string;
+      type: "DatePicker";
+      props: DatePickerElementProps;
+    }
+  | {
+      id: string;
+      name?: string;
+      type: "Carousel";
+      props: CarouselElementProps;
+      children: UIElement[];
     };
 
 export const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
@@ -166,6 +183,19 @@ export const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
       type: z.literal("CheckboxGroup"),
       props: CheckboxGroupElementPropsSchema,
     }),
+    z.object({
+      id: z.string(),
+      name: z.string().optional(),
+      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),
+    }),
   ])
 );