@developer_tribe/react-builder 1.0.2 → 1.0.3

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,52 +12,34 @@ 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>;
@@ -84,16 +66,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 +105,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 +131,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 +157,7 @@ export function Builder({
   setData,
   current,
   setCurrent,
+  onDeleteNode,
 }: BuilderEditorProps) {
   useLogRender('Builder');
   const [isAddModalOpen, setIsAddModalOpen] = useState(false);
@@ -222,6 +249,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;
@@ -312,6 +408,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/index.ts

@@ -3,7 +3,7 @@ import AttributesEditor from './AttributesEditor';
 
 export type { TargetedScreenSize } from './types/TargetedScreenSize';
 export type { Node, NodeData, NodeDefaultAttribute } from './types/Node';
-export type { Project } from './types/Project';
+export type { Project, ProjectColors } from './types/Project';
 export {
   isNodeNullOrUndefined,
   isNodeString,
@@ -28,7 +28,7 @@ export { extractViewStyle } from './utils/extractViewStyle';
 export { extractImageStyle } from './utils/extractImageStyle';
 export { extractTextStyle } from './utils/extractTextStyle';
 export { ProjectPage } from './pages/ProjectPage';
-export type { ProjectPageProps, Tab } from './pages/ProjectPage';
+export type { ProjectPageProps } from './pages/ProjectPage';
 export { copyNode } from './utils/copyNode';
 export { logger } from './utils/logger';
 export type { LogLevel } from './types/Project';

package/src/mockOS/components/MockOSRouter.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useCallback, useEffect } from 'react';
 import { useMockOSContext } from '../context/MockOSContext';
 import { MockLaunchScreenComponent } from './MockLaunchScreenComponent';
 // Note: We might use react-router or similar library in the future for more complex routing
@@ -92,11 +92,19 @@ export function MockOSRouter({
 
   const { currentRoute, navigation } = context;
 
-  function handleLaunchApp() {
+  const handleLaunchApp = useCallback(() => {
     // Navigate to the route specified in childrenBelongTo or default to 'onboard'
     const targetRoute = childrenBelongTo || 'onboard';
     navigation(targetRoute);
-  }
+  }, [childrenBelongTo, navigation]);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      handleLaunchApp();
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  }, [handleLaunchApp]);
 
   return (
     <div className="mockos-router">