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

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

@@ -0,0 +1,172 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Pressable, Text, View, Platform } from "react-native";
+import DateTimePicker, { DateTimePickerEvent } from "@react-native-community/datetimepicker";
+import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
+import { z } from "zod";
+import type { UIElement } from "../types";
+import { dim, type RenderContext } from "./shared";
+
+export type DatePickerElementProps = BaseBoxProps & {
+  variableName?: string;
+  defaultValue?: string;
+  minimumDate?: string;
+  maximumDate?: string;
+  mode?: "date" | "time" | "datetime";
+  display?: "default" | "spinner" | "calendar" | "clock" | "compact" | "inline";
+  textColor?: string;
+  accentColor?: string;
+  locale?: string;
+};
+
+export const DatePickerElementPropsSchema = BaseBoxPropsSchema.extend({
+  variableName: z.string().min(1).optional(),
+  defaultValue: z.string().refine((s) => !isNaN(Date.parse(s)), { message: "Invalid date string" }).optional(),
+  minimumDate: z.string().refine((s) => !isNaN(Date.parse(s)), { message: "Invalid date string" }).optional(),
+  maximumDate: z.string().refine((s) => !isNaN(Date.parse(s)), { message: "Invalid date string" }).optional(),
+  mode: z.enum(["date", "time", "datetime"]).optional().default("date"),
+  display: z.enum(["default", "spinner", "calendar", "clock", "compact", "inline"]).optional(),
+  textColor: z.string().optional(),
+  accentColor: z.string().optional(),
+  locale: z.string().optional(),
+});
+
+type DatePickerUIElement = Extract<UIElement, { type: "DatePicker" }>;
+
+type Props = {
+  element: DatePickerUIElement;
+  ctx: RenderContext;
+};
+
+function formatDate(date: Date, mode: "date" | "time" | "datetime"): string {
+  if (mode === "time") {
+    return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  }
+  if (mode === "datetime") {
+    return date.toLocaleString([], { dateStyle: "medium", timeStyle: "short" });
+  }
+  return date.toLocaleDateString([], { dateStyle: "medium" });
+}
+
+export const DatePickerElementComponent = ({ element, ctx }: Props): React.ReactElement => {
+  const { theme, variables, setVariable } = ctx;
+  const { props } = element;
+
+  const persistedValue = props.variableName ? variables[props.variableName]?.value : undefined;
+  const initialDate = persistedValue
+    ? new Date(persistedValue)
+    : props.defaultValue
+    ? new Date(props.defaultValue)
+    : new Date();
+
+  const [date, setDate] = useState<Date>(initialDate);
+  const [isPickerVisible, setPickerVisible] = useState(false);
+  const mode = props.mode ?? "date";
+
+  // Tracks which variableName has been seeded so re-renders don't clobber a
+  // persisted value that arrived after the first render.
+  const seededVariableRef = useRef<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (
+      props.variableName &&
+      persistedValue === undefined &&
+      seededVariableRef.current !== props.variableName
+    ) {
+      seededVariableRef.current = props.variableName;
+      setVariable(props.variableName, {
+        value: initialDate.toISOString(),
+        label: formatDate(initialDate, mode),
+      });
+    }
+  }, [props.variableName, persistedValue, initialDate, mode, setVariable]);
+
+  const handleChange = (_event: DateTimePickerEvent, selected?: Date) => {
+    if (!selected) return;
+    setDate(selected);
+    if (props.variableName) {
+      setVariable(props.variableName, {
+        value: selected.toISOString(),
+        label: formatDate(selected, mode),
+      });
+    }
+  };
+
+  const containerStyle = {
+    alignSelf: props.alignSelf,
+    width: dim(props.width),
+    height: dim(props.height),
+    margin: props.margin,
+    marginHorizontal: props.marginHorizontal,
+    marginVertical: props.marginVertical,
+    padding: props.padding,
+    paddingHorizontal: props.paddingHorizontal,
+    paddingVertical: props.paddingVertical,
+    opacity: props.opacity,
+    borderWidth: props.borderWidth,
+    borderRadius: props.borderRadius,
+    borderColor: props.borderColor,
+    overflow: "hidden" as const,
+  };
+
+  const pickerProps = {
+    value: date,
+    mode,
+    onChange: handleChange,
+    minimumDate: props.minimumDate ? new Date(props.minimumDate) : undefined,
+    maximumDate: props.maximumDate ? new Date(props.maximumDate) : undefined,
+    // Fall back to theme tokens when CMS props are not provided.
+    textColor: props.textColor ?? theme.colors.text.primary,
+    accentColor: props.accentColor ?? theme.colors.primary,
+    locale: props.locale,
+  };
+
+  if (Platform.OS === "android") {
+    return (
+      <View style={containerStyle}>
+        <Pressable
+          onPress={() => setPickerVisible(true)}
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            paddingVertical: 12,
+            paddingHorizontal: 16,
+            borderRadius: props.borderRadius ?? 8,
+            borderWidth: props.borderWidth ?? 1,
+            borderColor: props.borderColor ?? theme.colors.neutral.low,
+            backgroundColor: theme.colors.neutral.lowest,
+          }}
+        >
+          <Text
+            style={{
+              color: props.textColor ?? theme.colors.text.primary,
+              fontSize: theme.typography.textStyles.body.fontSize,
+            }}
+          >
+            {formatDate(date, mode)}
+          </Text>
+          <Text style={{ color: theme.colors.text.tertiary, fontSize: 16 }}>›</Text>
+        </Pressable>
+        {isPickerVisible && (
+          <DateTimePicker
+            {...pickerProps}
+            display={(props.display ?? "default") as any}
+            onChange={(event, selected) => {
+              setPickerVisible(false);
+              handleChange(event, selected);
+            }}
+          />
+        )}
+      </View>
+    );
+  }
+
+  return (
+    <View style={containerStyle}>
+      <DateTimePicker
+        {...pickerProps}
+        display={(props.display ?? "spinner") as any}
+      />
+    </View>
+  );
+};

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

