@developer_tribe/react-builder 0.1.25 → 0.1.27

package/src/assets/samples/getSamples.ts

@@ -32,10 +32,14 @@ export function getBasicSamples(): Project[] {
 }
 
 export function getOnboardSamples(): Project[] {
-  return [
+  const legacySamples = [
     vpnOnboard1 as Project,
     vpnOnboard2 as Project,
     vpnOnboard3 as Project,
     vpnOnboard4 as Project,
   ];
+  legacySamples.forEach((sample) => {
+    sample.data = novaToJson(sample);
+  });
+  return legacySamples;
 }

package/src/build-components/Button/Button.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import type { ButtonComponentProps } from './ButtonProps.generated';
+import useDefaults from '../useNode';
 
 function Button({ node }: ButtonComponentProps) {
+  node = useDefaults(node);
   return String(node?.type ?? 'button');
 }
 

package/src/build-components/Carousel/Carousel.tsx

@@ -2,8 +2,10 @@ import React from 'react';
 import type { CarouselComponentProps } from './CarouselProps.generated';
 import RenderNode from '../RenderNode.generated';
 import { isCarouselItem } from '../../utils/isCarousel';
+import useDefaults from '../useNode';
 
 function Carousel({ node }: CarouselComponentProps) {
+  node = useDefaults(node);
   // Ensure children are carouselItems
   const renderChildren = () => {
     if (Array.isArray(node.children)) {

package/src/build-components/CarouselButtons/CarouselButtons.tsx

@@ -1,8 +1,10 @@
 import React, { useContext } from 'react';
 import type { CarouselButtonsComponentProps } from './CarouselButtonsProps.generated';
 import { carouselContext } from '../CarouselProvider/CarouselProvider';
+import useDefaults from '../useNode';
 
 function CarouselButtons({ node }: CarouselButtonsComponentProps) {
+  node = useDefaults(node);
   const emblaApi = useContext(carouselContext);
   const buttonTypes = node.attributes?.buttonType || [
     'previous_button',

package/src/build-components/CarouselDots/CarouselDots.tsx

@@ -1,8 +1,10 @@
 import React, { useContext, useEffect, useState } from 'react';
 import type { CarouselDotsComponentProps } from './CarouselDotsProps.generated';
 import { carouselContext } from '../CarouselProvider/CarouselProvider';
+import useDefaults from '../useNode';
 
 function CarouselDots({ node }: CarouselDotsComponentProps) {
+  node = useDefaults(node);
   const dotType = node.attributes?.dotType || 'normal_dot';
   const emblaApi = useContext(carouselContext);
   const [selectedIndex, setSelectedIndex] = useState(0);

package/src/build-components/CarouselItem/CarouselItem.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { CarouselItemComponentProps } from './CarouselItemProps.generated';
 import { RenderNode } from '../..';
+import useDefaults from '../useNode';
 
 export function CarouselItem({ node }: CarouselItemComponentProps) {
+  node = useDefaults(node);
   return (
     <div className="embla__slide" {...node.attributes}>
       {node.children && <RenderNode node={node.children} />}

package/src/build-components/CarouselProvider/CarouselProvider.tsx

@@ -2,9 +2,11 @@ import React, { createContext } from 'react';
 import type { CarouselProviderComponentProps } from './CarouselProviderProps.generated';
 import { RenderNode } from '../..';
 import useEmblaCarousel from 'embla-carousel-react';
+import useDefaults from '../useNode';
 
 export const carouselContext = createContext<any>(undefined);
 function CarouselProvider({ node }: CarouselProviderComponentProps) {
+  node = useDefaults(node);
   const [emblaRef, emblaApi] = useEmblaCarousel(node.attributes as any);
   return (
     <carouselContext.Provider value={emblaApi}>

package/src/build-components/Image/Image.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import type { ImageComponentProps } from './ImageProps.generated';
+import useDefaults from '../useNode';
 
 function Image({ node }: ImageComponentProps) {
+  node = useDefaults(node);
   return (
     <img
       key={node.key}

package/src/build-components/Onboard/Onboard.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { OnboardComponentProps } from './OnboardProps.generated';
 import Carousel from '../Carousel/Carousel';
+import useDefaults from '../useNode';
 
 function Onboard({ node }: OnboardComponentProps) {
+  node = useDefaults(node);
   return <Carousel node={{ ...node, type: 'carousel' } as any} />;
 }
 

package/src/build-components/OnboardButton/OnboardButton.tsx

@@ -2,8 +2,10 @@ import React, { useContext } from 'react';
 import type { OnboardButtonComponentProps } from './OnboardButtonProps.generated';
 import { onboardContext } from '../OnboardProvider/OnboardProvider';
 import { mainNodeContext } from '../../RenderMainNode';
+import useDefaults from '../useNode';
 
 function OnboardButton({ node }: OnboardButtonComponentProps) {
+  node = useDefaults(node);
   const { emblaApi } = useContext(onboardContext) ?? {};
   const { localication, defaultLanguage } = useContext(mainNodeContext) ?? {};
 

package/src/build-components/OnboardButtons/OnboardButtons.tsx

@@ -3,12 +3,14 @@ import type { Node } from '../../types/Node';
 import type { OnboardButtonsComponentProps } from './OnboardButtonsProps.generated';
 import { onboardContext } from '../OnboardProvider/OnboardProvider';
 import RenderNode from '../RenderNode.generated';
+import useDefaults from '../useNode';
 
 const THEME_COLORS = {
   ONBOARD_SEPARATOR_COLOR: '#E5E7EB',
 };
 
 function OnboardButtons({ node }: OnboardButtonsComponentProps) {
+  node = useDefaults(node);
   const ctx = useContext(onboardContext) ?? {};
   const emblaApi = ctx.emblaApi;
   const [selectedIndex, setSelectedIndex] = useState(ctx.selectedIndex ?? 0);

package/src/build-components/OnboardDot/OnboardDot.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { OnboardDotComponentProps } from './OnboardExpandingDotProps.generated';
 import CarouselDots from '../CarouselDots/CarouselDots';
+import useDefaults from '../useNode';
 
 function OnboardDot({ node }: OnboardDotComponentProps) {
+  node = useDefaults(node);
   return <CarouselDots node={{ ...node, type: 'carouselDots' } as any} />;
 }
 

package/src/build-components/OnboardFooter/OnboardFooter.tsx

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 import type { OnboardFooterComponentProps } from './OnboardFooterProps.generated';
 import { mainNodeContext } from '../../RenderMainNode';
+import useDefaults from '../useNode';
 
 type Segment =
   | { type: 'text'; value: string }
@@ -83,6 +84,7 @@ function buildSegments(
 }
 
 function OnboardFooter({ node }: OnboardFooterComponentProps) {
+  node = useDefaults(node);
   const { localication, defaultLanguage, setWarning } =
     useContext(mainNodeContext) ?? {};
   const t = (key?: string) =>

package/src/build-components/OnboardImage/OnboardImage.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { OnboardImageComponentProps } from './OnboardImageProps.generated';
 import Image from '../Image/Image';
+import useDefaults from '../useNode';
 
 function OnboardImage({ node }: OnboardImageComponentProps) {
+  node = useDefaults(node);
   return <Image node={{ ...node, type: 'image' } as any} />;
 }
 

package/src/build-components/OnboardItem/OnboardItem.tsx

@@ -3,8 +3,10 @@ import type { NodeData } from '../../types/Node';
 import type { OnboardItemComponentProps } from './OnboardItemProps.generated';
 import CarouselItem from '../CarouselItem/CarouselItem';
 import { isNodeArray } from '../../utils/analyseNode';
+import useDefaults from '../useNode';
 
 function OnboardItem({ node }: OnboardItemComponentProps) {
+  node = useDefaults(node);
   const children = useMemo(() => {
     return (
       (

package/src/build-components/OnboardProvider/OnboardProvider.tsx

@@ -10,9 +10,13 @@ import type { OnboardProviderComponentProps } from './OnboardProviderProps.gener
 import { mainNodeContext } from '../../RenderMainNode';
 import useEmblaCarousel from 'embla-carousel-react';
 import RenderNode from '../RenderNode.generated';
+import { renderPageContext } from '../../RenderPage';
+import useDefaults from '../useNode';
 
 export const onboardContext = createContext<any>(undefined);
 function OnboardProvider({ node }: OnboardProviderComponentProps) {
+  node = useDefaults(node);
+  const { device } = useContext(renderPageContext) ?? {};
   const [emblaRef, emblaApi] = useEmblaCarousel(node.attributes as any);
   const { theme, setWarning } = useContext(mainNodeContext) ?? {};
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -49,7 +53,15 @@ function OnboardProvider({ node }: OnboardProviderComponentProps) {
 
   return (
     <onboardContext.Provider value={{ emblaApi, selectedIndex }}>
-      <div className="carousel-provider">
+      <div
+        className="carousel-provider"
+        style={{
+          paddingTop: device?.insets?.[0],
+          paddingRight: device?.insets?.[1],
+          paddingBottom: device?.insets?.[2],
+          paddingLeft: device?.insets?.[3],
+        }}
+      >
         <div className="embla">
           <div className="embla__viewport" ref={emblaRef}>
             {node.children && <RenderNode node={children} />}

package/src/build-components/OnboardProvider/OnboardProviderProps.generated.ts

@@ -4,7 +4,10 @@ import type { NodeData } from '../../types/Node';
 
 export interface OnboardProviderPropsGenerated {
   child: string;
-  attributes: {};
+  attributes: {
+    theme?: string;
+    use_safe_area_inset?: boolean;
+  };
 }
 
 export interface OnboardProviderComponentProps {

package/src/build-components/OnboardProvider/pattern.json

@@ -4,6 +4,9 @@
   "pattern": {
     "type": "OnboardProvider",
     "children": "node",
-    "attributes": {}
+    "attributes": {
+      "theme": "string",
+      "use_safe_area_inset": "boolean"
+    }
   }
 }

package/src/build-components/OnboardSubtitle/OnboardSubtitle.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { OnboardSubtitleComponentProps } from './OnboardSubtitleProps.generated';
 import Text from '../Text/Text';
+import useDefaults from '../useNode';
 
 function OnboardSubtitle({ node }: OnboardSubtitleComponentProps) {
+  node = useDefaults(node);
   return (
     <Text
       node={

package/src/build-components/OnboardSubtitle/OnboardSubtitleProps.generated.ts

@@ -7,6 +7,7 @@ export interface OnboardSubtitlePropsGenerated {
   attributes: {
     color?: string;
     fontSize?: number;
+    textAlign?: 'left' | 'center' | 'right' | 'justify';
     fontWeight?:
       | 'normal'
       | 'bold'

package/src/build-components/OnboardSubtitle/pattern.json

@@ -7,6 +7,7 @@
     "attributes": {
       "color": "string",
       "fontSize": "number",
+      "textAlign": ["left", "center", "right", "justify"],
       "fontWeight": [
         "normal",
         "bold",
@@ -22,7 +23,7 @@
       ]
     }
   },
-  "default": {
+  "defaults": {
     "fontSize": 14,
     "fontWeight": "600"
   }

package/src/build-components/OnboardTitle/OnboardTitle.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { OnboardTitleComponentProps } from './OnboardTitleProps.generated';
 import Text from '../Text/Text';
+import useDefaults from '../useNode';
 
 function OnboardTitle({ node }: OnboardTitleComponentProps) {
+  node = useDefaults(node);
   return (
     <Text
       node={

package/src/build-components/OnboardTitle/pattern.json

@@ -22,7 +22,7 @@
       ]
     }
   },
-  "default": {
+  "defaults": {
     "fontSize": 24,
     "fontWeight": "700"
   }

package/src/build-components/Text/Text.tsx

@@ -1,8 +1,10 @@
 import React, { useContext } from 'react';
 import type { TextComponentProps } from './TextProps.generated';
 import { mainNodeContext } from '../../RenderMainNode';
+import useDefaults from '../useNode';
 
 function Text({ node }: TextComponentProps) {
+  node = useDefaults(node);
   const { localication, defaultLanguage } = useContext(mainNodeContext) ?? {};
   const keyOrText: string = node.children as string;
   return (

package/src/build-components/View/View.tsx

@@ -5,6 +5,7 @@ import type {
 } from './ViewProps.generated';
 import RenderNode from '../RenderNode.generated';
 import { Node } from '../../types/Node';
+import useDefaults from '../useNode';
 
 function mapAttributesToStyle(
   attributes: ViewPropsGenerated['attributes'],
@@ -48,6 +49,7 @@ function mapAttributesToStyle(
 }
 
 export function View({ node }: ViewComponentProps) {
+  node = useDefaults(node);
   return (
     <div
       style={mapAttributesToStyle(node.attributes ?? {})}

package/src/build-components/index.ts

@@ -2,8 +2,6 @@
 
 export { default as RenderNode } from './RenderNode.generated';
 
-export { getDefaults } from './getDefaults';
-
 export type {
   ButtonPropsGenerated,
   ButtonComponentProps,

package/src/build-components/useNode.ts

@@ -0,0 +1,15 @@
+import { NodeData, NodeDefaultAttribute } from '../types/Node';
+import { getDefaultsForType } from '../utils/patterns';
+
+export default function useNode<
+  T extends NodeDefaultAttribute = NodeDefaultAttribute,
+>(node: NodeData<T>): NodeData<T> {
+  const type = node?.type;
+  const defaults = getDefaultsForType(type) as Partial<T> | undefined;
+  if (!defaults) return node;
+  const mergedAttributes: T = {
+    ...(defaults as T),
+    ...((node.attributes as T) ?? ({} as T)),
+  };
+  return { ...node, attributes: mergedAttributes };
+}

package/src/index.ts

@@ -17,9 +17,11 @@ export { getOnboardSamples } from './assets/samples/getSamples';
 export { PreviewConfig } from './types/PreviewConfig';
 export { RenderPage } from './RenderPage';
 export { RenderMainNode } from './RenderMainNode';
+export { DeviceMockFrame } from './DeviceMockFrame';
 export { novaToJson } from './utils/novaToJson';
 export type { Localication } from './types/PreviewConfig';
 export { getDevices } from './utils/getDevices';
 export type { Device } from './types/Device';
 export { AttributesEditor };
 export * from './build-components/index';
+export { default as useNode } from './build-components/useNode';

package/src/types/Device.ts

@@ -4,6 +4,27 @@ export interface Device {
   width: number;
   height: number;
   type: 'phone' | 'tablet';
+  /**
+   * Optional physical corner radius of the device screen area in CSS pixels.
+   * Used only for visual preview rounding; has no effect on layout calculations.
+   */
+  radius?: number;
+  /**
+   * Insets in CSS pixels in the order: [top, right, bottom, left]
+   * Represents safe area or system UI overlaps (status bar, home indicator, etc.).
+   */
+  insets?: [number, number, number, number];
+  /**
+   * Navigation bar style depending on platform.
+   * - iOS: 'none' | 'homeIndicator' | 'tabBar' (visual reference only)
+   * - Android: 'threeButtons' | 'gesture' | 'none'
+   */
+  navigationBarType?:
+    | 'none'
+    | 'homeIndicator' // iOS
+    | 'tabBar' // iOS (for previewing tab bar overlap if desired)
+    | 'threeButtons' // Android classic nav bar
+    | 'gesture'; // Android gesture navigation
   /**
    * Relative importance for generic targeting and display ordering.
    * 1 = highest importance, 100 = lowest importance

package/src/types/Node.ts

@@ -1,14 +1,4 @@
-export type NodeDefaultAttribute = Record<
-  string,
-  | boolean
-  | string
-  | number
-  | null
-  | undefined
-  | string[]
-  | Record<string, unknown>
-  | Array<Record<string, unknown>>
->;
+export type NodeDefaultAttribute = Record<string, unknown>;
 
 export type Node<T = NodeDefaultAttribute> =
   | null
@@ -23,4 +13,5 @@ export interface NodeData<T = Record<string, unknown>> {
   children: Node<Record<string, unknown>>;
   attributes?: T;
   key?: string;
+  isMain?: boolean;
 }

package/src/types/Project.ts

@@ -5,7 +5,7 @@ export interface ProjectBase<T> {
   name: string;
   version: string;
   data: T;
-  previewConfig: PreviewConfig;
+  previewConfig?: PreviewConfig;
 }
 
 export interface Project extends ProjectBase<Node> {}

package/src/utils/novaToJson.ts

@@ -26,6 +26,8 @@ function onboardNovaToJson(nova: ProjectBase<unknown>): Node {
 
   const providerNode: NodeData = {
     type: 'OnboardProvider',
+    isMain: true,
+    key: (nova?.data as any)?.data?.key,
     children: [
       carouselNode,
       // Place dots above buttons in visual order
@@ -35,6 +37,11 @@ function onboardNovaToJson(nova: ProjectBase<unknown>): Node {
     ],
     attributes: {
       theme: (nova?.data as any)?.theme,
+      // forward safe area inset preference; default to true when absent
+      use_safe_area_inset:
+        (attributes as any)?.use_safe_area_inset !== undefined
+          ? (attributes as any)?.use_safe_area_inset
+          : true,
     },
   };
 
@@ -88,17 +95,45 @@ function buildCarouselItem(
     if (comp?.layout === 'title-layout') {
       const title = comp?.attributes?.title_localization_key || '';
       const color = comp?.attributes?.title_color || undefined;
+      const { fontSize: titleFontSize, fontWeight: titleFontWeight } =
+        extractTextStyleAttributesFromComponent(comp);
       children.push({
         type: 'OnboardTitle',
-        attributes: color ? { color } : undefined,
+        attributes:
+          color || titleFontSize || titleFontWeight
+            ? {
+                ...(color ? { color } : {}),
+                ...(typeof titleFontSize === 'number'
+                  ? { fontSize: titleFontSize }
+                  : {}),
+                ...(titleFontWeight ? { fontWeight: titleFontWeight } : {}),
+              }
+            : undefined,
         children: title,
       });
     } else if (comp?.layout === 'subtitle-layout') {
       const subtitle = comp?.attributes?.subtitle_localization_key || '';
       const color = comp?.attributes?.subtitle_color || undefined;
+      const {
+        fontSize: subtitleFontSize,
+        textAlign: subtitleTextAlign,
+        fontWeight: subtitleFontWeight,
+      } = extractTextStyleAttributesFromComponent(comp);
       children.push({
         type: 'OnboardSubtitle',
-        attributes: color ? { color } : undefined,
+        attributes:
+          color || subtitleFontSize || subtitleTextAlign || subtitleFontWeight
+            ? {
+                ...(color ? { color } : {}),
+                ...(typeof subtitleFontSize === 'number'
+                  ? { fontSize: subtitleFontSize }
+                  : {}),
+                ...(subtitleTextAlign ? { textAlign: subtitleTextAlign } : {}),
+                ...(subtitleFontWeight
+                  ? { fontWeight: subtitleFontWeight }
+                  : {}),
+              }
+            : undefined,
         children: subtitle,
       });
     } else if (comp?.layout === 'image-layout') {
@@ -114,13 +149,20 @@ function buildCarouselItem(
             ? rawHeight
             : undefined;
 
+      // derive resizeMode from is_bg_image and try to extract borderRadius from styles
+      const isBgImage = Boolean(comp?.attributes?.is_bg_image);
+      const imageStyle = extractViewStyleAttributesFromComponent(comp);
+
       if (src) {
         children.push({
           type: 'OnboardImage',
           attributes: {
             src,
             ...(height ? { height } : {}),
-            resizeMode: 'contain',
+            resizeMode: isBgImage ? 'cover' : 'contain',
+            ...(typeof imageStyle.borderRadius === 'number'
+              ? { borderRadius: imageStyle.borderRadius }
+              : {}),
           },
           children: undefined as unknown as Node,
         } as unknown as NodeData);
@@ -229,6 +271,127 @@ function buildCarouselItem(
   };
 }
 
+//@eslint-disable-next-line @typescript-eslint/no-explicit-any
+function extractTextStyleAttributesFromComponent(comp: any): {
+  fontSize?: number;
+  textAlign?: 'left' | 'center' | 'right' | 'justify';
+  fontWeight?:
+    | 'normal'
+    | 'bold'
+    | '100'
+    | '200'
+    | '300'
+    | '400'
+    | '500'
+    | '600'
+    | '700'
+    | '800'
+    | '900';
+} {
+  const result: {
+    fontSize?: number;
+    textAlign?: 'left' | 'center' | 'right' | 'justify';
+    fontWeight?:
+      | 'normal'
+      | 'bold'
+      | '100'
+      | '200'
+      | '300'
+      | '400'
+      | '500'
+      | '600'
+      | '700'
+      | '800'
+      | '900';
+  } = {};
+
+  //@eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const stylesRoot = (comp?.attributes?.styles || []) as any[];
+  if (!Array.isArray(stylesRoot) || stylesRoot.length === 0) return result;
+
+  const allowedAligns = new Set(['left', 'center', 'right', 'justify']);
+  const allowedWeights = new Set([
+    'normal',
+    'bold',
+    '100',
+    '200',
+    '300',
+    '400',
+    '500',
+    '600',
+    '700',
+    '800',
+    '900',
+  ]);
+
+  for (const s of stylesRoot) {
+    if (s?.layout !== 'style-layout') continue;
+    //@eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const nested = (s?.attributes?.styles || []) as any[];
+    if (!Array.isArray(nested)) continue;
+    for (const st of nested) {
+      if (st?.layout !== 'Styles') continue;
+      const type = st?.attributes?.type;
+      if (type !== 'textStyle') continue;
+      const style = st?.attributes?.style || {};
+
+      const rawFontSize = style?.fontSize;
+      if (typeof rawFontSize === 'number' && Number.isFinite(rawFontSize)) {
+        result.fontSize = rawFontSize;
+      } else if (typeof rawFontSize === 'string') {
+        const n = Number.parseInt(rawFontSize, 10);
+        if (Number.isFinite(n)) result.fontSize = n;
+      }
+
+      const align = style?.textAlign;
+      if (typeof align === 'string' && allowedAligns.has(align)) {
+        result.textAlign = align as typeof result.textAlign;
+      }
+
+      const rawWeight = style?.fontWeight;
+      let normalizedWeight: string | undefined;
+      if (typeof rawWeight === 'number' && Number.isFinite(rawWeight)) {
+        normalizedWeight = String(rawWeight);
+      } else if (typeof rawWeight === 'string') {
+        normalizedWeight = rawWeight;
+      }
+      if (normalizedWeight && allowedWeights.has(normalizedWeight)) {
+        result.fontWeight = normalizedWeight as typeof result.fontWeight;
+      }
+    }
+  }
+
+  return result;
+}
+
+//@eslint-disable-next-line @typescript-eslint/no-explicit-any
+function extractViewStyleAttributesFromComponent(comp: any): {
+  borderRadius?: number;
+} {
+  const result: { borderRadius?: number } = {};
+  //@eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const stylesRoot = (comp?.attributes?.styles || []) as any[];
+  if (!Array.isArray(stylesRoot) || stylesRoot.length === 0) return result;
+  for (const s of stylesRoot) {
+    if (s?.layout !== 'style-layout') continue;
+    //@eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const nested = (s?.attributes?.styles || []) as any[];
+    if (!Array.isArray(nested)) continue;
+    for (const st of nested) {
+      if (st?.layout !== 'Styles') continue;
+      const style = st?.attributes?.style || {};
+      const rawBr = style?.borderRadius;
+      if (typeof rawBr === 'number' && Number.isFinite(rawBr)) {
+        result.borderRadius = rawBr;
+      } else if (typeof rawBr === 'string') {
+        const n = Number.parseInt(rawBr, 10);
+        if (Number.isFinite(n)) result.borderRadius = n;
+      }
+    }
+  }
+  return result;
+}
+
 function mapDotsFromGeneralComponents(generalComponents: any[]): Node | null {
   const dots = generalComponents.find((gc) => gc?.layout === 'dots-layout');
   if (!dots) return null;