@developer_tribe/react-builder 1.0.2 → 1.0.4

package/src/components/AttributesEditorPanel.tsx

@@ -1,20 +1,23 @@
-import { AttributesEditor, Node, NodeData } from '..';
+import { AttributesEditor, Node, NodeData, ProjectColors } from '..';
 import { useLogRender } from '../utils/useLogRender';
+import { useRenderStore } from '../store';
 
 interface AttributesEditorPanelProps {
-  current: Node;
   attributes: any;
   onChange: (data: Node) => void;
-  setCurrent: (current: Node) => void;
+  projectColors?: ProjectColors;
 }
 
 export function AttributesEditorPanel({
-  current,
   attributes,
   onChange,
-  setCurrent,
+  projectColors,
 }: AttributesEditorPanelProps) {
   useLogRender('AttributesEditorPanel');
+  const { current, setCurrent } = useRenderStore((s) => ({
+    current: s.current,
+    setCurrent: s.setCurrent,
+  }));
   if (!current) return null;
 
   function replaceNode(root: Node, target: Node, next: Node): Node {
@@ -52,7 +55,11 @@ export function AttributesEditorPanel({
 
   return (
     <div style={{ padding: 12 }}>
-      <AttributesEditor node={current} onChange={handleAttributesChange} />
+      <AttributesEditor
+        node={current}
+        onChange={handleAttributesChange}
+        projectColors={projectColors}
+      />
     </div>
   );
 }

package/src/components/Builder.tsx

@@ -12,56 +12,35 @@ import { Breadcrumb } from './Breadcrumb';
 import { useLogRender } from '../utils/useLogRender';
 import { getDefaultsForType, getPatternByType } from '../utils/patterns';
 import { AddComponentModal } from '../modals/AddComponentModal';
+import { BuilderButton } from './BuilderButton';
 
 type BuilderEditorProps = {
   data: Node;
   setData: (data: Node) => void;
   current: Node;
   setCurrent: (current: Node) => void;
+  onDeleteNode: (node: Node) => void;
 };
 
 interface BuilderEditorComponentProps {
   node: Node;
   onClick: (node: Node) => void;
   onAdd?: () => void;
-}
-
-function BuilderButton({ node, onClick }: { node: Node; onClick: () => void }) {
-  if (isNodeNullOrUndefined(node)) {
-    return <div className="builder__placeholder">Null or undefined</div>;
-  }
-  if (isNodeString(node)) {
-    return <div className="builder__text">{node as string}</div>;
-  }
-  const nodeData = node as NodeData<NodeDefaultAttribute>;
-
-  let extra = '';
-  if (nodeData.attributes?.condition) {
-    extra = ` (${nodeData.attributes.condition} ${nodeData.attributes.conditionVariable})`;
-  }
-  const patternLabel = getPatternByType(nodeData.type)?.meta?.label?.trim();
-  const baseLabel =
-    patternLabel && patternLabel.length > 0 ? patternLabel : nodeData.type;
-  const conditionLabel = extra.trim() ? extra : '';
-  const fullLabel = `${baseLabel}${conditionLabel}`.trim();
-  return (
-    <a onClick={onClick} className="builder__button">
-      <span className="builder__button-label">{baseLabel}</span> <br />
-      {conditionLabel && (
-        <span className="builder__button-condition">{conditionLabel}</span>
-      )}
-    </a>
-  );
+  onDelete?: (node: Node) => void;
+  onReorder?: (prev: Node[], next: Node[]) => void;
+  onMoveChildUp?: (parent: Node, childIndex: number) => void;
+  onMoveChildDown?: (parent: Node, childIndex: number) => void;
 }
 
 function BuilderComponent({
   node,
   onClick,
   onAdd,
+  onDelete,
+  onReorder,
+  onMoveChildUp,
+  onMoveChildDown,
 }: BuilderEditorComponentProps) {
-  if (isNodeNullOrUndefined(node)) {
-    return <div className="builder__placeholder">Null or undefined</div>;
-  }
   if (isNodeString(node)) {
     return (
       <div className="builder__text">
@@ -84,16 +63,38 @@ function BuilderComponent({
   );
 
   if (isNodeArray(node)) {
+    const list = node as Node[];
+
+    const moveItem = (index: number, direction: -1 | 1) => {
+      if (!onReorder) return;
+      const targetIndex = index + direction;
+      if (targetIndex < 0 || targetIndex >= list.length) return;
+      const updated = [...list];
+      const [moved] = updated.splice(index, 1);
+      updated.splice(targetIndex, 0, moved);
+      onReorder(list, updated);
+    };
+
     return (
       <div className="builder__list">
-        {(node as Node[]).map((item, index) => (
-          <BuilderButton
-            onClick={() => {
-              onClick(item);
-            }}
-            key={index}
-            node={item}
-          />
+        {list.map((item, index) => (
+          <div key={index} className="builder__list-item">
+            <BuilderButton
+              onClick={() => {
+                onClick(item);
+              }}
+              node={item}
+              onDelete={onDelete}
+              onMoveUp={
+                onReorder && index > 0 ? () => moveItem(index, -1) : undefined
+              }
+              onMoveDown={
+                onReorder && index < list.length - 1
+                  ? () => moveItem(index, 1)
+                  : undefined
+              }
+            />
+          </div>
         ))}
         {addButton}
       </div>
@@ -101,15 +102,24 @@ function BuilderComponent({
   }
 
   const nodeData = node as NodeData<NodeDefaultAttribute>;
-  const children = nodeData.children
-    ? isNodeArray(nodeData.children)
-      ? (nodeData.children as Node[])
-      : [nodeData.children]
+  const rawChildren = nodeData?.children;
+  const hasArrayChildren = isNodeArray(rawChildren);
+  const children = rawChildren
+    ? hasArrayChildren
+      ? (rawChildren as Node[])
+      : [rawChildren]
     : null;
 
   return (
     <div className="builder__node">
       <div className="builder__children">
+        <BuilderButton
+          onClick={() => {
+            onClick(node);
+          }}
+          node={node}
+          onDelete={onDelete}
+        />
         {children &&
           children.map((child, index) => (
             <BuilderButton
@@ -118,6 +128,19 @@ function BuilderComponent({
               }}
               key={index}
               node={child}
+              onDelete={onDelete}
+              onMoveUp={
+                onMoveChildUp && hasArrayChildren && index > 0
+                  ? () => onMoveChildUp(node, index)
+                  : undefined
+              }
+              onMoveDown={
+                onMoveChildDown &&
+                hasArrayChildren &&
+                index < (children as Node[]).length - 1
+                  ? () => onMoveChildDown(node, index)
+                  : undefined
+              }
             />
           ))}
       </div>
@@ -131,6 +154,7 @@ export function Builder({
   setData,
   current,
   setCurrent,
+  onDeleteNode,
 }: BuilderEditorProps) {
   useLogRender('Builder');
   const [isAddModalOpen, setIsAddModalOpen] = useState(false);
@@ -168,16 +192,55 @@ export function Builder({
 
   const handleAddChild = useCallback(
     (type: string) => {
-      if (
-        isNodeNullOrUndefined(current) ||
-        isNodeString(current) ||
-        isNodeArray(current)
-      ) {
+      const nextChild = createDefaultNode(type);
+
+      // Root (or selection) can be empty/null-ish: allow creating the first node.
+      if (isNodeNullOrUndefined(current)) {
+        // If the project itself is empty (or a placeholder string), replace it with the first node.
+        if (isNodeNullOrUndefined(data) || isNodeString(data)) {
+          setData(nextChild);
+          setCurrent(nextChild);
+          return;
+        }
+
+        // If the project root is a list, append into it.
+        if (Array.isArray(data)) {
+          const nextList = [...data, nextChild];
+          setData(nextList);
+          setCurrent(nextList);
+          return;
+        }
+
+        // Otherwise default to adding into the root node.
+        const parent = data as NodeData<NodeDefaultAttribute>;
+        const updatedParent: NodeData<NodeDefaultAttribute> = {
+          ...parent,
+          children: appendChild(parent.children, nextChild),
+        };
+        setData(updatedParent);
+        setCurrent(updatedParent);
+        return;
+      }
+
+      // If the root is a list, allow adding to it directly.
+      if (isNodeArray(current)) {
+        const nextList = [...(current as Node[]), nextChild];
+        const updatedRoot = replaceNode(data, current, nextList);
+        setData(updatedRoot);
+        setCurrent(nextList);
+        return;
+      }
+
+      // If the root is a placeholder string, allow replacing it with the first node.
+      if (isNodeString(current)) {
+        if (current === data) {
+          setData(nextChild);
+          setCurrent(nextChild);
+        }
         return;
       }
 
       const parent = current as NodeData<NodeDefaultAttribute>;
-      const nextChild = createDefaultNode(type);
       const updatedParent: NodeData<NodeDefaultAttribute> = {
         ...parent,
         children: appendChild(parent.children, nextChild),
@@ -203,7 +266,11 @@ export function Builder({
     }
     return (current as NodeData<NodeDefaultAttribute>).type ?? null;
   }, [current]);
-  const canAddChild = allowedChildTypes.length > 0;
+  const canAddChild =
+    allowedChildTypes.length > 0 ||
+    data === undefined ||
+    data === null ||
+    (Array.isArray(data) && data.length === 0);
 
   const handleOpenAddModal = useCallback(() => {
     if (!canAddChild) return;
@@ -222,6 +289,75 @@ export function Builder({
     [handleAddChild],
   );
 
+  const handleReorder = useCallback(
+    (prev: Node[], next: Node[]) => {
+      const updatedRoot = replaceNode(data, prev, next);
+      setData(updatedRoot);
+      if (current === prev) {
+        setCurrent(next);
+      }
+    },
+    [current, data, setCurrent, setData],
+  );
+
+  const handleMoveChildUp = useCallback(
+    (parentNode: Node, childIndex: number) => {
+      if (
+        isNodeNullOrUndefined(parentNode) ||
+        isNodeString(parentNode) ||
+        isNodeArray(parentNode)
+      ) {
+        return;
+      }
+      const parentData = parentNode as NodeData<NodeDefaultAttribute>;
+      const children = parentData.children;
+      if (!Array.isArray(children)) return;
+      if (childIndex <= 0 || childIndex >= children.length) return;
+      const updatedChildren = [...children];
+      const [movedChild] = updatedChildren.splice(childIndex, 1);
+      updatedChildren.splice(childIndex - 1, 0, movedChild);
+      const updatedParent: NodeData<NodeDefaultAttribute> = {
+        ...parentData,
+        children: updatedChildren,
+      };
+      const updatedRoot = replaceNode(data, parentNode, updatedParent);
+      setData(updatedRoot);
+      if (current === parentNode) {
+        setCurrent(updatedParent);
+      }
+    },
+    [current, data, setCurrent, setData],
+  );
+
+  const handleMoveChildDown = useCallback(
+    (parentNode: Node, childIndex: number) => {
+      if (
+        isNodeNullOrUndefined(parentNode) ||
+        isNodeString(parentNode) ||
+        isNodeArray(parentNode)
+      ) {
+        return;
+      }
+      const parentData = parentNode as NodeData<NodeDefaultAttribute>;
+      const children = parentData.children;
+      if (!Array.isArray(children)) return;
+      if (childIndex < 0 || childIndex >= children.length - 1) return;
+      const updatedChildren = [...children];
+      const [movedChild] = updatedChildren.splice(childIndex, 1);
+      updatedChildren.splice(childIndex + 1, 0, movedChild);
+      const updatedParent: NodeData<NodeDefaultAttribute> = {
+        ...parentData,
+        children: updatedChildren,
+      };
+      const updatedRoot = replaceNode(data, parentNode, updatedParent);
+      setData(updatedRoot);
+      if (current === parentNode) {
+        setCurrent(updatedParent);
+      }
+    },
+    [current, data, setCurrent, setData],
+  );
+
   function replaceNode(root: Node, target: Node, next: Node): Node {
     if (root === target) return next;
     if (root === null || root === undefined) return root;
@@ -277,12 +413,16 @@ export function Builder({
   }
 
   function getAllowedChildTypes(parent: Node): string[] {
-    if (
-      isNodeNullOrUndefined(parent) ||
-      isNodeString(parent) ||
-      isNodeArray(parent)
-    )
-      return [];
+    // Treat non-node containers (root empty, root arrays) as "View-like" containers:
+    // allow inserting any component type as a child.
+    if (isNodeNullOrUndefined(parent)) return [...allcomponentNames];
+    if (isNodeArray(parent) && (parent as Node[]).length === 0)
+      return [...allcomponentNames];
+    if (isNodeString(parent)) {
+      // Only allow adding when the string is the root placeholder.
+      return parent === data ? [...allcomponentNames] : [];
+    }
+
     const parentData = parent as NodeData;
     const parentType = parentData.type;
     // Special rule: limit OnboardButtons to OnboardButton only
@@ -312,6 +452,10 @@ export function Builder({
       <BuilderComponent
         onClick={handleNodeSelect}
         onAdd={canAddChild ? handleOpenAddModal : undefined}
+        onDelete={onDeleteNode}
+        onReorder={handleReorder}
+        onMoveChildUp={handleMoveChildUp}
+        onMoveChildDown={handleMoveChildDown}
         node={current}
       />
       {isAddModalOpen && (

package/src/components/BuilderButton.tsx

@@ -0,0 +1,127 @@
+import { useRef } from 'react';
+import {
+  isNodeNullOrUndefined,
+  isNodeString,
+  Node,
+  NodeData,
+  NodeDefaultAttribute,
+} from '..';
+import { getPatternByType } from '../utils/patterns';
+
+export type BuilderButtonProps = {
+  node: Node;
+  onClick: () => void;
+  onDelete?: (node: Node) => void;
+  onMoveUp?: () => void;
+  onMoveDown?: () => void;
+};
+
+export function BuilderButton({
+  node,
+  onClick,
+  onDelete,
+  onMoveUp,
+  onMoveDown,
+}: BuilderButtonProps) {
+  if (isNodeNullOrUndefined(node)) {
+    return <div className="builder__placeholder">Null or undefined</div>;
+  }
+  if (isNodeString(node)) {
+    return <div className="builder__text">{node as string}</div>;
+  }
+  const nodeData = node as NodeData<NodeDefaultAttribute>;
+
+  const longPressTimeoutRef = useRef<number | null>(null);
+  const longPressTriggeredRef = useRef(false);
+
+  const handleDelete = () => {
+    if (onDelete) {
+      onDelete(node);
+    }
+  };
+
+  const clearLongPress = () => {
+    if (longPressTimeoutRef.current !== null) {
+      window.clearTimeout(longPressTimeoutRef.current);
+      longPressTimeoutRef.current = null;
+    }
+  };
+
+  const handlePressStart = () => {
+    longPressTriggeredRef.current = false;
+    longPressTimeoutRef.current = window.setTimeout(() => {
+      longPressTriggeredRef.current = true;
+      const shouldDelete = window.confirm('Do you want to delete');
+      if (shouldDelete) {
+        handleDelete();
+      }
+    }, 600);
+  };
+
+  const handlePressEnd = () => {
+    if (!longPressTriggeredRef.current) {
+      onClick();
+    }
+    clearLongPress();
+  };
+
+  const handlePressCancel = () => {
+    clearLongPress();
+  };
+
+  let extra = '';
+  if (nodeData.attributes?.condition) {
+    extra = ` (${nodeData.attributes.condition} ${nodeData.attributes.conditionVariable})`;
+  }
+  const patternLabel = getPatternByType(nodeData.type)?.meta?.label?.trim();
+  const baseLabel =
+    patternLabel && patternLabel.length > 0 ? patternLabel : nodeData.type;
+  const conditionLabel = extra.trim() ? extra : '';
+
+  return (
+    <div className="builder__button">
+      {(onMoveUp || onMoveDown) && (
+        <div className="builder__sort-controls">
+          <button
+            type="button"
+            className="builder__sort-button"
+            onClick={(event) => {
+              event.stopPropagation();
+              onMoveUp?.();
+            }}
+            disabled={!onMoveUp}
+            aria-label="Move up"
+          >
+            ↑
+          </button>
+          <button
+            type="button"
+            className="builder__sort-button"
+            onClick={(event) => {
+              event.stopPropagation();
+              onMoveDown?.();
+            }}
+            disabled={!onMoveDown}
+            aria-label="Move down"
+          >
+            ↓
+          </button>
+        </div>
+      )}
+      <a
+        className="builder__button-link"
+        onMouseDown={handlePressStart}
+        onMouseUp={handlePressEnd}
+        onMouseLeave={handlePressCancel}
+        onTouchStart={handlePressStart}
+        onTouchEnd={handlePressEnd}
+        onTouchCancel={handlePressCancel}
+      >
+        {baseLabel}
+      </a>
+      {conditionLabel && (
+        <span className="builder__button-condition">{conditionLabel}</span>
+      )}
+    </div>
+  );
+}

package/src/components/DeviceNavigationBar.tsx

@@ -37,7 +37,6 @@ export function DeviceNavigationBar({
     : 'rgba(0, 0, 0, 0.4)';
 
   function handleBackButton() {
-    console.log('handleBackButton', context);
     if (context) {
       const canGoBack = context.goBack();
       // If can't go back, go to launchscreen

package/src/components/EditorHeader.tsx

@@ -24,9 +24,14 @@ export function EditorHeader({
   useLogRender('EditorHeader');
   const [isDevicesModalOpen, setIsDevicesModalOpen] = useState(false);
   const copiedNode = useRenderStore((s) => s.copiedNode);
-  const { device: selectedDevice, setDevice } = useRenderStore((s) => ({
+  const {
+    device: selectedDevice,
+    setDevice,
+    setCurrent,
+  } = useRenderStore((s) => ({
     device: s.device,
     setDevice: s.setDevice,
+    setCurrent: s.setCurrent,
   }));
 
   function replaceNode(root: Node, target: Node, next: Node): Node {
@@ -67,6 +72,11 @@ export function EditorHeader({
       copiedNode: null,
     });
     setEditorData(updated);
+    //TODO: current and editor must be sync!! and tested more
+    // Important: selection is stored by reference. After replacing `current` in the tree,
+    // we must point selection to the new (cloned) node reference to keep "current node"
+    // in sync with what’s rendered/edited.
+    setCurrent(cloned);
   };
   return (
     <div