@developer_tribe/react-builder 1.0.3 → 1.0.5

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

@@ -5,6 +5,10 @@ import useNode from '../useNode';
 import { useLogRender } from '../../utils/useLogRender';
 import { extractViewStyle } from '../../utils/extractViewStyle';
 import { useRenderStore } from '../../store';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
+import { parseColor } from '../../utils/parseColor';
+import { parseSize } from '../../size-matters';
 
 function OnboardDot({ node }: OnboardDotComponentProps) {
   useLogRender('OnboardDot');
@@ -17,10 +21,14 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
   const dotType = node.attributes?.dotType || 'normal_dot';
   const GHOST_DOT_DARK_COLOR = '#E4E5E7';
   const GHOST_DOT_LIGHT_COLOR = '#F7F7F9';
-  const { appConfig, projectColors } = useRenderStore((s) => ({
-    appConfig: s.appConfig,
-    projectColors: s.projectColors,
-  }));
+  const { previewMode, current, appConfig, projectColors } = useRenderStore(
+    (s) => ({
+      previewMode: s.previewMode,
+      current: s.current,
+      appConfig: s.appConfig,
+      projectColors: s.projectColors,
+    }),
+  );
   const isDark = appConfig.theme === 'dark';
 
   // OnboardDot specific attributes
@@ -28,23 +36,43 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
     ? GHOST_DOT_DARK_COLOR
     : GHOST_DOT_LIGHT_COLOR;
   const inactiveDotOpacity = node.attributes?.inactive_dot_opacity ?? 0.3;
-  const dotStyle = node.attributes?.dot_style;
-  const containerStyle = node.attributes?.container_style;
   const activeDotColor = node.attributes?.active_dot_color;
+  const resolvedActiveDotColor = useMemo(
+    () => parseColor(activeDotColor, { appConfig, projectColors }),
+    [activeDotColor, appConfig, projectColors],
+  );
 
-  const style = useMemo(() => {
-    const baseStyle = extractViewStyle(node, { appConfig, projectColors });
-    // Merge container_style if provided
-    if (containerStyle) {
-      try {
-        const parsedContainerStyle = JSON.parse(containerStyle);
-        Object.assign(baseStyle, parsedContainerStyle);
-      } catch (e) {
-        // Invalid JSON, ignore
-      }
-    }
-    return baseStyle;
-  }, [node, containerStyle, appConfig, projectColors]);
+  const baseStyle = useMemo(() => {
+    let innerStyle = extractViewStyle(node, { appConfig, projectColors });
+    delete innerStyle.flexDirection;
+    return innerStyle;
+  }, [node, appConfig, projectColors]);
+  const isSelected = isNodeSelected({ previewMode, current, node });
+  const style = useMergedStyle(
+    baseStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
+  const expandingDotWidthRaw = node.attributes?.expanding_dot_width;
+  const expandingDotWidthOverride = useMemo(() => {
+    const parsed = parseSize(expandingDotWidthRaw);
+    if (parsed === undefined) return undefined;
+
+    // `parseSize` may return number (px) or a string (e.g. "50%").
+    const cssWidth =
+      typeof parsed === 'number'
+        ? `${parsed}px`
+        : typeof parsed === 'string'
+          ? parsed
+          : undefined;
+
+    if (!cssWidth) return undefined;
+
+    return {
+      // Controls the actual dot diameter (`.embla__dot:after`).
+      ['--embla-dot-size' as any]: cssWidth,
+    } as React.CSSProperties;
+  }, [expandingDotWidthRaw]);
+  const containerStyle = useMergedStyle(style, expandingDotWidthOverride);
 
   const onboardApi = useContext(onboardContext);
   const emblaApi = onboardApi?.emblaApi;
@@ -72,34 +100,24 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
     };
   }, [emblaApi]);
 
