@rocapine/react-native-onboarding-ui 1.6.0 → 1.8.0

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

@@ -0,0 +1,105 @@
+import React from "react";
+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 { getTextStyle } from "../../../Theme/helpers";
+
+export type RiveElementProps = BaseBoxProps & {
+  url: string;
+  autoplay?: boolean;
+  fit?: "Contain" | "Cover" | "Fill" | "FitWidth" | "FitHeight" | "None" | "ScaleDown" | "Layout";
+  alignment?: "TopLeft" | "TopCenter" | "TopRight" | "CenterLeft" | "Center" | "CenterRight" | "BottomLeft" | "BottomCenter" | "BottomRight";
+  artboardName?: string;
+  stateMachineName?: string;
+};
+
+export const RiveElementPropsSchema = BaseBoxPropsSchema.extend({
+  url: z.string().min(1, "url must not be empty"),
+  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(),
+  stateMachineName: z.string().optional(),
+});
+
+type RiveUIElement = Extract<UIElement, { type: "Rive" }>;
+
+let RiveElementComponent: React.ComponentType<{ element: RiveUIElement; riveStyle: object }> | null = null;
+try {
+  const riveModule = require("rive-react-native");
+  const Rive = riveModule.default;
+  const { Fit, Alignment } = riveModule;
+  RiveElementComponent = ({ element, riveStyle }: { element: RiveUIElement; riveStyle: object }) => {
+    return (
+      <Rive
+        url={element.props.url}
+        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}
+        stateMachineName={element.props.stateMachineName}
+        style={riveStyle}
+        onError={console.error}
+      />
+    );
+  };
+} catch {
+  // rive-react-native not installed - will show fallback if Rive is used
+}
+
+type Props = {
+  element: RiveUIElement;
+  ctx: RenderContext;
+};
+
+export const RiveElementRenderer = ({ element, ctx }: Props): React.ReactElement => {
+  const { theme } = ctx;
+  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,
+    overflow: "hidden" as const,
+  };
+
+  if (!RiveElementComponent) {
+    return (
+      <View style={[wrapperStyle, styles.mediaFallback, { backgroundColor: theme.colors.neutral.lowest }]}>
+        <Text style={[styles.mediaFallbackText, getTextStyle(theme, "caption"), { color: theme.colors.text.tertiary }]}>
+          Install rive-react-native to render Rive animations.
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={wrapperStyle}>
+      <RiveElementComponent element={element} riveStyle={styles.fill} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  fill: {
+    width: "100%",
+    height: "100%",
+  },
+  mediaFallback: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  mediaFallbackText: {
+    textAlign: "center",
+    paddingHorizontal: 16,
+  },
+});

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

