@developer_tribe/react-builder 1.0.1 → 1.0.3

package/src/components/AttributesEditorPanel.tsx

@@ -1,21 +1,23 @@
-import { useEffect, useMemo, useState } from 'react';
-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 {
@@ -44,68 +46,19 @@ export function AttributesEditorPanel({
     }
     return root;
   }
-  const [draft, setDraft] = useState<Node>(current);
-  const [isAllowedTopAccept, setIsAllowedTopAccept] = useState<boolean>(false);
-
-  const isEqual = useMemo(() => {
-    try {
-      return JSON.stringify(current) === JSON.stringify(draft);
-    } catch {
-      return current === draft;
-    }
-  }, [current, draft]);
-
-  useEffect(() => {
-    setDraft(current);
-    setIsAllowedTopAccept(false);
-  }, [current, attributes]);
-
-  useEffect(() => {
-    setIsAllowedTopAccept(!isEqual);
-  }, [isEqual]);
+  const handleAttributesChange = (next: Node) => {
+    const root = attributes as Node;
+    const updated = replaceNode(root, current, next);
+    onChange(updated);
+    setCurrent(next);
+  };
 
   return (
     <div style={{ padding: 12 }}>
-      <h2>{(current as NodeData).type ?? current?.toString() ?? '?'}</h2>{' '}
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 8,
-          padding: '16px 0',
-        }}
-      >
-        <h3 style={{ marginTop: 0, marginBottom: 0, flex: '1 1 auto' }}>
-          Attributes
-        </h3>
-        <button
-          disabled={!isAllowedTopAccept}
-          onClick={() => {
-            setDraft(current);
-            setIsAllowedTopAccept(false);
-          }}
-        >
-          Revert
-        </button>
-        <button
-          disabled={!isAllowedTopAccept}
-          onClick={() => {
-            const root = attributes as Node;
-            const updated = replaceNode(root, current, draft);
-            onChange(updated);
-            setIsAllowedTopAccept(false);
-            setCurrent(draft);
-          }}
-        >
-          Accept
-        </button>
-      </div>
       <AttributesEditor
-        node={draft}
-        onChange={(next: Node) => {
-          setDraft(next);
-          setIsAllowedTopAccept(true);
-        }}
+        node={current}
+        onChange={handleAttributesChange}
+        projectColors={projectColors}
       />
     </div>
   );

package/src/components/Breadcrumb.tsx

@@ -10,34 +10,66 @@ type BreadcrumbProps = {
   items: BreadcrumbItem[];
   separator?: ReactNode;
   ariaLabel?: string;
+  onBack?: () => void;
+  backLabel?: string;
 };
 
 export function Breadcrumb({
   items,
   separator = '/',
   ariaLabel = 'Breadcrumb',
+  onBack,
+  backLabel = 'Back',
 }: BreadcrumbProps) {
   useLogRender('Breadcrumb');
   return (
     <nav className="breadcrumb" aria-label={ariaLabel}>
+      {onBack && (
+        <button
+          type="button"
+          className="breadcrumb__back"
+          onClick={onBack}
+          aria-label="Go back"
+        >
+          <span className="breadcrumb__back-icon" aria-hidden>
+            ←
+          </span>
+          <span>{backLabel}</span>
+        </button>
+      )}
       <ol className="breadcrumb__list">
         {items.map((item, index) => {
           const isLast = index === items.length - 1;
+          const isClickable = !isLast && (item.to || item.onClick);
           return (
-            <li className="breadcrumb__item" key={`${item.label}-${index}`}>
+            <li
+              className={`breadcrumb__item ${isClickable ? 'breadcrumb__item--clickable' : ''}`}
+              key={`${item.label}-${index}`}
+              onClick={isClickable ? item.onClick : undefined}
+              role={isClickable ? 'button' : undefined}
+              tabIndex={isClickable ? 0 : undefined}
+              onKeyDown={
+                isClickable && item.onClick
+                  ? (e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        item.onClick?.();
+                      }
+                    }
+                  : undefined
+              }
+            >
               {index > 0 && (
                 <span className="breadcrumb__separator" aria-hidden>
                   {separator}
                 </span>
               )}
-              {isLast || !item.to ? (
+              {isLast || (!item.to && !item.onClick) ? (
                 <span className="breadcrumb__current" aria-current="page">
                   {item.label}
                 </span>
               ) : (
-                <p onClick={item.onClick} className="breadcrumb__link">
-                  {item.label}
-                </p>
+                <span className="breadcrumb__link">{item.label}</span>
               )}
             </li>
           );

package/src/components/Builder.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import {
   isNodeArray,
   isNodeNullOrUndefined,
@@ -11,40 +11,36 @@ import {
 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) {
+function BuilderComponent({
+  node,
+  onClick,
+  onAdd,
+  onDelete,
+  onReorder,
+  onMoveChildUp,
+  onMoveChildDown,
+}: BuilderEditorComponentProps) {
   if (isNodeNullOrUndefined(node)) {
     return <div className="builder__placeholder">Null or undefined</div>;
   }
@@ -56,33 +52,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
@@ -91,9 +131,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>
   );
 }
@@ -103,12 +157,165 @@ export function Builder({
   setData,
   current,
   setCurrent,
+  onDeleteNode,
 }: BuilderEditorProps) {
   useLogRender('Builder');
-  const [crumbs, setCrumbs] = useState<string[]>(['root']);
+  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) => {
+      if (
+        isNodeNullOrUndefined(current) ||
+        isNodeString(current) ||
+        isNodeArray(current)
+      ) {
+        return;
+      }
+
+      const parent = current as NodeData<NodeDefaultAttribute>;
+      const nextChild = createDefaultNode(type);
+      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;
+
+  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 {
@@ -194,79 +401,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 [];
+}