-  // Parse dot_style if provided
-  const parsedDotStyle = useMemo(() => {
-    if (!dotStyle) return {};
-    try {
-      return JSON.parse(dotStyle);
-    } catch (e) {
-      return {};
-    }
-  }, [dotStyle]);
-
   return (
     <div
       attribute-name={attributeName}
       attribute-key={attributeKey}
       className={`embla__dots embla__dots--${dotType}`}
-      style={style}
+      style={containerStyle}
     >
       {scrollSnaps.map((snap, index) => {
-        const isSelected = selectedIndex === index;
+        const isDotSelected = selectedIndex === index;
         const dotStyles: React.CSSProperties = {
-          ...parsedDotStyle,
-          opacity: isSelected ? 1 : inactiveDotOpacity,
+          opacity: isDotSelected ? 1 : inactiveDotOpacity,
         };
 
-        if (activeDotColor && isSelected) {
-          dotStyles.color = activeDotColor;
-        } else if (!isSelected) {
-          dotStyles.color = inactiveDotColor;
+        if (resolvedActiveDotColor && isDotSelected) {
+          // Style the actual visual dot (rendered via `.embla__dot:after`) using a CSS variable.
+          (dotStyles as any)['--embla-dot-color'] = resolvedActiveDotColor;
+        } else if (!isDotSelected) {
+          (dotStyles as any)['--embla-dot-color'] = inactiveDotColor;
         }
 
         return (
@@ -108,10 +126,12 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
             onClick={() => {
               emblaApi?.scrollTo(snap);
             }}
-            className={`embla__dot ${isSelected ? 'embla__dot--selected' : ''}`}
+            className={`embla__dot ${isDotSelected ? 'embla__dot--selected' : ''}`}
             style={dotStyles}
+            aria-label={`Go to slide ${index + 1}`}
+            aria-current={isDotSelected ? 'true' : undefined}
           >
-            {isSelected ? '●' : '○'}
+            {/* Dot visuals are rendered via CSS (`.embla__dot:after`). */}
           </button>
         );
       })}

package/src/build-components/OnboardDot/OnboardDotProps.generated.ts

@@ -35,7 +35,12 @@ export interface OnboardDotPropsGenerated {
     backgroundColor?: string;
     borderRadius?: string;
     width?: string;
+    minWidth?: string;
+    maxWidth?: string;
     height?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;
@@ -44,9 +49,7 @@ export interface OnboardDotPropsGenerated {
     zIndex?: number;
     dotType?: DotTypeOptionType;
     inactive_dot_opacity?: number;
-    expanding_dot_width?: number;
-    dot_style?: string;
-    container_style?: string;
+    expanding_dot_width?: string;
     active_dot_color?: string;
   };
 }

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

@@ -15,9 +15,7 @@
         "liquid_like"
       ],
       "inactive_dot_opacity": "number",
-      "expanding_dot_width": "number",
-      "dot_style": "string",
-      "container_style": "string",
+      "expanding_dot_width": "size",
       "active_dot_color": "color",
       "flexDirection": "never",
       "alignItems": "never",
@@ -50,26 +48,12 @@
         "specialCategory": null,
         "sort": 3
       },
-      "dot_style": {
-        "label": "Dot Style",
-        "description": "Custom style for each dot.",
-        "category": "style",
-        "specialCategory": null,
-        "sort": 4
-      },
-      "container_style": {
-        "label": "Container Style",
-        "description": "Style for the dot wrapper.",
-        "category": "style",
-        "specialCategory": null,
-        "sort": 5
-      },
       "active_dot_color": {
         "label": "Active Dot Color",
         "description": "Color of the active dot.",
         "category": "style",
         "specialCategory": null,
-        "sort": 6
+        "sort": 4
       }
     }
   }

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

@@ -6,6 +6,8 @@ import { parseSize } from '../../size-matters';
 import { extractTextStyle } from '../../utils/extractTextStyle';
 import { extractViewStyle } from '../../utils/extractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
