@developer_tribe/react-builder 1.2.23 → 1.2.25

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/components/BuilderProvider.tsx

@@ -43,7 +43,7 @@ type BuilderProviderProps = {
   children: React.ReactNode;
 };
 
-const BuilderContext = createContext<BuilderProviderParams | undefined>(
+const builderContext = createContext<BuilderProviderParams | undefined>(
   undefined,
 );
 
@@ -91,7 +91,7 @@ export function BuilderProvider({ params, children }: BuilderProviderProps) {
   );
 
   return (
-    <BuilderContext.Provider value={value}>{children}</BuilderContext.Provider>
+    <builderContext.Provider value={value}>{children}</builderContext.Provider>
   );
 }
 
@@ -119,10 +119,10 @@ const defaultProjectColors: Readonly<ProjectColors> = {
       FOOTER_TEXT: '#81838F',
     },
     dark: {
-      TEXT: '#161827',
-      BACKGROUND: '#F4F5FF',
+      TEXT: '#E9EBF9',
+      BACKGROUND: '#080A17',
       ICON: '#0450E2',
-      LINE: '#E9EBF9',
+      LINE: '#161827',
       ONBOARD_TITLE: '#FDFDFD',
       ONBOARD_SUBTITLE: '#C7C7C7',
       BUTTON_SECONDARY_TEXT: '#A9AAAC',
@@ -133,7 +133,7 @@ const defaultProjectColors: Readonly<ProjectColors> = {
 
 export function useBuilderParams(): Readonly<BuilderProviderParams> {
   return (
-    useContext(BuilderContext) ?? {
+    useContext(builderContext) ?? {
       products: [],
       benefits: {},
       platform: 'web',

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';
@@ -91,3 +91,6 @@ export {
 } from './assets/samples/getSamples';
 export { getDefaultProject } from './utils/getDefaultProject';
 export type { EventObjectGenerated } from './build-components/OnboardButton/OnboardButtonProps.generated';
+
+export { parseColor } from './utils/parseColor';
+export type { ParseColorOptions } from './utils/parseColor';

package/src/pages/ProjectPage.tsx

@@ -1,6 +1,6 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import type { Node, NodeData } from '../types/Node';
-import type { Project, ProjectColors } from '../types/Project';
+import type { Project, ProjectColors, ProjectMeta } from '../types/Project';
 import { ToastContainer, toast } from 'react-toastify';
 import { RenderPage } from '../RenderPage';
 import { EditorHeader } from '../components/EditorHeader';
@@ -31,16 +31,16 @@ import {
   deleteNodeFromTree,
   findNodeByKey,
   isNodeRecord,
-  nodeHasChild,
 } from '../utils/nodeTree';
 import type { Fonts } from '../types/Fonts';
 import { useProjectFonts } from '../hooks/useProjectFonts';
-import { resolveProjectForSave } from './projectPageUtils';
+import { resolveProjectForSave, toProjectMeta } from './projectPageUtils';
 import { getDefaultProject } from '../utils/getDefaultProject';
 import { CURRENT_PROJECT_VERSION } from '../migrations/migratePipe';
 export type ProjectPageProps = {
   project: Project;
-  onSaveProject: (project: Project) => void;
+  // TODO: Tüm onSaveProject call-site'ları toProjectMeta kullanacak şekilde migrate et
+  onSaveProject: (project: ProjectMeta) => void;
   appConfig?: AppConfig;
   logLevel?: LogLevel;
   projectColors?: ProjectColors;
@@ -151,14 +151,15 @@ export function ProjectPage({
         return;
       }
 
-      if (isNodeRecord(current) && nodeHasChild(current, nodeToDelete)) {
-        const currentKey = current.key;
-        if (currentKey) {
-          const nextCurrent = findNodeByKey(updated, currentKey);
-          setCurrent(nextCurrent ?? updated);
-        } else {
-          setCurrent(updated);
-        }
+      // Refresh current's reference so the Builder re-renders the updated subtree.
+      // deleteNodeFromTree creates new objects for ancestors of the removed node,
+      // so the old `current` reference becomes stale when the deleted node was a
+      // descendant of `current`.
+      if (isNodeRecord(current) && current.key) {
+        const nextCurrent = findNodeByKey(updated, current.key);
+        setCurrent(nextCurrent ?? updated);
+      } else {
+        setCurrent(updated);
       }
     },
     [editorData, current],
@@ -226,8 +227,26 @@ export function ProjectPage({
     return () => clearTimeout(timer);
   }, [activeProject.data]);
 
+  // Ref for the full project (used inside effect for migration check etc.)
+  const activeProjectRef = useRef(activeProject);
+  activeProjectRef.current = activeProject;
+  // Ref for current editorData so the effect can compare without depending on it.
+  const editorDataRef = useRef(editorData);
+  editorDataRef.current = editorData;
+
   useEffect(() => {
     try {
+      const currentProject = activeProjectRef.current;
+      const projectData = currentProject.data;
+
+      // Guard: skip reinit when the incoming project data is the same reference
+      // we already hold in editorData. After a save round-trip the parent pushes
+      // a new project object whose .data is the very same reference as editorData.
+      // Re-processing it would flash a loading state and discard in-flight changes.
+      if (projectData != null && projectData === editorDataRef.current) {
+        return;
+      }
+
       // Reset to "loading" immediately on project change so the loader is shown
       // until a valid node is available (and for at least 2 seconds).
       if (!isEmptyProjectData) {
@@ -237,7 +256,7 @@ export function ProjectPage({
       setValidationError(null);
       setValidationErrorStack(null);
       // Version gate: if project is older than the current schema, show migration UI.
-      const pipe = getMigrationPipe(activeProject);
+      const pipe = getMigrationPipe(currentProject);
       if (!bypassValidation && pipe.required) {
         setMigrationGate(pipe);
         setEditorData(null);
@@ -248,8 +267,8 @@ export function ProjectPage({
       if (bypassValidation) {
         // Best-effort: let the user continue with the raw data even if invalid.
         // This may still crash the preview, but it unblocks users for debugging.
-        setEditorData(activeProject.data as Node);
-        setCurrent(activeProject.data as Node);
+        setEditorData(currentProject.data as Node);
+        setCurrent(currentProject.data as Node);
         return;
       }
       if (isEmptyProjectData) {
@@ -258,7 +277,7 @@ export function ProjectPage({
         return;
       }
 
-      const inputNode: Node = activeProject.data as Node;
+      const inputNode: Node = currentProject.data as Node;
 
       const processed = analyseAndProccess(inputNode);
       if (!processed) return;
@@ -275,7 +294,9 @@ export function ProjectPage({
       setEditorData(null);
       setCurrent(null);
     }
-  }, [activeProject, activeProject.data, bypassValidation, setCurrent]);
+    // Note: depend on activeProject.data (not activeProject object) to avoid
+    // reinit when the project wrapper changes but data is the same reference.
+  }, [activeProject.data, isEmptyProjectData, bypassValidation, setCurrent]);
 
   const showLoading =
     !isEmptyProjectData && (editorData === null || !minLoadingDelayDone);
@@ -300,13 +321,15 @@ export function ProjectPage({
             if (onSaveProjectColors && resolvedProjectColors) {
               onSaveProjectColors(resolvedProjectColors);
             }
-            onSaveProject(
+            const projectMeta = toProjectMeta(
               resolveProjectForSave({
                 project,
                 overrideProject,
                 data: editorData,
               }),
             );
+            logger.info('ProjectPage', 'saving project meta', projectMeta);
+            onSaveProject(projectMeta);
             toast.success('Saved');
           } catch (e) {
             logger.error('ProjectPage', 'save project failed', e);
@@ -377,7 +400,7 @@ export function ProjectPage({
 
               const { project: migratedProject } =
                 runProjectMigrations(projectForMigration);
-              onSaveProject(migratedProject);
+              onSaveProject(toProjectMeta(migratedProject));
               setOverrideProject(migratedProject);
               setBypassValidation(true);
               setMigrationGate(null);
@@ -430,7 +453,7 @@ export function ProjectPage({
 
             // This action only fixes project metadata. It intentionally does NOT
             // validate/normalize node data (it might still be invalid).
-            onSaveProject(fixedProject);
+            onSaveProject(toProjectMeta(fixedProject));
             setOverrideProject(fixedProject);
             setBypassValidation(false);
             setMigrationGate(null);
@@ -488,7 +511,7 @@ export function ProjectPage({
                 data: nodeCandidate as Project['data'],
               };
 
-              onSaveProject(nextProject);
+              onSaveProject(toProjectMeta(nextProject));
               setOverrideProject(nextProject);
               setBypassValidation(false);
               setValidationError(null);

package/src/pages/projectPageUtils.ts

@@ -1,4 +1,4 @@
-import type { Project } from '../types/Project';
+import type { Project, ProjectMeta } from '../types/Project';
 import type { Node } from '../types/Node';
 import { getDefaultProject } from '../utils/getDefaultProject';
 
@@ -13,3 +13,17 @@ export function resolveProjectForSave(args: {
     data: args.data,
   });
 }
+
+/**
+ * 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 function toProjectMeta(project: Project): ProjectMeta {
+  return {
+    name: project.name,
+    version: project.version,
+    ...(project.type ? { type: project.type } : {}),
+    data: project.data,
+  };
+}

package/src/types/Project.ts

@@ -29,6 +29,13 @@ 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;

package/src/utils/attributeStyle.ts

@@ -24,3 +24,81 @@ export function toAttributeRecord(
 function isPlainObject(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
+
+// ---------------------------------------------------------------------------
+// Style-key filtering – separates visual style keys from non-style attributes
+// ---------------------------------------------------------------------------
+
+/**
+ * All attribute keys that represent visual style properties.
+ * Used to separate style keys from non-style (behavioral/content) keys.
+ *
+ * Keep in sync with ViewStyleGenerated, TextStyleGenerated, and ImageStyleGenerated.
+ */
+const STYLE_ATTR_KEYS_LIST = [
+  // Style bag containers
+  'style',
+  'styles',
+  // Layout
+  'flexDirection',
+  'flexWrap',
+  'alignItems',
+  'justifyContent',
+  'gap',
+  // Padding
+  'padding',
+  'paddingHorizontal',
+  'paddingVertical',
+  'paddingTop',
+  'paddingBottom',
+  'paddingLeft',
+  'paddingRight',
+  // Margin
+  'margin',
+  'marginHorizontal',
+  'marginVertical',
+  'marginTop',
+  'marginBottom',
+  'marginLeft',
+  'marginRight',
+  // Background & border
+  'backgroundColor',
+  'borderRadius',
+  // Sizing
+  'width',
+  'minWidth',
+  'maxWidth',
+  'height',
+  'minHeight',
+  'maxHeight',
+  // Flex & position
+  'flex',
+  'position',
+  'top',
+  'bottom',
+  'left',
+  'right',
+  'zIndex',
+  // Text
+  'color',
+  'fontSize',
+  'fontFamily',
+  'fontWeight',
+  'textAlign',
+  // Image
+  'resizeMode',
+] as const;
+
+/** Type-level union of all style attribute keys. Use with `Omit<T, StyleAttrKey>`. */
+export type StyleAttrKey = (typeof STYLE_ATTR_KEYS_LIST)[number];
+
+const STYLE_ATTR_KEYS: ReadonlySet<string> = new Set(STYLE_ATTR_KEYS_LIST);
+
+/** Strips all visual-style keys from an attributes record, returning only non-style keys. */
+export function stripStyleKeys(
+  attrs: Record<string, unknown>,
+): Record<string, unknown> {
+  return Object.fromEntries(
+    Object.entries(attrs).filter(([key]) => !STYLE_ATTR_KEYS.has(key)),
+  );
+}

package/src/utils/patterns.ts

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