@@ -0,0 +1,103 @@
+import React from "react";
+import { z } from "zod";
+import { View } from "react-native";
+import { UIElement } from "../types";
+import { RenderContext } from "./shared";
+
+export type StackElementProps = {
+  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";
+  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({
+  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(),
+  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" }>;
+
+type Props = {
+  element: StackUIElement;
+  ctx: RenderContext;
+  parentType?: "XStack" | "YStack";
+};
+
+export const StackElementComponent = ({ element, ctx, parentType }: Props): React.ReactElement => {
+  return (
+    <View
+      style={{
+        flexDirection: element.type === "XStack" ? "row" : "column",
+        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,
+        alignItems: element.props.alignItems,
+        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,
+      }}
+    >
+      {ctx.renderChildren(element.children, element.type)}
+    </View>
+  );
+};

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

@@ -0,0 +1,95 @@
+import React from "react";
+import { z } from "zod";
+import { Text } from "react-native";
+import { UIElement } from "../types";
+import { RenderContext, interpolate } from "./shared";
+
+export type TextElementProps = {
+  content: string;
+  mode?: "plain" | "expression";
+  fontSize?: number;
+  fontWeight?: string;
+  fontFamily?: string;
+  color?: string;
+  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({
+  content: z.string(),
+  mode: z.enum(["plain", "expression"]).optional(),
+  fontSize: z.number().optional(),
+  fontWeight: z.string().optional(),
+  fontFamily: z.string().optional(),
+  color: z.string().optional(),
+  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" }>;
+
+type Props = {
+  element: TextUIElement;
+  ctx: RenderContext;
+  parentType?: "XStack" | "YStack";
+};
+
+export const TextElementComponent = ({ element, ctx, parentType }: Props): React.ReactElement => {
+  const { theme, variables } = ctx;
+  const content =
+    element.props.mode === "expression"
+      ? interpolate(element.props.content, variables)
+      : element.props.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,
+      }}
+    >
+      {content}
+    </Text>
+  );
+};

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

@@ -0,0 +1,113 @@
+import React, { useEffect } from "react";
+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 { getTextStyle } from "../../../Theme/helpers";
+
+export type VideoElementProps = BaseBoxProps & {
+  url: string;
+  autoPlay?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+  controls?: boolean;
+};
+
+export const VideoElementPropsSchema = BaseBoxPropsSchema.extend({
+  url: z.string().min(1, "url must not be empty"),
+  autoPlay: z.boolean().optional(),
+  loop: z.boolean().optional(),
+  muted: z.boolean().optional(),
+  controls: z.boolean().optional(),
+});
+
+type VideoUIElement = Extract<UIElement, { type: "Video" }>;
+
+let VideoElementComponent: React.ComponentType<{ element: VideoUIElement; style: object }> | null = null;
+try {
+  const { VideoView, useVideoPlayer } = require("expo-video");
+  VideoElementComponent = ({ element, style }: { element: VideoUIElement; style: object }) => {
+    const player = useVideoPlayer(element.props.url, (p: any) => {
+      p.loop = element.props.loop ?? false;
+      p.muted = element.props.muted ?? true;
+      if (element.props.autoPlay) p.play();
+    });
+
+    useEffect(() => {
+      player.loop = element.props.loop ?? false;
+      player.muted = element.props.muted ?? true;
+      if (element.props.autoPlay) {
+        player.play();
+      } else {
+        player.pause();
+      }
+    }, [element.props.loop, element.props.muted, element.props.autoPlay]);
+
+    return (
+      <VideoView
+        player={player}
+        style={style}
+        allowsFullscreen={false}
+        nativeControls={element.props.controls ?? false}
+      />
+    );
+  };
+} catch {
+  // expo-video not installed
+}
+
+type Props = {
+  element: VideoUIElement;
+  ctx: RenderContext;
+};
+
+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,
+    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,
+    overflow: "hidden" as const,
+  };
+
+  if (!VideoElementComponent) {
+    return (
+      <View style={[wrapperStyle, styles.mediaFallback, { backgroundColor: theme.colors.neutral.lowest }]}>
+        <Text style={[styles.mediaFallbackText, getTextStyle(theme, "caption"), { color: theme.colors.text.tertiary }]}>
+          Install expo-video to render videos.
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={wrapperStyle}>
+      <VideoElementComponent element={element} style={styles.fill} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  fill: {
+    width: "100%",
+    height: "100%",
+  },
+  mediaFallback: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  mediaFallbackText: {
+    textAlign: "center",
+    paddingHorizontal: 16,
+  },
+});

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

@@ -0,0 +1,61 @@
+import React from "react";
+import { UIElement } from "../types";
+import { RenderContext } from "./shared";
+import { StackElementComponent } from "./StackElement";
+import { TextElementComponent } from "./TextElement";
+import { ImageElementComponent } from "./ImageElement";
+import { LottieElementComponent } from "./LottieElement";
+import { RiveElementRenderer } from "./RiveElement";
+import { IconElementComponent } from "./IconElement";
+import { VideoElementRenderer } from "./VideoElement";
+import { InputElementComponent } from "./InputElement";
+import { RadioGroupComponent } from "./RadioGroupElement";
+import { ButtonElementComponent } from "./ButtonElement";
+
+export const renderElement = (
+  element: UIElement,
+  ctx: RenderContext,
+  parentType?: "XStack" | "YStack"
+): React.ReactNode => {
+  if (element.type === "YStack" || element.type === "XStack") {
+    return <StackElementComponent key={element.id} element={element} ctx={ctx} parentType={parentType} />;
+  }
+
+  if (element.type === "Text") {
+    return <TextElementComponent key={element.id} element={element} ctx={ctx} parentType={parentType} />;
+  }
+
+  if (element.type === "Image") {
+    return <ImageElementComponent key={element.id} element={element} ctx={ctx} />;
+  }
+
+  if (element.type === "Lottie") {
+    return <LottieElementComponent key={element.id} element={element} ctx={ctx} />;
+  }
+
+  if (element.type === "Rive") {
+    return <RiveElementRenderer key={element.id} element={element} ctx={ctx} />;
+  }
+
+  if (element.type === "Icon") {
+    return <IconElementComponent key={element.id} element={element} ctx={ctx} />;
+  }
+
+  if (element.type === "Video") {
+    return <VideoElementRenderer key={element.id} element={element} ctx={ctx} />;
+  }
+
+  if (element.type === "Input") {
+    return <InputElementComponent key={element.id} element={element} ctx={ctx} />;
+  }
+
+  if (element.type === "RadioGroup") {
+    return <RadioGroupComponent key={element.id} element={element} ctx={ctx} />;
+  }
+
+  if (element.type === "Button") {
+    return <ButtonElementComponent key={element.id} element={element} ctx={ctx} />;
+  }
+
+  return null;
+};

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

@@ -0,0 +1,15 @@
+import React from "react";
+import { UIElement } from "../types";
+import { Theme } from "../../../Theme/types";
+import { ComposableVariableEntry } from "../../../Provider/OnboardingProgressProvider";
+
+export type RenderContext = {
+  theme: Theme;
+  variables: Record<string, ComposableVariableEntry>;
+  setVariable: (key: string, entry: ComposableVariableEntry) => void;
+  onContinue: () => void;
+  renderChildren: (elements: UIElement[], parentType: "XStack" | "YStack") => React.ReactNode;
+};
+
+export const interpolate = (template: string, variables: Record<string, ComposableVariableEntry>): string =>
+  template.replace(/\{\{([^}]+?)\}\}/g, (_, key) => variables[key]?.label ?? variables[key]?.value ?? "");