+import { isNodeSelected } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
 
 type Segment =
   | { type: 'text'; value: string }
@@ -92,19 +94,23 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
   node = useNode(node);
   const attributeName =
     (node as any)?.sourceType ?? node.type ?? 'OnboardFooter';
-  const { appConfig, projectColors } = useRenderStore((s) => ({
-    appConfig: s.appConfig,
-    projectColors: s.projectColors,
-  }));
+  const { appConfig, projectColors, previewMode, current } = useRenderStore(
+    (s) => ({
+      appConfig: s.appConfig,
+      projectColors: s.projectColors,
+      previewMode: s.previewMode,
+      current: s.current,
+    }),
+  );
   const { localication, defaultLanguage } = appConfig;
   const t = (key?: string) =>
     key ? (localication?.[defaultLanguage ?? 'en']?.[key] ?? key) : '';
 
   const text = t(node?.attributes?.textLocalizationKey);
-  const textStyle: React.CSSProperties = extractTextStyle(node, {
-    appConfig,
-    projectColors,
-  });
+  const textStyle = useMemo(
+    () => extractTextStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
   const viewStyle = useMemo(
     () => extractViewStyle(node, { appConfig, projectColors }),
     [node, appConfig, projectColors],
@@ -116,19 +122,26 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
   });
 
   const paddingHorizontal = parseSize(node?.attributes?.paddingHorizontal);
