@developer_tribe/react-builder 1.1.0 → 1.2.0

package/src/components/Builder.tsx

@@ -1,52 +1,44 @@
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
+import { allcomponentNames } from '../build-components';
 import {
   isNodeArray,
   isNodeNullOrUndefined,
   isNodeString,
-  Node,
-  NodeData,
-  NodeDefaultAttribute,
-  allcomponentNames,
-} from '..';
+} from '../utils/analyseNode';
+import type { Node, NodeData, NodeDefaultAttribute } from '../types/Node';
 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;
+  onDelete?: (node: Node) => void;
+  onReorder?: (prev: Node[], next: Node[]) => void;
+  onMoveChildUp?: (parent: Node, childIndex: number) => void;
+  onMoveChildDown?: (parent: Node, childIndex: number) => 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})`;
-  }
-  return (
-    <a onClick={onClick} className="builder__button">
-      {nodeData.type} {extra}
-    </a>
-  );
-}
-
-function BuilderComponent({ node, onClick }: BuilderEditorComponentProps) {
-  if (isNodeNullOrUndefined(node)) {
-    return <div className="builder__placeholder">Null or undefined</div>;
-  }
+function BuilderComponent({
+  node,
+  onClick,
+  onAdd,
+  onDelete,
+  onReorder,
+  onMoveChildUp,
+  onMoveChildDown,
+}: BuilderEditorComponentProps) {
   if (isNodeString(node)) {
     return (
       <div className="builder__text">
@@ -55,33 +47,77 @@ function BuilderComponent({ node, onClick }: BuilderEditorComponentProps) {
     );
   }
 
+  const addButton = onAdd && (
+    <button
+      type="button"
+      className="editor-button builder__add-button"
+      onClick={onAdd}
+    >
+      <span className="builder__add-button-icon" aria-hidden="true">
+        +
+      </span>
+      <span>Add component</span>
+    </button>
+  );
+
   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>
     );
   }
 
   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">
-      <p className="builder__node-type">{nodeData.type}</p>
       <div className="builder__children">
+        <BuilderButton
+          onClick={() => {
+            onClick(node);
+          }}
+          node={node}
+          onDelete={onDelete}
+        />
         {children &&
           children.map((child, index) => (
             <BuilderButton
@@ -90,9 +126,23 @@ function BuilderComponent({ node, onClick }: BuilderEditorComponentProps) {
               }}
               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>
+      {addButton}
     </div>
   );
 }
@@ -102,11 +152,208 @@ export function Builder({
   setData,
   current,
   setCurrent,
+  onDeleteNode,
 }: BuilderEditorProps) {
-  const [crumbs, setCrumbs] = useState<string[]>(['root']);
+  useLogRender('Builder');
+  const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+  const breadcrumbPath = useMemo(() => {
+    const path = findNodePath(data, current);
+    if (path.length) return path;
+    if (!isNodeNullOrUndefined(current)) return [current];
+    if (!isNodeNullOrUndefined(data)) return [data];
+    return [];
+  }, [data, current]);
+
+  const handleNodeSelect = useCallback(
+    (node: Node) => {
+      setCurrent(node);
+    },
+    [setCurrent],
+  );
+
   const breadcrumbItems = useMemo(
-    () => crumbs.map((c, idx) => ({ label: c })),
-    [crumbs],
+    () =>
+      breadcrumbPath.map((node, index) => ({
+        label: getNodeLabel(node),
+        onClick:
+          index === breadcrumbPath.length - 1
+            ? undefined
+            : () => handleNodeSelect(node),
+      })),
+    [breadcrumbPath, handleNodeSelect],
+  );
+
+  const handleBackClick = useCallback(() => {
+    if (breadcrumbPath.length < 2) return;
+    handleNodeSelect(breadcrumbPath[breadcrumbPath.length - 2]);
+  }, [breadcrumbPath, handleNodeSelect]);
+
+  const handleAddChild = useCallback(
+    (type: string) => {
+      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 updatedParent: NodeData<NodeDefaultAttribute> = {
+        ...parent,
+        children: appendChild(parent.children, nextChild),
+      };
+      const updatedRoot = replaceNode(data, current, updatedParent);
+      setData(updatedRoot);
+      setCurrent(updatedParent);
+    },
+    [current, data, setData, setCurrent],
+  );
+
+  const allowedChildTypes = useMemo(
+    () => getAllowedChildTypes(current),
+    [current],
+  );
+  const parentType = useMemo(() => {
+    if (
+      isNodeNullOrUndefined(current) ||
+      isNodeString(current) ||
+      isNodeArray(current)
+    ) {
+      return null;
+    }
+    return (current as NodeData<NodeDefaultAttribute>).type ?? null;
+  }, [current]);
+  const canAddChild =
+    allowedChildTypes.length > 0 ||
+    data === undefined ||
+    data === null ||
+    (Array.isArray(data) && data.length === 0);
+
+  const handleOpenAddModal = useCallback(() => {
+    if (!canAddChild) return;
+    setIsAddModalOpen(true);
+  }, [canAddChild]);
+
+  const handleCloseAddModal = useCallback(() => {
+    setIsAddModalOpen(false);
+  }, []);
+
+  const handleAddChildFromModal = useCallback(
+    (type: string) => {
+      handleAddChild(type);
+      setIsAddModalOpen(false);
+    },
+    [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 {
@@ -139,23 +386,37 @@ export function Builder({
   function createDefaultNode(type: string): NodeData<NodeDefaultAttribute> {
     const pattern = getPatternByType(type)?.pattern;
     const defaults = getDefaultsForType(type) ?? {};
-    let children: Node = '';
     const childrenSchema = pattern?.children as unknown;
+
+    // Special-case: CarouselProvider MUST contain a Carousel container inside the viewport
+    // otherwise embla-carousel will crash (it expects viewport.firstChild.children).
+    if (type === 'CarouselProvider') {
+      return {
+        type,
+        children: createDefaultNode('Carousel'),
+        attributes: { ...defaults },
+      } as NodeData<NodeDefaultAttribute>;
+    }
+
+    let children: Node = null;
     if (childrenSchema === 'never') {
-      children = '';
+      children = null;
     } else if (childrenSchema === 'string') {
       children = '';
     } else if (
       childrenSchema === 'node' ||
       (Array.isArray(childrenSchema) && childrenSchema.includes('node'))
     ) {
-      children = [];
+      // Default to "no children yet". Using [] here is truthy and can mount
+      // child-dependent widgets (e.g. Embla) with an empty DOM, causing crashes.
+      children = null;
     } else if (typeof childrenSchema === 'string') {
-      // Specific child type like 'carouselItem' – initialize as empty array to allow multiple
-      children = [];
+      // Specific child type like 'CarouselItem' – seed with one child to match the pattern.
+      children = [createDefaultNode(childrenSchema)];
     } else {
-      children = '';
+      children = null;
     }
+
     return {
       type,
       children,
@@ -164,12 +425,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
@@ -192,79 +457,75 @@ export function Builder({
 
   return (
     <div className="builder">
-      <Breadcrumb items={breadcrumbItems} />
-
-      <div className="builder__current">
-        {crumbs[crumbs.length - 1] + ' ( ' + crumbs.length + '. level )'}
-      </div>
+      <Breadcrumb
+        items={breadcrumbItems}
+        onBack={breadcrumbPath.length > 1 ? handleBackClick : undefined}
+      />
       <BuilderComponent
-        onClick={(node: Node) => {
-          setCurrent(node);
-          setCrumbs((crumbs) => [
-            ...crumbs,
-            typeof node === 'string'
-              ? node
-              : (node as NodeData<NodeDefaultAttribute>).type,
-          ]);
-        }}
+        onClick={handleNodeSelect}
+        onAdd={canAddChild ? handleOpenAddModal : undefined}
+        onDelete={onDeleteNode}
+        onReorder={handleReorder}
+        onMoveChildUp={handleMoveChildUp}
+        onMoveChildDown={handleMoveChildDown}
         node={current}
       />
-      {!isNodeNullOrUndefined(current) &&
-        !isNodeString(current) &&
-        !isNodeArray(current) &&
-        (() => {
-          const allowed = getAllowedChildTypes(current);
-          if (allowed.length === 0) return null;
-          return (
-            <div
-              style={{
-                display: 'flex',
-                flexWrap: 'wrap',
-                gap: 8,
-                paddingTop: 12,
-              }}
-            >
-              {allowed.map((t) => (
-                <button
-                  key={t}
-                  className="editor-button"
-                  onClick={() => {
-                    const parent = current as NodeData<NodeDefaultAttribute>;
-                    const nextChild = createDefaultNode(t);
-                    let nextChildren: Node;
-                    if (Array.isArray(parent.children)) {
-                      nextChildren = [
-                        ...(parent.children as Node[]),
-                        nextChild,
-                      ];
-                    } else if (
-                      parent.children === null ||
-                      parent.children === undefined ||
-                      typeof parent.children === 'string'
-                    ) {
-                      nextChildren = [nextChild];
-                    } else {
-                      nextChildren = [parent.children as Node, nextChild];
-                    }
-                    const updatedParent: NodeData<NodeDefaultAttribute> = {
-                      ...parent,
-                      children: nextChildren,
-                    };
-                    const updatedRoot = replaceNode(
-                      data,
-                      current,
-                      updatedParent,
-                    );
-                    setData(updatedRoot);
-                    setCurrent(updatedParent);
-                  }}
-                >
-                  Add {t}
-                </button>
-              ))}
-            </div>
-          );
-        })()}
+      {isAddModalOpen && (
+        <AddComponentModal
+          allowedChildTypes={allowedChildTypes}
+          parentType={parentType}
+          onSelect={handleAddChildFromModal}
+          onClose={handleCloseAddModal}
+        />
+      )}
     </div>
   );
 }
+
+function appendChild(children: Node, childToAppend: Node): Node {
+  if (Array.isArray(children)) {
+    return [...children, childToAppend];
+  }
+  if (
+    children === null ||
+    children === undefined ||
+    typeof children === 'string'
+  ) {
+    return [childToAppend];
+  }
+  return [children as Node, childToAppend];
+}
+
+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';
+}
+
+function findNodePath(root: Node, target: Node): Node[] {
+  if (root === null || root === undefined) return [];
+  if (root === target) return [root];
+  if (typeof root === 'string') return [];
+  if (Array.isArray(root)) {
+    for (const child of root) {
+      const childPath = findNodePath(child, target);
+      if (childPath.length) {
+        return childPath;
+      }
+    }
+    return [];
+  }
+
+  const nodeData = root as NodeData<NodeDefaultAttribute>;
+  const children = nodeData.children;
+  if (!children) return [];
+  const childList = Array.isArray(children) ? children : [children];
+  for (const child of childList) {
+    const childPath = findNodePath(child, target);
+    if (childPath.length) {
+      return [root, ...childPath];
+    }
+  }
+  return [];
+}