@developer_tribe/react-builder 1.2.24 → 1.2.25

package/src/build-components/patterns.generated.ts

@@ -6,10 +6,10 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'BIcon',
+      title: 'title',
+      description: 'description',
       children: 'never',
       attributes: {
-        title: 'title',
-        description: 'description',
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         style: {
@@ -479,6 +479,8 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'BackgroundImage',
+      title: 'title',
+      description: 'description',
       children: 'never',
       attributes: {
         scrollable: 'boolean',
@@ -531,8 +533,6 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
-        title: 'title',
-        description: 'description',
         src: 'string',
         resizeMode: ['cover', 'contain', 'stretch', 'center'],
       },
@@ -892,6 +892,8 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'Button',
+      title: 'title',
+      description: 'description',
       children: 'string',
       attributes: {
         scrollable: 'boolean',
@@ -959,8 +961,6 @@ export const patterns = [
             '900',
           ],
         },
-        title: 'title',
-        description: 'description',
       },
     },
     meta: {
@@ -1310,6 +1310,8 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'Carousel',
+      title: 'title',
+      description: 'description',
       children: 'node',
       attributes: {
         scrollable: 'boolean',
@@ -1362,8 +1364,6 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
-        title: 'title',
-        description: 'description',
         loop: 'boolean',
         dragFree: 'boolean',
         align: ['start', 'center', 'end'],
@@ -1691,6 +1691,8 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'CarouselButtons',
+      title: 'title',
+      description: 'description',
       children: 'never',
       attributes: {
         scrollable: 'boolean',
@@ -1743,8 +1745,6 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
-        title: 'title',
-        description: 'description',
         buttonType: ['previous_button', 'next_button', 'skip_button'],
         skipNumber: 'number',
       },
@@ -2085,6 +2085,8 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'CarouselDots',
+      title: 'title',
+      description: 'description',
       children: 'never',
       attributes: {
         scrollable: 'boolean',
@@ -2137,8 +2139,6 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
-        title: 'title',
-        description: 'description',
         dotType: [
           'expanding_dot',
           'normal_dot',
@@ -2478,6 +2478,8 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'CarouselItem',
+      title: 'title',
+      description: 'description',
       children: 'node',
       attributes: {
         scrollable: 'boolean',
@@ -2530,8 +2532,6 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
-        title: 'title',
-        description: 'description',
       },
     },
     meta: {
@@ -2856,6 +2856,8 @@ export const patterns = [
     schemaVersion: 1,
     pattern: {
       type: 'CarouselProvider',
+      title: 'title',
+      description: 'description',
       children: 'node',
       attributes: {
         scrollable: 'boolean',
@@ -2908,8 +2910,6 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
-        title: 'title',
-        description: 'description',
       },
       defaults: { style: { width: '100%', height: '100%' } },
     },
@@ -3238,11 +3238,11 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'CountDown',
+      title: 'title',
+      description: 'description',
       children: 'never',
       attributes: {
         count: 'number',
-        title: 'title',
-        description: 'description',
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         style: {
@@ -3693,10 +3693,10 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'Counter',
+      title: 'title',
+      description: 'description',
       children: 'never',
       attributes: {
-        title: 'title',
-        description: 'description',
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         style: {
@@ -4148,6 +4148,8 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'Image',
+      title: 'title',
+      description: 'description',
       children: 'never',
       attributes: {
         scrollable: 'boolean',
@@ -4201,11 +4203,9 @@ export const patterns = [
           zIndex: 'number',
           resizeMode: ['cover', 'contain', 'stretch', 'center'],
         },
-        title: 'title',
-        description: 'description',
         src: 'string',
       },
-      defaults: { resizeMode: 'contain' },
+      defaults: { style: { resizeMode: 'contain' } },
     },
     meta: {
       desiredParent: ['all'],
@@ -4528,7 +4528,6 @@ export const patterns = [
       },
     },
     defaults: {
-      resizeMode: 'contain',
       style: {
         flexDirection: 'column',
         position: 'relative',
@@ -4536,6 +4535,7 @@ export const patterns = [
         alignSelf: 'flex-start',
         flexGrow: 0,
         flexShrink: 0,
+        resizeMode: 'contain',
       },
     },
     types: {},
@@ -4544,6 +4544,8 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'Main',
+      title: 'title',
+      description: 'description',
       children: 'node',
       attributes: {
         scrollable: 'boolean',
@@ -4596,8 +4598,6 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
-        title: 'title',
-        description: 'description',
         useSafeAreaView: 'boolean',
       },
     },
@@ -4937,6 +4937,8 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'NavigationBarColor',
+      title: 'title',
+      description: 'description',
       children: 'never',
       attributes: {
         scrollable: 'boolean',
@@ -4989,8 +4991,6 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
-        title: 'title',
-        description: 'description',
       },
     },
     meta: {
@@ -5316,6 +5316,8 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'Onboard',
+      title: 'title',
+      description: 'description',
       children: 'node',
       attributes: {
         scrollable: 'boolean',
@@ -5368,8 +5370,6 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
-        title: 'title',
-        description: 'description',
       },
     },
     meta: {
@@ -5695,6 +5695,8 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'OnboardButton',
+      title: 'title',
+      description: 'description',
       children: 'never',
       attributes: {
         scrollable: 'boolean',
@@ -5747,8 +5749,6 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
-        title: 'title',
-        description: 'description',
         labelKey: 'string',
         button_text_color: 'color',
         animation: [
@@ -6138,6 +6138,8 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'OnboardButtons',
+      title: 'title',
+      description: 'description',
       children: 'node',
       attributes: {
         scrollable: 'boolean',
@@ -6190,8 +6192,6 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
-        title: 'title',
-        description: 'description',
         buttonType: ['previous_button', 'next_button', 'skip_button'],
         skipNumber: 'number',
         buttons_direction: ['row', 'column'],
@@ -6589,6 +6589,8 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'OnboardDot',
+      title: 'title',
+      description: 'description',
       children: 'never',
       attributes: {
         scrollable: 'boolean',
@@ -6641,8 +6643,6 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
-        title: 'title',
-        description: 'description',
         dotType: [
           'expanding_dot',
           'normal_dot',
@@ -7024,10 +7024,10 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'OnboardFooter',
+      title: 'title',
+      description: 'description',
       children: 'node',
       attributes: {
-        title: 'title',
-        description: 'description',
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         style: {
@@ -7532,10 +7532,10 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'OnboardImage',
+      title: 'title',
+      description: 'description',
       children: 'node',
       attributes: {
-        title: 'title',
-        description: 'description',
         src: 'string',
         style: {
           resizeMode: ['cover', 'contain', 'stretch', 'center'],
@@ -7591,7 +7591,7 @@ export const patterns = [
         video_url: 'string',
         lottie: 'string',
       },
-      defaults: { resizeMode: 'contain' },
+      defaults: { style: { resizeMode: 'contain' } },
     },
     meta: {
       desiredParent: ['>OnboardProvider', '>OnboardItem', '!=Onboard'],
@@ -7928,8 +7928,8 @@ export const patterns = [
       },
     },
     defaults: {
-      resizeMode: 'contain',
       style: {
+        resizeMode: 'contain',
         flexDirection: 'column',
         position: 'relative',
         zIndex: 1,
@@ -7944,6 +7944,8 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'OnboardItem',
+      title: 'title',
+      description: 'description',
       children: 'node',
       attributes: {
         scrollable: 'boolean',
@@ -7996,8 +7998,6 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
-        title: 'title',
-        description: 'description',
         display: ['flex', 'block'],
         gap: 'size',
         flexDirection: ['row', 'column'],
@@ -8334,6 +8334,8 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'OnboardProvider',
+      title: 'title',
+      description: 'description',
       children: 'node',
       attributes: {
         scrollable: 'boolean',
@@ -8386,8 +8388,6 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
-        title: 'title',
-        description: 'description',
         theme: ['light', 'dark', 'all'],
         borderRadius: 'never',
       },
@@ -8720,10 +8720,10 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'OnboardSubtitle',
+      title: 'title',
+      description: 'description',
       children: 'string',
       attributes: {
-        title: 'title',
-        description: 'description',
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         style: {
@@ -9167,10 +9167,10 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'OnboardTitle',
+      title: 'title',
+      description: 'description',
       children: 'string',
       attributes: {
-        title: 'title',
-        description: 'description',
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         style: {
@@ -9615,10 +9615,10 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'PaywallBackground',
+      title: 'title',
+      description: 'description',
       children: 'never',
       attributes: {
-        title: 'title',
-        description: 'description',
         src: 'string',
         resizeMode: ['cover', 'contain', 'stretch', 'center'],
         scrollable: 'boolean',
@@ -10028,10 +10028,10 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'PaywallCloseButton',
+      title: 'title',
+      description: 'description',
       children: 'never',
       attributes: {
-        title: 'title',
-        description: 'description',
         iconType: 'iconType',
         size: 'number',
         strokeWidth: 'number',
@@ -10506,11 +10506,11 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'PaywallCounter',
+      title: 'title',
+      description: 'description',
       children: 'never',
       attributes: {
         count: 'number',
-        title: 'title',
-        description: 'description',
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         style: {
@@ -10962,6 +10962,8 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'PaywallOptions',
+      title: 'title',
+      description: 'description',
       children: 'node',
       attributes: {
         scrollable: 'boolean',
@@ -11014,8 +11016,6 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
-        title: 'title',
-        description: 'description',
       },
     },
     meta: {
@@ -11343,6 +11343,8 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'PaywallProvider',
+      title: 'title',
+      description: 'description',
       children: 'node',
       attributes: {
         scrollable: 'boolean',
@@ -11395,8 +11397,6 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
-        title: 'title',
-        description: 'description',
         delay: 'number',
       },
     },
@@ -11733,10 +11733,10 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'PaywallSubscribeButton',
+      title: 'title',
+      description: 'description',
       children: 'string',
       attributes: {
-        title: 'title',
-        description: 'description',
         style: {
           color: 'color',
           fontSize: 'size',
@@ -12157,6 +12157,8 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'RadioButton',
+      title: 'title',
+      description: 'description',
       children: 'never',
       attributes: {
         scrollable: 'boolean',
@@ -12209,8 +12211,6 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
-        title: 'title',
-        description: 'description',
         selected: 'boolean',
         color: 'color',
         size: 'number',
@@ -12559,10 +12559,10 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'Separator',
+      title: 'title',
+      description: 'description',
       children: 'never',
       attributes: {
-        title: 'title',
-        description: 'description',
         style: {
           backgroundColor: 'color',
           width: 'size',
@@ -12614,6 +12614,8 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'StatusBarColor',
+      title: 'title',
+      description: 'description',
       children: 'never',
       attributes: {
         scrollable: 'boolean',
@@ -12666,8 +12668,6 @@ export const patterns = [
           right: 'size',
           zIndex: 'number',
         },
-        title: 'title',
-        description: 'description',
       },
     },
     meta: {
@@ -12993,6 +12993,8 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'Text',
+      title: 'title',
+      description: 'description',
       children: 'string',
       attributes: {
         scrollable: 'boolean',
@@ -13050,8 +13052,6 @@ export const patterns = [
           fontWeight: 'fontWeight',
           textAlign: ['left', 'center', 'right', 'justify'],
         },
-        title: 'title',
-        description: 'description',
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
       },
@@ -13440,6 +13440,8 @@ export const patterns = [
     schemaVersion: 2,
     pattern: {
       type: 'View',
+      title: 'title',
+      description: 'description',
       children: 'node',
       attributes: {
         scrollable: 'boolean',

package/src/components/AttributesEditorPanel.tsx

@@ -1,3 +1,4 @@
+import { useCallback, useRef } from 'react';
 import { AttributesEditor } from '../AttributesEditor';
 import type { Node, NodeData } from '../types/Node';
 import type { ProjectColors } from '../types/Project';
@@ -11,6 +12,32 @@ interface AttributesEditorPanelProps {
   projectColors?: ProjectColors;
 }
 
+function replaceNode(root: Node, target: Node, next: Node): Node {
+  if (root === target) return next;
+  if (root === null || root === undefined) return root;
+  if (typeof root === 'string') return root;
+  if (Array.isArray(root)) {
+    let changed = false;
+    const arr = root.map((item) => {
+      const r = replaceNode(item, target, next);
+      if (r !== item) changed = true;
+      return r;
+    });
+    return changed ? arr : root;
+  }
+  const data = root as NodeData;
+  if ('children' in data) {
+    const prev = data.children;
+    const replaced = Array.isArray(prev)
+      ? prev.map((c: Node) => replaceNode(c, target, next))
+      : replaceNode(prev as Node, target, next);
+    if (replaced !== prev) {
+      return { ...data, children: replaced } as Node;
+    }
+  }
+  return root;
+}
+
 export function AttributesEditorPanel({
   attributes,
   onChange,
@@ -21,6 +48,27 @@ export function AttributesEditorPanel({
     current: s.current,
     setCurrent: s.setCurrent,
   }));
+
+  // Stable refs so the onChange callback doesn't change identity every render.
+  const attributesRef = useRef(attributes);
+  attributesRef.current = attributes;
+  const currentRef = useRef(current);
+  currentRef.current = current;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+
+  const handleAttributesChange = useCallback(
+    (next: Node) => {
+      const root = attributesRef.current as Node;
+      const target = currentRef.current;
+      if (!target) return;
+      const updated = replaceNode(root, target, next);
+      onChangeRef.current(updated);
+      setCurrent(next);
+    },
+    [setCurrent],
+  );
+
   if (!current) return null;
 
   const currentKey =
@@ -33,38 +81,6 @@ export function AttributesEditorPanel({
       : null;
   const nodeForEditor = resolvedCurrent ?? current;
 
-  function replaceNode(root: Node, target: Node, next: Node): Node {
-    if (root === target) return next;
-    if (root === null || root === undefined) return root;
-    if (typeof root === 'string') return root;
-    if (Array.isArray(root)) {
-      let changed = false;
-      const arr = root.map((item) => {
-        const r = replaceNode(item, target, next);
-        if (r !== item) changed = true;
-        return r;
-      });
-      return changed ? arr : root;
-    }
-    const data = root as NodeData;
-    if ('children' in data) {
-      const prev = data.children;
-      const replaced = Array.isArray(prev)
-        ? prev.map((c: Node) => replaceNode(c, target, next))
-        : replaceNode(prev as Node, target, next);
-      if (replaced !== prev) {
-        return { ...data, children: replaced } as Node;
-      }
-    }
-    return root;
-  }
-  const handleAttributesChange = (next: Node) => {
-    const root = attributes as Node;
-    const updated = replaceNode(root, current, next);
-    onChange(updated);
-    setCurrent(next);
-  };
-
   return (
     <div className="attributes-editor-panel">
       <AttributesEditor

package/src/components/Builder.tsx

@@ -603,7 +603,10 @@ function getNodeLabel(node: Node): string {
   if (isNodeNullOrUndefined(node)) return 'Empty';
   if (isNodeString(node)) return node as string;
   if (isNodeArray(node)) return 'Collection';
-  return (node as NodeData<NodeDefaultAttribute>).type ?? 'Node';
+  const nodeData = node as NodeData<NodeDefaultAttribute>;
+  const title = (nodeData.attributes as Record<string, unknown>)?.title;
+  if (typeof title === 'string' && title.trim().length > 0) return title;
+  return nodeData.type ?? 'Node';
 }
 
 function findNodePath(root: Node, target: Node): Node[] {

package/src/index.ts

@@ -13,7 +13,7 @@
 // Types
 export type { TargetedScreenSize } from './types/TargetedScreenSize';
 export type { Node, NodeData, NodeDefaultAttribute } from './types/Node';
-export type { Project, ProjectColors } from './types/Project';
+export type { Project, ProjectColors, ProjectMeta } from './types/Project';
 export type { Device } from './types/Device';
 export type { AppConfig, Localication } from './types/PreviewConfig';
 export { defaultAppConfig } from './types/PreviewConfig';