+  const layoutStyle = useMemo<React.CSSProperties>(
+    () => ({
+      paddingLeft: paddingHorizontal,
+      paddingRight: paddingHorizontal,
+      textAlign: 'center',
+    }),
+    [paddingHorizontal],
+  );
+
+  const isSelected = isNodeSelected({ previewMode, current, node });
+  const baseStyle = useMergedStyle(viewStyle, textStyle);
+  const paddedStyle = useMergedStyle(baseStyle, layoutStyle);
   const generatedId = useId();
   const attributeKey = node.key ?? generatedId;
   return (
     <div
       attribute-name={attributeName}
       attribute-key={attributeKey}
-      style={{
-        ...viewStyle,
-        ...textStyle,
-        paddingLeft: paddingHorizontal,
-        paddingRight: paddingHorizontal,
-        textAlign: 'center',
-      }}
+      className={isSelected ? 'rb-node-selected' : undefined}
+      style={paddedStyle}
     >
       {!!text &&
         (() => {

package/src/build-components/OnboardFooter/OnboardFooterProps.generated.ts

@@ -59,7 +59,12 @@ export interface OnboardFooterPropsGenerated {
     backgroundColor?: string;
     borderRadius?: string;
     width?: string;
+    minWidth?: string;
+    maxWidth?: string;
     height?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;

package/src/build-components/OnboardImage/OnboardImageProps.generated.ts

@@ -26,7 +26,6 @@ export interface OnboardImagePropsGenerated {
     width?: string;
     height?: string;
     resizeMode?: ResizeModeOptionType;
-    borderRadius?: string;
     scrollable?: boolean;
     flexDirection?: FlexDirectionOptionType;
     alignItems?: AlignItemsOptionType;
@@ -46,6 +45,12 @@ export interface OnboardImagePropsGenerated {
     marginLeft?: string;
     marginRight?: string;
     backgroundColor?: string;
+    borderRadius?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;

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

@@ -1,7 +1,7 @@
 import React, { useId, useMemo } from 'react';
 import type { OnboardItemComponentProps } from './OnboardItemProps.generated';
 import useNode from '../useNode';
-import { RenderNode } from '../..';
+import RenderNode from '../RenderNode.generated';
 import { useRenderStore } from '../../store';
 import { parseSize } from '../../size-matters';
 import { useLogRender } from '../../utils/useLogRender';
@@ -13,9 +13,6 @@ function OnboardItem({ node }: OnboardItemComponentProps) {
   const generatedId = useId();
   const attributeName = (node as any)?.sourceType ?? node.type ?? 'OnboardItem';
   const attributeKey = node.key ?? generatedId;
-  const flexDirection = node.attributes?.flexDirection;
-  const display = node.attributes?.display;
-  const paddingHorizontal = parseSize(node.attributes?.paddingHorizontal);
   const { appConfig, projectColors } = useRenderStore((s) => ({
     appConfig: s.appConfig,
     projectColors: s.projectColors,
@@ -29,14 +26,7 @@ function OnboardItem({ node }: OnboardItemComponentProps) {
       attribute-name={attributeName}
       attribute-key={attributeKey}
       className="embla__slide"
-      style={{
-        ...viewStyle,
-        gap: parseSize(node.attributes?.gap),
-        flexDirection,
-        display,
-        paddingRight: paddingHorizontal,
-        paddingLeft: paddingHorizontal,
-      }}
+      style={viewStyle}
     >
       {node.children && <RenderNode node={node.children} />}
     </div>

package/src/build-components/OnboardItem/OnboardItemProps.generated.ts

@@ -43,7 +43,12 @@ export interface OnboardItemPropsGenerated {
     backgroundColor?: string;
     borderRadius?: string;
     width?: string;
+    minWidth?: string;
+    maxWidth?: string;
     height?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;

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

@@ -23,7 +23,6 @@ function OnboardProvider({ node }: OnboardProviderComponentProps) {
   const generatedId = useId();
   const attributeName =
     (node as any)?.sourceType ?? node.type ?? 'OnboardProvider';
-  const device = useRenderStore((s) => s.device);
   const { appConfig, projectColors } = useRenderStore((s) => ({
     appConfig: s.appConfig,
     projectColors: s.projectColors,
@@ -92,13 +91,7 @@ function OnboardProvider({ node }: OnboardProviderComponentProps) {
         attribute-name={attributeName}
         attribute-key={attributeKey}
         className="carousel-provider"
-        style={{
-          ...viewStyle,
-          paddingTop: node.attributes?.paddingTop,
-          paddingRight: node.attributes?.paddingRight,
-          paddingBottom: node.attributes?.paddingBottom,
-          paddingLeft: node.attributes?.paddingLeft,
-        }}
+        style={viewStyle}
       >
         <div className="embla">
           <div className="embla__viewport" ref={emblaRef}>

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

@@ -42,14 +42,18 @@ export interface OnboardProviderPropsGenerated {
     backgroundColor?: string;
     borderRadius?: never;
     width?: string;
+    minWidth?: string;
+    maxWidth?: string;
     height?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;
     left?: string;
     right?: string;
     zIndex?: number;
-    use_safe_area_inset?: boolean;
   };
 }
 

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

@@ -6,55 +6,45 @@
     "children": "node",
     "extends": "View",
     "attributes": {
-      "use_safe_area_inset": "boolean",
       "borderRadius": "never"
     }
   },
   "defaults": {
-    "paddingTop": 0,
-    "paddingRight": 0,
-    "paddingBottom": 8,
-    "paddingLeft": 0
+    "width": "100%",
+    "height": "100%"
   },
   "meta": {
     "desiredParent": ["root"],
     "label": "Onboard Provider",
     "description": "Provides shared settings for onboarding.",
     "attributes": {
-      "use_safe_area_inset": {
-        "label": "Use Safe Area Inset",
-        "description": "Adds safe area padding.",
-        "category": "container",
-        "specialCategory": null,
-        "sort": 2
-      },
       "paddingTop": {
         "label": "Padding Top",
         "description": "Top padding for the provider.",
         "category": "container",
         "specialCategory": "padding",
-        "sort": 3
+        "sort": 1
       },
       "paddingRight": {
         "label": "Padding Right",
         "description": "Right padding for the provider.",
         "category": "container",
         "specialCategory": "padding",
-        "sort": 4
+        "sort": 2
       },
       "paddingBottom": {
         "label": "Padding Bottom",
         "description": "Bottom padding for the provider.",
         "category": "container",
         "specialCategory": "padding",
-        "sort": 5
+        "sort": 3
       },
       "paddingLeft": {
         "label": "Padding Left",
         "description": "Left padding for the provider.",
         "category": "container",
         "specialCategory": "padding",
-        "sort": 6
+        "sort": 4
       }
     }
   }

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

@@ -59,7 +59,12 @@ export interface OnboardSubtitlePropsGenerated {
     backgroundColor?: string;
     borderRadius?: string;
     width?: string;
+    minWidth?: string;
+    maxWidth?: string;
     height?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;

package/src/build-components/OnboardTitle/OnboardTitleProps.generated.ts

@@ -59,7 +59,12 @@ export interface OnboardTitlePropsGenerated {
     backgroundColor?: string;
     borderRadius?: string;
     width?: string;
+    minWidth?: string;
+    maxWidth?: string;
     height?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;

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

@@ -0,0 +1,47 @@
+import React, { useId, useMemo } from 'react';
+import type { PaywallBackgroundComponentProps } from './PaywallBackgroundProps.generated';
+import useNode from '../useNode';
+import { useRenderStore } from '../../store';
+import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useLogRender } from '../../utils/useLogRender';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
+
+function PaywallBackground({ node }: PaywallBackgroundComponentProps) {
+  useLogRender('PaywallBackground');
+  node = useNode(node);
+
+  const generatedId = useId();
+  const attributeName = node.type ?? 'PaywallBackground';
+  const attributeKey = node.key ?? generatedId;
+
+  const { previewMode, current, appConfig, projectColors } = useRenderStore(
+    (s) => ({
+      previewMode: s.previewMode,
+      current: s.current,
+      appConfig: s.appConfig,
+      projectColors: s.projectColors,
+    }),
+  );
+
+  const baseStyle = useMemo(
+    () => extractViewStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
+
+  const isSelected = isNodeSelected({ previewMode, current, node });
+  const style = useMergedStyle(
+    baseStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
+
+  return (
+    <div
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      style={style}
+    />
+  );
+}
+
+export default React.memo(PaywallBackground);

package/src/build-components/PaywallBackground/PaywallBackgroundProps.generated.ts

@@ -0,0 +1,63 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+export type FlexDirectionOptionType = 'row' | 'column';
+export type AlignItemsOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'stretch'
+  | 'baseline';
+export type JustifyContentOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
+
+export interface PaywallBackgroundPropsGenerated {
+  child: string;
+  attributes: {
+    scrollable?: boolean;
+    flexDirection?: FlexDirectionOptionType;
+    alignItems?: AlignItemsOptionType;
+    justifyContent?: JustifyContentOptionType;
+    gap?: string;
+    padding?: string;
+    paddingHorizontal?: string;
+    paddingVertical?: string;
+    paddingTop?: string;
+    paddingBottom?: string;
+    paddingLeft?: string;
+    paddingRight?: string;
+    margin?: string;
+    marginVertical?: string;
+    marginTop?: string;
+    marginBottom?: string;
+    marginLeft?: string;
+    marginRight?: string;
+    backgroundColor?: string;
+    borderRadius?: string;
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    height?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    flex?: number;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
+    [key: string]: string | number | boolean | undefined;
+  };
+}
+
+export interface PaywallBackgroundComponentProps {
+  node: NodeData<PaywallBackgroundPropsGenerated['attributes']>;
+}

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

@@ -0,0 +1,16 @@
+{
+  "schemaVersion": 1,
+  "allowUnknownAttributes": true,
+  "pattern": {
+    "type": "PaywallBackground",
+    "children": "never",
+    "extends": "View",
+    "attributes": {}
+  },
+  "meta": {
+    "desiredParent": [">PaywallProvider"],
+    "label": "Paywall Background",
+    "description": "Paywall Background component.",
+    "attributes": {}
+  }
+}