@developer_tribe/react-builder 1.2.13 → 1.2.15

package/dist/utils/getDefaultProject.d.ts

@@ -0,0 +1,4 @@
+import type { Project } from '../types/Project';
+type GetDefaultProjectArgs = Partial<Project>;
+export declare function getDefaultProject(overrides?: GetDefaultProjectArgs): Project;
+export {};

package/dist/utils/patterns.d.ts

@@ -5,7 +5,10 @@ export type AttributeMeta = {
     category?: 'style' | 'container' | 'other' | string;
     specialCategory?: 'padding' | 'margin' | 'offset' | null | string;
     sort?: number;
+    /** Legacy typo kept for backwards compatibility with older patterns. */
     preferedScale?: 's' | 'vs' | 'f' | '%' | '' | string;
+    /** Correct spelling. Prefer this in new/updated patterns. */
+    preferredScale?: 's' | 'vs' | 'f' | '%' | '' | string;
     /**
      * When true, this attribute should remain visible even if the component
      * metadata requests hiding all attributes (e.g. `meta.hideAllAttributes`).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developer_tribe/react-builder",
-  "version": "1.2.13",
+  "version": "1.2.15",
   "license": "UNLICENSED",
   "type": "module",
   "restricted": true,
@@ -108,6 +108,7 @@
   },
   "dependencies": {
     "axios": "^1.12.2",
+    "moment": "^2.30.1",
     "react-toastify": "^11.0.5"
   },
   "resolutions": {

package/scripts/prebuild/utils/createComponentTsx.js

@@ -18,7 +18,7 @@ export async function createComponentTsx(componentDir, componentName) {
     `  node = useNode(node);\n` +
     `  return null;\n` +
     `}\n\n` +
-    `export default React.memo(${componentName});\n`;
+    `export { ${componentName} };\n`;
   const formatted = await formatWithPrettier(content);
   await fs.writeFile(filePath, formatted, 'utf8');
 }

package/scripts/prebuild/utils/createGeneratedProps.js

@@ -12,13 +12,17 @@ const isPrimitive = t =>
   t === 'size' ||
   t === 'fontFamily' ||
   t === 'fontWeight' ||
-  t === 'iconType';
+  t === 'iconType' ||
+  t === 'title' ||
+  t === 'description';
 const toTsPrimitive = t =>
   t === 'color' ||
   t === 'size' ||
   t === 'iconType' ||
   t === 'fontFamily' ||
-  t === 'fontWeight'
+  t === 'fontWeight' ||
+  t === 'title' ||
+  t === 'description'
     ? 'string'
     : t;
 const getArrayItem = t =>

package/scripts/prebuild/utils/createRenderNodeGenerated.js

@@ -10,13 +10,34 @@ export async function createRenderNodeGenerated(validated, paths) {
     validated.find(v => v.componentName === 'Text')?.patternJson?.pattern
       ?.type ?? 'Text';
 
+  async function resolveComponentImport(componentName) {
+    const filePath = path.join(
+      COMPONENTS_ROOT,
+      componentName,
+      `${componentName}.tsx`
+    );
+    const content = await fs.readFile(filePath, 'utf8').catch(() => '');
+    const hasNamedExport =
+      new RegExp(`export\\s+function\\s+${componentName}\\s*\\(`).test(
+        content
+      ) ||
+      new RegExp(`export\\s*\\{[^}]*\\b${componentName}\\b[^}]*\\}`).test(
+        content
+      );
+    if (hasNamedExport) {
+      return `import { ${componentName} } from './${componentName}/${componentName}';`;
+    }
+    return `import ${componentName} from './${componentName}/${componentName}';`;
+  }
+
   // Build imports for all components discovered
-  const componentImports = validated
-    .map(
-      ({ componentName }) =>
-        `import ${componentName} from './${componentName}/${componentName}';`
+  const componentImports = (
+    await Promise.all(
+      validated.map(({ componentName }) =>
+        resolveComponentImport(componentName)
+      )
     )
-    .join('\n');
+  ).join('\n');
 
   // Import each component's generated prop type so we can build a strongly-typed node union
   const componentPropTypeImports = validated

package/scripts/prebuild/utils/validateAllComponentsOrThrow.js

@@ -135,7 +135,9 @@ async function validatePatternJson(componentDir, componentName) {
     t === 'size' ||
     t === 'fontFamily' ||
     t === 'fontWeight' ||
-    t === 'iconType';
+    t === 'iconType' ||
+    t === 'title' ||
+    t === 'description';
   const isNeverType = t => t === 'never';
   const hasCustomTypes = typeof data.types === 'object' && data.types != null;
   const isCustomType = t =>
@@ -354,8 +356,12 @@ async function validatePatternJson(componentDir, componentName) {
     const parentMeta = parentData?.meta ?? undefined;
     const childMeta = data?.meta ?? undefined;
 
-    const parentStyles = isPlainObject(parentMeta?.styles) ? parentMeta.styles : {};
-    const childStyles = isPlainObject(childMeta?.styles) ? childMeta.styles : {};
+    const parentStyles = isPlainObject(parentMeta?.styles)
+      ? parentMeta.styles
+      : {};
+    const childStyles = isPlainObject(childMeta?.styles)
+      ? childMeta.styles
+      : {};
     const mergedMetaStyles = { ...parentStyles, ...childStyles };
 
     const parentAttributesMeta = isPlainObject(parentMeta?.attributes)
@@ -364,7 +370,10 @@ async function validatePatternJson(componentDir, componentName) {
     const childAttributesMeta = isPlainObject(childMeta?.attributes)
       ? childMeta.attributes
       : {};
-    const mergedMetaAttributes = { ...parentAttributesMeta, ...childAttributesMeta };
+    const mergedMetaAttributes = {
+      ...parentAttributesMeta,
+      ...childAttributesMeta,
+    };
 
     const parentSpecialCategories = isPlainObject(parentMeta?.specialCategories)
       ? parentMeta.specialCategories
@@ -372,7 +381,10 @@ async function validatePatternJson(componentDir, componentName) {
     const childSpecialCategories = isPlainObject(childMeta?.specialCategories)
       ? childMeta.specialCategories
       : {};
-    const mergedSpecialCategories = { ...parentSpecialCategories, ...childSpecialCategories };
+    const mergedSpecialCategories = {
+      ...parentSpecialCategories,
+      ...childSpecialCategories,
+    };
 
     const mergedMeta =
       parentMeta || childMeta

package/scripts/prebuild/utils/validateExistingComponentTsx.js

@@ -21,20 +21,24 @@ export async function validateExistingComponentTsx(
     `function\\s+${componentName}\\s*\\(`
   ).test(content);
   const hasDeclaration = hasConstDeclaration || hasFunctionDeclaration;
-  const defaultExportMemo = new RegExp(
-    `export\\s+default\\s+React\\.memo\\(\\s*${componentName}\\s*\\)\\s*;?`
+
+  const hasNamedExport =
+    new RegExp(`export\\s+function\\s+${componentName}\\s*\\(`).test(content) ||
+    new RegExp(`export\\s*\\{[^}]*\\b${componentName}\\b[^}]*\\}`).test(
+      content
+    );
+  const hasDefaultExport = new RegExp(
+    `export\\s+default\\s+(React\\.memo\\(\\s*${componentName}\\s*\\)|${componentName})\\s*;?`
   ).test(content);
-  const usesMemo = /React\\.memo\(/.test(content) || defaultExportMemo;
 
   if (!hasDeclaration) {
     return fail(
       `${filePath} must declare component as 'const ${componentName}: React.FC = (...)' or 'function ${componentName}()'`
     );
   }
-  if (!usesMemo) {
-    return fail(`${filePath} must use React.memo`);
-  }
-  if (!defaultExportMemo) {
-    return fail(`${filePath} must default export React.memo(${componentName})`);
+  if (!hasNamedExport && !hasDefaultExport) {
+    return fail(
+      `${filePath} must export ${componentName} (named export preferred)`
+    );
   }
 }

package/src/AttributesEditor.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useEffect } from 'react';
 import type { AttributesEditorProps } from './attributes-editor/attributesEditorModelTypes';
 import { useLogRender } from './utils/useLogRender';
 import { AttributesEditorView } from './attributes-editor/AttributesEditorView';
@@ -7,7 +7,12 @@ import { useAttributesEditorModel } from './attributes-editor/useAttributesEdito
 export function AttributesEditor(props: AttributesEditorProps) {
   useLogRender('AttributesEditor');
   const model = useAttributesEditorModel(props);
-  console.log('model', model);
+  const titleValue = model.attributes?.title;
+  useEffect(() => {
+    if (typeof titleValue === 'string' && titleValue.length > 20) {
+      model.handleAttributeChange('title', titleValue.slice(0, 20));
+    }
+  }, [titleValue, model.handleAttributeChange]);
   return <AttributesEditorView {...model} />;
 }
 

package/src/RenderPage.tsx

@@ -84,30 +84,60 @@ export function RenderPage({
   const showEmptyState = isEmptyPreview(data);
 
   useEffect(() => {
+    console.info('[preview] RenderPage effect', {
+      previewMode,
+      forceRender,
+      hasRoot: !!previewRootRef.current,
+    });
+
     if (!previewMode) {
       return;
     }
 
     const root = previewRootRef.current;
-    if (!root) return;
+    if (!root) {
+      console.info('[preview] RenderPage effect skipped (no root)');
+      return;
+    }
+
+    console.info('[preview] RenderPage effect bound', {
+      rootTag: root.tagName,
+      rootClass: root.className,
+    });
 
     const handleClick = (event: MouseEvent) => {
       const target = event.target as HTMLElement | null;
+      console.info('[preview] click', {
+        target: target ? target.tagName : null,
+        className: target ? target.className : null,
+      });
+
       if (!target) return;
 
       // Ignore clicks on carousel dots to avoid interfering with navigation
       if (target.closest('.embla__dot')) {
+        console.info('[preview] click ignored (embla dot)');
         return;
       }
 
       const element = target.closest('[attribute-key]') as HTMLElement | null;
-      if (!element) return;
+      if (!element) {
+        console.info('[preview] click ignored (no attribute-key ancestor)');
+        return;
+      }
 
       const key = element.getAttribute('attribute-key');
 
-      if (!key) return;
+      if (!key) {
+        console.info('[preview] click ignored (no attribute-key value)');
+        return;
+      }
 
       const node = findNodeByKeyNested(data, key);
+      console.info('[preview] click resolved', {
+        key,
+        foundNode: !!node,
+      });
       setCurrent(node);
       onSelectNode?.(node);
     };
@@ -115,6 +145,7 @@ export function RenderPage({
     root.addEventListener('click', handleClick);
 
     return () => {
+      console.info('[preview] RenderPage effect cleanup');
       root.removeEventListener('click', handleClick);
     };
   }, [previewMode, data, onSelectNode, setCurrent, forceRender]); // forceRender: retrigger effect when we want to force a refresh (e.g. route change)

package/src/assets/meta.json

@@ -1,4 +1,4 @@
 {
   "supportedProjectVersion": "1.1.2",
-  "reactBuilderVersion": "1.2.12"
+  "reactBuilderVersion": "1.2.15"
 }

package/src/assets/samples/carousel-sample.json

@@ -13,7 +13,9 @@
         "attributes": {
           "loop": true,
           "align": "center",
-          "dragFree": true
+          "dragFree": true,
+          "description": "carousel element 1 in sample.",
+          "title": "carousel 1"
         },
         "children": [
           {
@@ -21,7 +23,9 @@
             "attributes": {
               "style": {
                 "minWidth": 0
-              }
+              },
+              "description": "carouselItem element 1 in sample.",
+              "title": "carouselItem 1"
             },
             "children": {
               "type": "view",
@@ -34,7 +38,9 @@
                   "gap": 14,
                   "height": "100%",
                   "justifyContent": "center"
-                }
+                },
+                "description": "view element 1 in sample.",
+                "title": "view 1"
               },
               "children": [
                 {
@@ -57,7 +63,9 @@
                       "fontWeight": "700",
                       "textAlign": "center",
                       "color": "#0f172a"
-                    }
+                    },
+                    "description": "text element 1 in sample.",
+                    "title": "text 1"
                   },
                   "children": "Welcome aboard"
                 },
@@ -69,7 +77,9 @@
                       "textAlign": "center",
                       "color": "#334155",
                       "paddingHorizontal": 8
-                    }
+                    },
+                    "description": "text element 2 in sample.",
+                    "title": "text 2"
                   },
                   "children": "Swipe through a beautiful, validated carousel sample with images."
                 }
@@ -81,7 +91,9 @@
             "attributes": {
               "style": {
                 "minWidth": 0
-              }
+              },
+              "description": "carouselItem element 2 in sample.",
+              "title": "carouselItem 2"
             },
             "children": {
               "type": "view",
@@ -94,7 +106,9 @@
                   "gap": 14,
                   "height": "100%",
                   "justifyContent": "center"
-                }
+                },
+                "description": "view element 2 in sample.",
+                "title": "view 2"
               },
               "children": [
                 {
@@ -117,7 +131,9 @@
                       "fontWeight": "700",
                       "textAlign": "center",
                       "color": "#0f172a"
-                    }
+                    },
+                    "description": "text element 3 in sample.",
+                    "title": "text 3"
                   },
                   "children": "Discover features"
                 },
@@ -129,7 +145,9 @@
                       "textAlign": "center",
                       "color": "#334155",
                       "paddingHorizontal": 8
-                    }
+                    },
+                    "description": "text element 4 in sample.",
+                    "title": "text 4"
                   },
                   "children": "Dots + buttons are included, and slide sizing comes from the carousel CSS."
                 }
@@ -141,7 +159,9 @@
             "attributes": {
               "style": {
                 "minWidth": 0
-              }
+              },
+              "description": "carouselItem element 3 in sample.",
+              "title": "carouselItem 3"
             },
             "children": {
               "type": "view",
@@ -154,7 +174,9 @@
                   "gap": 14,
                   "height": "100%",
                   "justifyContent": "center"
-                }
+                },
+                "description": "view element 3 in sample.",
+                "title": "view 3"
               },
               "children": [
                 {
@@ -177,7 +199,9 @@
                       "fontWeight": "700",
                       "textAlign": "center",
                       "color": "#0f172a"
-                    }
+                    },
+                    "description": "text element 5 in sample.",
+                    "title": "text 5"
                   },
                   "children": "Get started"
                 },
@@ -189,7 +213,9 @@
                       "textAlign": "center",
                       "color": "#334155",
                       "paddingHorizontal": 8
-                    }
+                    },
+                    "description": "text element 6 in sample.",
+                    "title": "text 6"
                   },
                   "children": "This sample stays within validation rules (no string flex shorthand)."
                 }
@@ -215,6 +241,10 @@
           "skipNumber": 3
         }
       }
-    ]
+    ],
+    "attributes": {
+      "description": "carouselProvider element 1 in sample.",
+      "title": "carouselProvider 1"
+    }
   }
 }

package/src/assets/samples/getSamples.ts

@@ -8,6 +8,7 @@ import unvalidatedCrashComponent1 from './unvalidated-crashcomponent1.json';
 import unmigratedBuilder1 from './unmigrated-builder1.json';
 import unmigratedBuilder1_1_1 from './unmigrated-builder-1.1.1.json';
 import paywall1 from './paywall-1.json';
+import paywall2 from './paywall-2.json';
 import vpnOnboard1 from './vpn-onboard-1.json';
 import vpnOnboard2 from './vpn-onboard-2.json';
 import vpnOnboard3 from './vpn-onboard-3.json';
@@ -43,6 +44,7 @@ export function getSamples(): Project[] {
     normalizeSample(unmigratedBuilder1),
     normalizeSample(unmigratedBuilder1_1_1),
     normalizeSample(paywall1),
+    normalizeSample(paywall2),
     ...onboardSamples,
   ];
 }
@@ -68,5 +70,5 @@ export function getOnboardSamples(): Project[] {
 }
 
 export function getPaywallSamples(): Project[] {
-  return [normalizeSample(paywall1)];
+  return [normalizeSample(paywall1), normalizeSample(paywall2)];
 }