@developer_tribe/react-builder 1.2.24 → 1.2.25

package/dist/pages/ProjectPage.d.ts

@@ -1,10 +1,10 @@
-import type { Project, ProjectColors } from '../types/Project';
+import type { Project, ProjectColors, ProjectMeta } from '../types/Project';
 import { AppConfig } from '../types/PreviewConfig';
 import type { LogLevel } from '../types/Project';
 import type { Fonts } from '../types/Fonts';
 export type ProjectPageProps = {
     project: Project;
-    onSaveProject: (project: Project) => void;
+    onSaveProject: (project: ProjectMeta) => void;
     appConfig?: AppConfig;
     logLevel?: LogLevel;
     projectColors?: ProjectColors;

package/dist/pages/projectPageUtils.d.ts

@@ -1,7 +1,13 @@
-import type { Project } from '../types/Project';
+import type { Project, ProjectMeta } from '../types/Project';
 import type { Node } from '../types/Node';
 export declare function resolveProjectForSave(args: {
     project: Project;
     overrideProject?: Project | null;
     data: Node;
 }): Project;
+/**
+ * Strips a full Project down to its essential persistence fields.
+ * Use before handing the project to onSaveProject so consumers only
+ * receive the canonical metadata (name, version, type, data).
+ */
+export declare function toProjectMeta(project: Project): ProjectMeta;

package/dist/types/Project.d.ts

@@ -24,6 +24,12 @@ export interface ProjectBase<T> {
 }
 export interface Project extends ProjectBase<Node> {
 }
+/**
+ * Lightweight subset of Project containing only the essential metadata
+ * needed for persistence (name, version, type, data).
+ * Excludes runtime/editor-only fields like appConfig and projectColors.
+ */
+export type ProjectMeta = Pick<Project, 'name' | 'version' | 'type' | 'data'>;
 export type LogLevel = 'NONE' | 'ERROR' | 'WARN' | 'INFO' | 'VERBOSE';
 export type LogSource = string;
 export interface LogEntry {

package/dist/utils/patterns.d.ts

@@ -41,6 +41,8 @@ type Pattern = {
     schemaVersion: number;
     pattern: {
         type: string;
+        title?: string;
+        description?: string;
         children: unknown;
         attributes?: Record<string, string | string[]>;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developer_tribe/react-builder",
-  "version": "1.2.24",
+  "version": "1.2.25",
   "license": "UNLICENSED",
   "type": "module",
   "restricted": true,

package/scripts/prebuild/utils/validateAllComponentsOrThrow.js

@@ -120,11 +120,20 @@ async function validatePatternJson(componentDir, componentName) {
       `[${componentName}] pattern.json -> 'pattern.children' must be one of: node | string | never`
     );
   }
-  if (typeof pattern.attributes !== 'object' || pattern.attributes == null) {
+  // pattern.attributes is optional – components that only declare title/description
+  // (now at pattern level) may have no extra attributes at all.
+  if (
+    Object.prototype.hasOwnProperty.call(pattern, 'attributes') &&
+    (typeof pattern.attributes !== 'object' || pattern.attributes == null)
+  ) {
     return fail(
-      `[${componentName}] pattern.json -> 'pattern.attributes' must be an object`
+      `[${componentName}] pattern.json -> 'pattern.attributes' must be an object (or omitted)`
     );
   }
+  // Normalise missing attributes to empty object for the rest of the validation
+  if (!pattern.attributes) {
+    pattern.attributes = {};
+  }
 
   // Helpers for validating custom types
   const isPrimitive = t =>

package/src/AttributesEditor.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import type { AttributesEditorProps } from './attributes-editor/attributesEditorModelTypes';
 import { useLogRender } from './utils/useLogRender';
 import { AttributesEditorView } from './attributes-editor/AttributesEditorView';
@@ -8,11 +8,22 @@ export function AttributesEditor(props: AttributesEditorProps) {
   useLogRender('AttributesEditor');
   const model = useAttributesEditorModel(props);
   const titleValue = model.attributes?.title;
+  const hasTitleField = model.hasTitleField;
+
+  // Keep a stable ref so the effect doesn't re-run when the callback
+  // reference changes (which happens every render due to unstable onChange prop).
+  const handleAttributeChangeRef = useRef(model.handleAttributeChange);
+  handleAttributeChangeRef.current = model.handleAttributeChange;
+
   useEffect(() => {
-    if (typeof titleValue === 'string' && titleValue.length > 20) {
-      model.handleAttributeChange('title', titleValue.slice(0, 20));
+    if (
+      hasTitleField &&
+      typeof titleValue === 'string' &&
+      titleValue.length > 20
+    ) {
+      handleAttributeChangeRef.current('title', titleValue.slice(0, 20));
     }
-  }, [titleValue, model.handleAttributeChange]);
+  }, [hasTitleField, titleValue]);
   return <AttributesEditorView {...model} />;
 }
 

package/src/assets/meta.json

@@ -1,4 +1,4 @@
 {
   "supportedProjectVersion": "1.1.2",
-  "reactBuilderVersion": "1.2.23"
+  "reactBuilderVersion": "1.2.24"
 }

package/src/assets/samples/paywall-app-delete-offer.json

@@ -68,7 +68,6 @@
             "type": "PaywallBackground",
             "attributes": {
               "src": "https://images.unsplash.com/photo-1496307042754-b4aa456c4a2d?auto=format&fit=crop&w=1200&q=80",
-              "resizeMode": "cover",
               "description": "Paywall background.",
               "title": "Paywall Background"
             },

package/src/assets/samples/paywall-app-open-offer.json

@@ -68,7 +68,6 @@
             "type": "PaywallBackground",
             "attributes": {
               "src": "https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=1200&q=80",
-              "resizeMode": "cover",
               "description": "Paywall background.",
               "title": "Paywall Background"
             },

package/src/assets/samples/paywall-back-offer.json

@@ -68,7 +68,6 @@
             "type": "PaywallBackground",
             "attributes": {
               "src": "https://images.unsplash.com/photo-1470770903676-69b98201ea1c?auto=format&fit=crop&w=1200&q=80",
-              "resizeMode": "cover",
               "description": "Paywall background.",
               "title": "Paywall Background"
             },

package/src/assets/samples/paywall-notification-offer.json

@@ -68,7 +68,6 @@
             "type": "PaywallBackground",
             "attributes": {
               "src": "https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=1200&q=80",
-              "resizeMode": "cover",
               "description": "Paywall background.",
               "title": "Paywall Background"
             },

package/src/assets/samples/simple-2.json

@@ -104,7 +104,6 @@
         "type": "image",
         "attributes": {
           "src": "https://picsum.photos/720/320",
-          "resizeMode": "cover",
           "description": "image element 1 in sample.",
           "title": "image 1",
           "styles": {

package/src/attributes-editor/AttributesEditorView.tsx

@@ -63,6 +63,8 @@ export function AttributesEditorView(props: AttributesEditorViewProps) {
     firstAvailableTab,
     activeEntries,
     activeSpecialSections,
+    hasTitleField,
+    hasDescriptionField,
     hasStringChildren,
     childrenValue,
     handleChildrenChange,
@@ -94,37 +96,46 @@ export function AttributesEditorView(props: AttributesEditorViewProps) {
 
   const titleValue = getAttributeValue('title');
   const descriptionValue = getAttributeValue('description');
-  const topFieldsSection = !isInvalidNode ? (
+  const showTopFields =
+    !isInvalidNode && (hasTitleField || hasDescriptionField);
+  const topFieldsSection = showTopFields ? (
     <section className="attributes-editor__top-fields">
-      <div className="attributes-editor__field-wrapper">
-        <label className="attributes-editor__field-label" htmlFor="title">
-          Title (max 20 characters for display purposes)
-        </label>
-        <input
-          id="title"
-          className="input"
-          type="text"
-          maxLength={20}
-          value={typeof titleValue === 'string' ? titleValue : ''}
-          onChange={(event) =>
-            handleAttributeChange('title', event.target.value)
-          }
-        />
-      </div>
-      <div className="attributes-editor__field-wrapper">
-        <label className="attributes-editor__field-label" htmlFor="description">
-          Description (for display purposes)
-        </label>
-        <input
-          id="description"
-          className="input"
-          type="text"
-          value={typeof descriptionValue === 'string' ? descriptionValue : ''}
-          onChange={(event) =>
-            handleAttributeChange('description', event.target.value)
-          }
-        />
-      </div>
+      {hasTitleField ? (
+        <div className="attributes-editor__field-wrapper">
+          <label className="attributes-editor__field-label" htmlFor="title">
+            Title (max 20 characters for display purposes)
+          </label>
+          <input
+            id="title"
+            className="input"
+            type="text"
+            maxLength={20}
+            value={typeof titleValue === 'string' ? titleValue : ''}
+            onChange={(event) =>
+              handleAttributeChange('title', event.target.value)
+            }
+          />
+        </div>
+      ) : null}
+      {hasDescriptionField ? (
+        <div className="attributes-editor__field-wrapper">
+          <label
+            className="attributes-editor__field-label"
+            htmlFor="description"
+          >
+            Description (for display purposes)
+          </label>
+          <input
+            id="description"
+            className="input"
+            type="text"
+            value={typeof descriptionValue === 'string' ? descriptionValue : ''}
+            onChange={(event) =>
+              handleAttributeChange('description', event.target.value)
+            }
+          />
+        </div>
+      ) : null}
     </section>
   ) : null;
 
@@ -346,18 +357,14 @@ export function AttributesEditorView(props: AttributesEditorViewProps) {
       );
     }
 
-    const sectionAttributes =
-      section.meta?.category === 'style'
-        ? ((styleBag ?? {}) as unknown as NodeDefaultAttribute)
-        : attributes;
-
     return (
       <SpecialCategorySection
         key={section.key}
         category={section.key}
         entries={section.entries}
         attributeMeta={attributeMeta}
-        attributes={sectionAttributes}
+        attributes={attributes}
+        getAttributeValue={getAttributeValue}
         onAttributeChange={handleAttributeChange}
         componentType={data?.type}
         projectColors={projectColorsForPicker}

package/src/attributes-editor/SpecialCategorySection.tsx

@@ -16,6 +16,7 @@ type SpecialCategorySectionProps = {
   entries: SchemaEntry[];
   attributeMeta?: AttributeMetaMap;
   attributes: NodeDefaultAttribute;
+  getAttributeValue: (name: string) => unknown;
   onAttributeChange: (name: string, value: unknown) => void;
   componentType?: string;
   projectColors?: ProjectColors;
@@ -41,6 +42,7 @@ export function SpecialCategorySection({
   entries,
   attributeMeta,
   attributes,
+  getAttributeValue,
   onAttributeChange,
   componentType,
   projectColors,
@@ -96,7 +98,7 @@ export function SpecialCategorySection({
           const preferredScale = toPreferredScale(
             attributeMeta?.[name]?.preferedScale,
           );
-          const currentValue = (attributes as Record<string, unknown>)[name];
+          const currentValue = getAttributeValue(name);
           const isBoolean = isBooleanFieldType(type);
           const fieldSlot = detectFieldSlot(name);
           const wrapperClassNames = [
@@ -175,7 +177,7 @@ export function SpecialCategorySection({
           const preferredScale = toPreferredScale(
             attributeMeta?.[name]?.preferedScale,
           );
-          const currentValue = (attributes as Record<string, unknown>)[name];
+          const currentValue = getAttributeValue(name);
           const isBoolean = isBooleanFieldType(type);
           const fieldSlot = detectFieldSlot(name);
           const wrapperClassNames = [
@@ -220,7 +222,7 @@ export function SpecialCategorySection({
             const preferredScale = toPreferredScale(
               attributeMeta?.[name]?.preferedScale,
             );
-            const currentValue = (attributes as Record<string, unknown>)[name];
+            const currentValue = getAttributeValue(name);
             const isBoolean = isBooleanFieldType(type);
             const wrapperClassNames = [
               'attributes-editor__field-wrapper',

package/src/attributes-editor/attributesEditorModelTypes.ts

@@ -81,6 +81,8 @@ export type AttributesEditorModel = {
   mockableFeatureKeys: string[];
   activeMockableFeature: string | null;
   setActiveMockableFeature: (next: string | null) => void;
+  hasTitleField: boolean;
+  hasDescriptionField: boolean;
   hasStringChildren: boolean;
   childrenValue: string;
 };

package/src/attributes-editor/useAttributesEditorModel.ts

@@ -217,6 +217,10 @@ export function useAttributesEditorModel({
   const componentTitle = componentMeta?.label ?? data?.type ?? 'Component';
   const componentDescription = componentMeta?.description;
 
+  const hasTitleField = patternForType?.pattern?.title === 'title';
+  const hasDescriptionField =
+    patternForType?.pattern?.description === 'description';
+
   const entries = useMemo(() => {
     return buildAttributesEditorEntries(schema, attributeMeta).filter(
       ({ type }) => (typeof type === 'string' ? type !== 'never' : true),
@@ -477,6 +481,8 @@ export function useAttributesEditorModel({
     mockableFeatureKeys,
     activeMockableFeature,
     setActiveMockableFeature,
+    hasTitleField,
+    hasDescriptionField,
     hasStringChildren,
     childrenValue,
   };

package/src/build-components/BIcon/BIconProps.generated.ts

@@ -66,8 +66,6 @@ export interface BIconPropsGenerated {
   child: string;
   attributes: {
     style?: BIconStyleGenerated;
-    title?: string;
-    description?: string;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;
     scrollable?: boolean;

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

@@ -2,18 +2,20 @@
   "schemaVersion": 2,
   "pattern": {
     "type": "BIcon",
+    "title": "title",
+    "description": "description",
     "children": "never",
     "extends": "Text",
     "attributes": {
-      "title": "title",
-      "description": "description",
       "iconType": "iconType",
       "size": "number",
       "strokeWidth": "number"
     }
   },
   "meta": {
-    "desiredParent": ["all"],
+    "desiredParent": [
+      "all"
+    ],
     "label": "BIcon",
     "description": "Renders an icon from the icon set.",
     "styles": {},

package/src/build-components/BackgroundImage/BackgroundImageProps.generated.ts

@@ -62,8 +62,6 @@ export interface BackgroundImagePropsGenerated {
   attributes: {
     style?: BackgroundImageStyleGenerated;
     scrollable?: boolean;
-    title?: string;
-    description?: string;
     src?: string;
     resizeMode?: ResizeModeOptionType;
   };

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

@@ -2,13 +2,18 @@
   "schemaVersion": 2,
   "pattern": {
     "type": "BackgroundImage",
+    "title": "title",
+    "description": "description",
     "children": "never",
     "extends": "View",
     "attributes": {
-      "title": "title",
-      "description": "description",
       "src": "string",
-      "resizeMode": ["cover", "contain", "stretch", "center"]
+      "resizeMode": [
+        "cover",
+        "contain",
+        "stretch",
+        "center"
+      ]
     },
     "defaults": {
       "resizeMode": "cover",
@@ -24,7 +29,10 @@
     }
   },
   "meta": {
-    "desiredParent": ["all", "background"],
+    "desiredParent": [
+      "all",
+      "background"
+    ],
     "label": "Background Image",
     "description": "Background image.",
     "styles": {

package/src/build-components/Button/ButtonProps.generated.ts

@@ -76,8 +76,6 @@ export interface ButtonPropsGenerated {
   attributes: {
     style?: ButtonStyleGenerated;
     scrollable?: boolean;
-    title?: string;
-    description?: string;
   };
 }
 

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

@@ -2,11 +2,11 @@
   "schemaVersion": 2,
   "pattern": {
     "type": "Button",
+    "title": "title",
+    "description": "description",
     "children": "string",
     "extends": "View",
     "attributes": {
-      "title": "title",
-      "description": "description",
       "style": {
         "color": "color",
         "fontSize": "size",
@@ -27,7 +27,9 @@
     }
   },
   "meta": {
-    "desiredParent": ["all"],
+    "desiredParent": [
+      "all"
+    ],
     "label": "Button",
     "description": "Simple action button.",
     "styles": {

package/src/build-components/Carousel/CarouselProps.generated.ts

@@ -62,8 +62,6 @@ export interface CarouselPropsGenerated {
   attributes: {
     style?: CarouselStyleGenerated;
     scrollable?: boolean;
-    title?: string;
-    description?: string;
     loop?: boolean;
     dragFree?: boolean;
     align?: AlignOptionType;

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

@@ -1,19 +1,25 @@
 {
   "schemaVersion": 2,
   "pattern": {
-    "extends": "View",
     "type": "Carousel",
+    "title": "title",
+    "description": "description",
+    "extends": "View",
     "children": "node",
     "attributes": {
-      "title": "title",
-      "description": "description",
       "loop": "boolean",
       "dragFree": "boolean",
-      "align": ["start", "center", "end"]
+      "align": [
+        "start",
+        "center",
+        "end"
+      ]
     }
   },
   "meta": {
-    "desiredParent": ["=CarouselProvider"],
+    "desiredParent": [
+      "=CarouselProvider"
+    ],
     "label": "Carousel",
     "description": "Container for carousel items.",
     "styles": {}

package/src/build-components/CarouselButtons/CarouselButtonsProps.generated.ts

@@ -65,8 +65,6 @@ export interface CarouselButtonsPropsGenerated {
   attributes: {
     style?: CarouselButtonsStyleGenerated;
     scrollable?: boolean;
-    title?: string;
-    description?: string;
     buttonType?: ButtonTypeOptionType;
     skipNumber?: number;
   };

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

@@ -2,17 +2,24 @@
   "schemaVersion": 2,
   "pattern": {
     "type": "CarouselButtons",
+    "title": "title",
+    "description": "description",
     "children": "never",
     "extends": "View",
     "attributes": {
-      "title": "title",
-      "description": "description",
-      "buttonType": ["previous_button", "next_button", "skip_button"],
+      "buttonType": [
+        "previous_button",
+        "next_button",
+        "skip_button"
+      ],
       "skipNumber": "number"
     }
   },
   "meta": {
-    "desiredParent": [">OnboardProvider", ">CarouselProvider"],
+    "desiredParent": [
+      ">OnboardProvider",
+      ">CarouselProvider"
+    ],
     "label": "Carousel Buttons",
     "description": "Renders built-in carousel buttons.",
     "styles": {},

package/src/build-components/CarouselDots/CarouselDotsProps.generated.ts

@@ -68,8 +68,6 @@ export interface CarouselDotsPropsGenerated {
   attributes: {
     style?: CarouselDotsStyleGenerated;
     scrollable?: boolean;
-    title?: string;
-    description?: string;
     dotType?: DotTypeOptionType;
   };
 }

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

@@ -2,11 +2,11 @@
   "schemaVersion": 2,
   "pattern": {
     "type": "CarouselDots",
+    "title": "title",
+    "description": "description",
     "children": "never",
     "extends": "View",
     "attributes": {
-      "title": "title",
-      "description": "description",
       "dotType": [
         "expanding_dot",
         "normal_dot",
@@ -18,7 +18,9 @@
     }
   },
   "meta": {
-    "desiredParent": [">CarouselProvider"],
+    "desiredParent": [
+      ">CarouselProvider"
+    ],
     "label": "Carousel Dots",
     "description": "Renders page indicator dots.",
     "styles": {

package/src/build-components/CarouselItem/CarouselItemProps.generated.ts

@@ -61,8 +61,6 @@ export interface CarouselItemPropsGenerated {
   attributes: {
     style?: CarouselItemStyleGenerated;
     scrollable?: boolean;
-    title?: string;
-    description?: string;
   };
 }
 

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

@@ -2,15 +2,15 @@
   "schemaVersion": 2,
   "pattern": {
     "type": "CarouselItem",
+    "title": "title",
+    "description": "description",
     "children": "node",
-    "extends": "View",
-    "attributes": {
-      "title": "title",
-      "description": "description"
-    }
+    "extends": "View"
   },
   "meta": {
-    "desiredParent": ["=Carousel"],
+    "desiredParent": [
+      "=Carousel"
+    ],
     "label": "Carousel Item",
     "description": "Single slide inside a carousel.",
     "styles": {}

package/src/build-components/CarouselProvider/CarouselProviderProps.generated.ts

@@ -61,8 +61,6 @@ export interface CarouselProviderPropsGenerated {
   attributes: {
     style?: CarouselProviderStyleGenerated;
     scrollable?: boolean;
-    title?: string;
-    description?: string;
   };
 }
 

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

@@ -3,12 +3,10 @@
   "allowUnknownAttributes": false,
   "pattern": {
     "type": "CarouselProvider",
+    "title": "title",
+    "description": "description",
     "children": "node",
     "extends": "View",
-    "attributes": {
-      "title": "title",
-      "description": "description"
-    },
     "defaults": {
       "style": {
         "width": "100%",
@@ -17,7 +15,10 @@
     }
   },
   "meta": {
-    "desiredParent": ["root", ">View"],
+    "desiredParent": [
+      "root",
+      ">View"
+    ],
     "label": "Carousel Provider",
     "description": "Provides carousel context to its children.",
     "attributes": {}