@@ -3,7 +3,7 @@ import { z } from "zod";
 import { View } from "react-native";
 import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import { UIElement } from "../types";
-import { RenderContext } from "./shared";
+import { RenderContext, dim } from "./shared";
 
 export type IconElementProps = BaseBoxProps & {
   name: string;
@@ -40,8 +40,17 @@ export const IconElementComponent = ({ element, ctx }: Props): React.ReactElemen
   return (
     <View
       style={{
-        width: element.props.width,
-        height: element.props.height,
+        flex: element.props.flex,
+        flexShrink: element.props.flexShrink,
+        flexGrow: element.props.flexGrow,
+        alignSelf: element.props.alignSelf,
+        width: dim(element.props.width),
+        height: dim(element.props.height),
+        minWidth: element.props.minWidth,
+        maxWidth: element.props.maxWidth,
+        minHeight: element.props.minHeight,
+        maxHeight: element.props.maxHeight,
+        overflow: element.props.overflow,
         margin: element.props.margin,
         marginHorizontal: element.props.marginHorizontal,
         marginVertical: element.props.marginVertical,

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

@@ -3,7 +3,7 @@ import { z } from "zod";
 import { Image } from "react-native";
 import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import { UIElement } from "../types";
-import { RenderContext } from "./shared";
+import { RenderContext, dim } from "./shared";
 
 export type ImageElementProps = BaseBoxProps & {
   url: string;
@@ -26,16 +26,24 @@ type Props = {
 
 export const ImageElementComponent = ({ element }: Props): React.ReactElement => {
   const hasExplicitHeight = element.props.height !== undefined;
-  const aspectRatio = hasExplicitHeight ? undefined : (element.props.aspectRatio ?? 16 / 9);
 
   return (
     <Image
       source={{ uri: element.props.url }}
-      resizeMode={element.props.resizeMode ?? "cover"}
-      style={{
-        width: element.props.width ?? "100%",
-        height: element.props.height,
-        aspectRatio,
+      resizeMode={element.props.resizeMode}
+      style={({
+        flex: element.props.flex,
+        flexShrink: element.props.flexShrink,
+        flexGrow: element.props.flexGrow,
+        alignSelf: element.props.alignSelf,
+        width: dim(element.props.width),
+        height: dim(element.props.height),
+        minWidth: element.props.minWidth,
+        maxWidth: element.props.maxWidth,
+        minHeight: element.props.minHeight,
+        maxHeight: element.props.maxHeight,
+        backgroundColor: element.props.backgroundColor,
+        overflow: element.props.overflow,
         borderRadius: element.props.borderRadius,
         borderWidth: element.props.borderWidth,
         borderColor: element.props.borderColor,
@@ -46,7 +54,7 @@ export const ImageElementComponent = ({ element }: Props): React.ReactElement =>
         padding: element.props.padding,
         paddingHorizontal: element.props.paddingHorizontal,
         paddingVertical: element.props.paddingVertical,
-      }}
+      }) as any}
     />
   );
 };

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

@@ -3,7 +3,7 @@ import { z } from "zod";
 import { View, TextInput } from "react-native";
 import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import { UIElement } from "../types";
-import { RenderContext } from "./shared";
+import { RenderContext, dim } from "./shared";
 
 export type InputElementProps = BaseBoxProps & {
   variableName?: string;
@@ -21,6 +21,9 @@ export type InputElementProps = BaseBoxProps & {
   backgroundColor?: string;
   fontSize?: number;
   fontWeight?: string;
+  fontFamily?: string;
+  lineHeight?: number;
+  letterSpacing?: number;
   textAlign?: "left" | "center" | "right";
   placeholderColor?: string;
 };
@@ -41,6 +44,9 @@ export const InputElementPropsSchema = BaseBoxPropsSchema.extend({
   backgroundColor: z.string().optional(),
   fontSize: z.number().optional(),
   fontWeight: z.string().optional(),
+  fontFamily: z.string().optional(),
+  lineHeight: z.number().optional(),
+  letterSpacing: z.number().optional(),
   textAlign: z.enum(["left", "center", "right"]).optional(),
   placeholderColor: z.string().optional(),
 });
@@ -85,10 +91,18 @@ export const InputElementComponent = ({ element, ctx }: Props): React.ReactEleme
       numberOfLines={element.props.numberOfLines}
       editable={element.props.editable ?? true}
       style={{
+        flex: element.props.flex,
+        flexShrink: element.props.flexShrink,
+        flexGrow: element.props.flexGrow,
         alignSelf: element.props.alignSelf,
-        width: element.props.width,
-        height: element.props.height,
+        width: dim(element.props.width),
+        height: dim(element.props.height),
+        minWidth: element.props.minWidth,
+        maxWidth: element.props.maxWidth,
+        minHeight: element.props.minHeight,
+        maxHeight: element.props.maxHeight,
         opacity: element.props.opacity,
+        overflow: element.props.overflow,
         margin: element.props.margin,
         marginHorizontal: element.props.marginHorizontal,
         marginVertical: element.props.marginVertical,
@@ -99,6 +113,9 @@ export const InputElementComponent = ({ element, ctx }: Props): React.ReactEleme
         color: element.props.color ?? theme.colors.text.primary,
         fontSize: element.props.fontSize ?? theme.typography.textStyles.body.fontSize,
         fontWeight: element.props.fontWeight as any,
+        fontFamily: element.props.fontFamily,
+        lineHeight: element.props.lineHeight,
+        letterSpacing: element.props.letterSpacing,
         textAlign: element.props.textAlign,
         padding: element.props.padding ?? 12,
         paddingHorizontal: element.props.paddingHorizontal,

package/src/UI/Pages/ComposableScreen/elements/LottieElement.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 LottieElementProps = BaseBoxProps & {
@@ -43,9 +43,18 @@ type Props = {
 export const LottieElementComponent = ({ 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/RadioGroupElement.tsx

@@ -3,7 +3,7 @@ import { z } from "zod";
 import { View, Text, TouchableOpacity } from "react-native";
 import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import { UIElement } from "../types";
-import { RenderContext } from "./shared";
+import { RenderContext, dim } from "./shared";
 
 export type RadioGroupElementProps = BaseBoxProps & {
   variableName?: string;
@@ -92,8 +92,8 @@ export const RadioGroupComponent = ({ element, ctx }: Props): React.ReactElement
         flexWrap: isHorizontal ? "wrap" : undefined,
         alignSelf: element.props.alignSelf,
         gap: element.props.gap ?? 8,
-        width: element.props.width,
-        height: element.props.height,
+        width: dim(element.props.width),
+        height: dim(element.props.height),
         margin: element.props.margin,
         marginHorizontal: element.props.marginHorizontal,
         marginVertical: element.props.marginVertical,

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

@@ -3,12 +3,12 @@ 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 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;
@@ -17,7 +17,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(),
@@ -35,7 +35,7 @@ try {
     return (
       <Rive
         url={element.props.url}
-        autoplay={element.props.autoplay ?? true}
+        autoplay={element.props.autoPlay ?? true}
         fit={element.props.fit ? Fit[element.props.fit] : Fit.Contain}
         alignment={element.props.alignment ? Alignment[element.props.alignment] : Alignment.Center}
         artboardName={element.props.artboardName}
@@ -56,19 +56,29 @@ type Props = {
 
 export const RiveElementRenderer = ({ element, ctx }: Props): React.ReactElement => {
   const { theme } = ctx;
+  const p = element.props;
   const wrapperStyle = {
-    width: element.props.width ?? ("100%" as `${number}%`),
-    height: element.props.height ?? 200,
-    opacity: element.props.opacity,
-    margin: element.props.margin,
-    marginHorizontal: element.props.marginHorizontal,
-    marginVertical: element.props.marginVertical,
-    padding: element.props.padding,
-    paddingHorizontal: element.props.paddingHorizontal,
-    paddingVertical: element.props.paddingVertical,
-    borderWidth: element.props.borderWidth,
-    borderRadius: element.props.borderRadius,
-    borderColor: element.props.borderColor,
+    flex: p.flex,
+    flexShrink: p.flexShrink,
+    flexGrow: p.flexGrow,
+    alignSelf: p.alignSelf,
+    width: dim(p.width) ?? ("100%" as `${number}%`),
+    height: dim(p.height ?? 200),
+    minWidth: p.minWidth,
+    maxWidth: p.maxWidth,
+    minHeight: p.minHeight,
+    maxHeight: p.maxHeight,
+    opacity: p.opacity,
+    backgroundColor: p.backgroundColor,
+    margin: p.margin,
+    marginHorizontal: p.marginHorizontal,
+    marginVertical: p.marginVertical,
+    padding: p.padding,
+    paddingHorizontal: p.paddingHorizontal,
+    paddingVertical: p.paddingVertical,
+    borderWidth: p.borderWidth,
+    borderRadius: p.borderRadius,
+    borderColor: p.borderColor,
     overflow: "hidden" as const,
   };
 

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

@@ -1,63 +1,22 @@
 import React from "react";
 import { z } from "zod";
 import { View } from "react-native";
+import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import { UIElement } from "../types";
-import { RenderContext } from "./shared";
+import { RenderContext, dim } from "./shared";
 
-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(),
 });
 
 type StackUIElement = Extract<UIElement, { type: "YStack" | "XStack" }>;
@@ -69,35 +28,37 @@ type Props = {
 };
 
 export const StackElementComponent = ({ element, ctx, parentType }: Props): React.ReactElement => {
+  const p = element.props;
   return (
     <View
       style={{
         flexDirection: element.type === "XStack" ? "row" : "column",
-        alignSelf: element.props.alignSelf,
-        alignItems: element.props.alignItems,
-        gap: element.props.gap,
-        padding: element.props.padding,
-        paddingHorizontal: element.props.paddingHorizontal,
-        paddingVertical: element.props.paddingVertical,
-        margin: element.props.margin,
-        marginHorizontal: element.props.marginHorizontal,
-        marginVertical: element.props.marginVertical,
-        flex: element.props.flex,
-        width: element.props.width,
-        height: element.props.height,
-        minWidth: element.props.minWidth,
-        maxWidth: element.props.maxWidth,
-        minHeight: element.props.minHeight,
-        maxHeight: element.props.maxHeight,
-        flexShrink: element.props.flexShrink ?? (parentType === "XStack" ? 1 : undefined),
-        flexWrap: element.props.flexWrap,
-        justifyContent: element.props.justifyContent,
-        backgroundColor: element.props.backgroundColor,
-        borderWidth: element.props.borderWidth,
-        borderRadius: element.props.borderRadius,
-        borderColor: element.props.borderColor,
-        overflow: element.props.overflow,
-        opacity: element.props.opacity,
+        gap: p.gap,
+        flex: p.flex,
+        flexShrink: p.flexShrink ?? (parentType === "XStack" ? 1 : undefined),
+        flexGrow: p.flexGrow,
+        flexWrap: p.flexWrap,
+        alignSelf: p.alignSelf,
+        alignItems: p.alignItems,
+        justifyContent: p.justifyContent,
+        width: dim(p.width),
+        height: dim(p.height),
+        minWidth: p.minWidth,
+        maxWidth: p.maxWidth,
+        minHeight: p.minHeight,
+        maxHeight: p.maxHeight,
+        padding: p.padding,
+        paddingHorizontal: p.paddingHorizontal,
+        paddingVertical: p.paddingVertical,
+        margin: p.margin,
+        marginHorizontal: p.marginHorizontal,
+        marginVertical: p.marginVertical,
+        backgroundColor: p.backgroundColor,
+        borderWidth: p.borderWidth,
+        borderRadius: p.borderRadius,
+        borderColor: p.borderColor,
+        overflow: p.overflow,
+        opacity: p.opacity,
       }}
     >
       {ctx.renderChildren(element.children, element.type)}