@developer_tribe/react-builder 1.1.0 → 1.2.1

package/src/components/EditorHeader.tsx

@@ -1,51 +1,95 @@
-import { useMemo, useState } from 'react';
-import { Device, getDevices, Node, copyNode } from '..';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type { Device } from '../types/Device';
+import type { Node } from '../types/Node';
+import { copyNode } from '../utils/copyNode';
+import { getDevices } from '../utils/getDevices';
 import { useRenderStore } from '../store';
-import { Breadcrumb, BreadcrumbItem } from './Breadcrumb';
+import { useLogRender } from '../utils/useLogRender';
+import { DeviceButton } from './DeviceButton';
+import { DeviceSelectorModal } from '../modals/DeviceSelectorModal';
+import { toast } from 'react-toastify';
+import { getSamples } from '../assets/samples/getSamples';
+import type { Project } from '../types/Project';
 
 const devices = getDevices();
-
 interface EditorHeaderProps {
   onSaveProject?: () => void;
+  onRestoreProject?: () => void;
   current?: Node;
   editorData?: Node;
   setEditorData?: (data: Node) => void;
 }
 
-interface DeviceButtonProps {
-  device: Device;
-  selectedDevice: Device | null;
-  setSelectedDevice: (device: Device) => void;
-}
-export function DeviceButton({
-  device,
-  selectedDevice,
-  setSelectedDevice,
-}: DeviceButtonProps) {
-  return (
-    <button
-      className={`editor-device-button ${selectedDevice === device ? 'editor-device-button--selected' : ''}`}
-      onClick={() => setSelectedDevice(device)}
-    >
-      {device.name} <br />
-      {device.width}x{device.height}
-    </button>
-  );
-}
-
 export function EditorHeader({
   onSaveProject,
+  onRestoreProject,
   current,
   editorData,
   setEditorData,
 }: EditorHeaderProps) {
+  useLogRender('EditorHeader');
   const [isDevicesModalOpen, setIsDevicesModalOpen] = useState(false);
+  const [isActionsOpen, setIsActionsOpen] = useState(false);
+  const actionsRef = useRef<HTMLDivElement | null>(null);
   const copiedNode = useRenderStore((s) => s.copiedNode);
-  const { device, setDevice } = useRenderStore((s) => ({
+  const {
+    device: selectedDevice,
+    setDevice,
+    setCurrent,
+    setAppConfig,
+    setProjectColors,
+  } = useRenderStore((s) => ({
     device: s.device,
     setDevice: s.setDevice,
+    setCurrent: s.setCurrent,
+    setAppConfig: s.setAppConfig,
+    setProjectColors: s.setProjectColors,
   }));
 
+  const sortedSamples = useMemo(() => {
+    const weight = (t?: Project['type']) => {
+      if (t === 'paywall') return 0;
+      if (t === 'onboard') return 1;
+      return 2;
+    };
+    return getSamples()
+      .slice()
+      .sort((a, b) => {
+        const w = weight(a.type) - weight(b.type);
+        if (w !== 0) return w;
+        return a.name.localeCompare(b.name);
+      });
+  }, []);
+
+  const actionsMenuId = useMemo(
+    () => `editor-actions-menu-${Math.random().toString(36).slice(2, 9)}`,
+    [],
+  );
+
+  useEffect(() => {
+    if (!isActionsOpen) return;
+
+    const handlePointerDown = (e: MouseEvent | TouchEvent) => {
+      const el = actionsRef.current;
+      if (!el) return;
+      if (e.target instanceof Element && el.contains(e.target)) return;
+      setIsActionsOpen(false);
+    };
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setIsActionsOpen(false);
+    };
+
+    document.addEventListener('mousedown', handlePointerDown);
+    document.addEventListener('touchstart', handlePointerDown);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', handlePointerDown);
+      document.removeEventListener('touchstart', handlePointerDown);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isActionsOpen]);
+
   function replaceNode(root: Node, target: Node, next: Node): Node {
     if (root === target) return next;
     if (root === null || root === undefined) return root;
@@ -59,16 +103,13 @@ export function EditorHeader({
       });
       return changed ? arr : root;
     }
-    const data = root as any;
+    const data = root as Record<string, unknown>;
     if ('children' in data) {
-      const prev = data.children;
+      const prev = data.children as Node;
       const replaced = Array.isArray(prev)
-        ? prev.map((c: Node) => replaceNode(c, target, next))
-        : replaceNode(prev as Node, target, next);
-      if (replaced !== prev) {
-        data.children = replaced;
-        return { ...data, children: replaced } as Node;
-      }
+        ? prev.map((c) => replaceNode(c, target, next))
+        : replaceNode(prev, target, next);
+      if (replaced !== prev) return { ...data, children: replaced } as Node;
     }
     return root;
   }
@@ -83,9 +124,111 @@ export function EditorHeader({
     useRenderStore.setState({
       copiedNode: null,
     });
-    useRenderStore.getState().forceRender();
     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);
   };
+
+  const cloneNode = (node: Node): Node =>
+    JSON.parse(JSON.stringify(node)) as Node;
+
+  const handleReplaceFromSample = (sample: Project) => {
+    if (!setEditorData) return;
+    const next = cloneNode(sample.data);
+    setEditorData(next);
+    setCurrent(next);
+    if (sample.appConfig) setAppConfig(sample.appConfig);
+    setProjectColors(sample.projectColors);
+    toast.success(`Replaced with "${sample.name}"`);
+  };
+
+  const handlePasteFromSample = (sample: Project) => {
+    if (!current || !editorData || !setEditorData) return;
+    const incoming = cloneNode(sample.data);
+
+    const isRecord = (v: unknown): v is Record<string, unknown> =>
+      typeof v === 'object' && v !== null && !Array.isArray(v);
+
+    const isNodeData = (v: unknown): v is Record<string, unknown> =>
+      isRecord(v) && 'type' in v && 'children' in v;
+
+    const getPasteNodes = (node: Node): Node[] => {
+      if (isNodeData(node)) {
+        const t = node.type;
+        const isMainLike = t === 'main' || node.isMain === true;
+        if (isMainLike) {
+          const ch = node.children as Node;
+          if (!ch) return [];
+          return Array.isArray(ch) ? ch : [ch];
+        }
+      }
+      return [node];
+    };
+
+    // "Paste from sample" should ADD the sample into the selected node (not replace it).
+    // We do this by appending the sample's root node into current.children.
+    if (!isNodeData(current)) {
+      toast.error('Select a component node to paste into');
+      return;
+    }
+
+    const prevChildren = current.children as Node;
+    const pasteNodes = getPasteNodes(incoming);
+    if (pasteNodes.length === 0) {
+      toast.error('Sample has no children to paste');
+      return;
+    }
+    let nextChildren: Node;
+    if (!prevChildren) {
+      nextChildren = pasteNodes.length === 1 ? pasteNodes[0] : pasteNodes;
+    } else if (Array.isArray(prevChildren)) {
+      nextChildren = [...prevChildren, ...pasteNodes];
+    } else {
+      nextChildren = [prevChildren, ...pasteNodes];
+    }
+
+    const nextNode: Node = { ...current, children: nextChildren } as Node;
+
+    const updated = replaceNode(editorData, current, nextNode);
+    setEditorData(updated);
+    setCurrent(nextNode);
+    toast.success(`Pasted from "${sample.name}"`);
+  };
+
+  const closeActions = () => setIsActionsOpen(false);
+  const handleSaveProject = () => {
+    onSaveProject?.();
+    closeActions();
+  };
+  const handleRestoreProject = () => {
+    try {
+      onRestoreProject?.();
+      toast.info('Restored');
+    } catch {
+      toast.error('Restore failed');
+    } finally {
+      closeActions();
+    }
+  };
+  const handleCopyAndClose = () => {
+    if (!canCopy) return;
+    handleCopy();
+    toast.info('Copied');
+    closeActions();
+  };
+  const handlePasteAndClose = () => {
+    if (!canPaste) return;
+    handlePaste();
+    toast.success('Pasted');
+    closeActions();
+  };
+
+  const canCopy = !!current;
+  const canPaste = !!current && !!editorData && !!setEditorData && !!copiedNode;
+
   return (
     <div
       className="editor-header"
@@ -93,12 +236,12 @@ export function EditorHeader({
       aria-label="Editor utility header"
     >
       <div className="editor-header__devices">
-        {devices.slice(0, 5).map((device: Device) => (
+        {devices.slice(0, 5).map((deviceOption: Device) => (
           <DeviceButton
-            key={device.name}
-            selectedDevice={device}
-            setSelectedDevice={setDevice}
-            device={device}
+            key={deviceOption.name}
+            selectedDevice={selectedDevice}
+            onSelect={setDevice}
+            device={deviceOption}
           />
         ))}
         <button
@@ -110,74 +253,156 @@ export function EditorHeader({
         </button>
       </div>
       <div className="editor-header__actions">
-        <button
-          className="editor-button editor-save-button"
-          aria-label="Save project data"
-          onClick={() => onSaveProject && onSaveProject()}
-        >
-          Save
-        </button>
-        <button
-          className="editor-button editor-save-previewconfig-button"
-          aria-label="Save previewConfig"
-          onClick={() => useRenderStore.getState().forceRender()}
-        >
-          Force Render
-        </button>
-        <button
-          className="editor-button"
-          aria-label="Copy node"
-          onClick={handleCopy}
-        >
-          Copy
-        </button>
-        {copiedNode && (
+        <div className="editor-actions-dropdown" ref={actionsRef}>
           <button
-            className="editor-button"
-            aria-label="Paste node"
-            onClick={handlePaste}
+            className="editor-button editor-actions-dropdown__trigger"
+            aria-label="Open actions menu"
+            aria-haspopup="menu"
+            aria-expanded={isActionsOpen}
+            aria-controls={actionsMenuId}
+            onClick={() => setIsActionsOpen((v) => !v)}
           >
-            Paste
+            Actions
+            <span className="editor-actions-dropdown__caret" aria-hidden="true">
+              ▾
+            </span>
           </button>
-        )}
+          {isActionsOpen && (
+            <ul
+              id={actionsMenuId}
+              className="editor-actions-dropdown__menu"
+              role="menu"
+              aria-label="Editor actions"
+            >
+              <li role="none" className="editor-actions-dropdown__submenu-root">
+                <button
+                  className="editor-actions-dropdown__item"
+                  role="menuitem"
+                  aria-haspopup="menu"
+                  aria-label="Replace from samples"
+                  onClick={(e) => e.preventDefault()}
+                >
+                  Replace from samples
+                  <span
+                    className="editor-actions-dropdown__submenu-caret"
+                    aria-hidden="true"
+                  >
+                    ◂
+                  </span>
+                </button>
+                <ul
+                  className="editor-actions-dropdown__submenu"
+                  role="menu"
+                  aria-label="Replace from sample"
+                >
+                  {sortedSamples.map((s) => (
+                    <li role="none" key={`replace-${s.name}`}>
+                      <button
+                        className="editor-actions-dropdown__item editor-actions-dropdown__item--compact"
+                        role="menuitem"
+                        onClick={() => {
+                          handleReplaceFromSample(s);
+                          closeActions();
+                        }}
+                      >
+                        {s.name}
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              </li>
+              <li role="none" className="editor-actions-dropdown__submenu-root">
+                <button
+                  className="editor-actions-dropdown__item"
+                  role="menuitem"
+                  aria-haspopup="menu"
+                  aria-label="Paste from samples"
+                  onClick={(e) => e.preventDefault()}
+                  disabled={!current}
+                  title={!current ? 'Select a node first' : undefined}
+                >
+                  Paste from samples
+                  <span
+                    className="editor-actions-dropdown__submenu-caret"
+                    aria-hidden="true"
+                  >
+                    ◂
+                  </span>
+                </button>
+                <ul
+                  className="editor-actions-dropdown__submenu"
+                  role="menu"
+                  aria-label="Paste from sample"
+                >
+                  {sortedSamples.map((s) => (
+                    <li role="none" key={`paste-${s.name}`}>
+                      <button
+                        className="editor-actions-dropdown__item editor-actions-dropdown__item--compact"
+                        role="menuitem"
+                        onClick={() => {
+                          handlePasteFromSample(s);
+                          closeActions();
+                        }}
+                        disabled={!current}
+                      >
+                        {s.name}
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              </li>
+              <li role="none">
+                <button
+                  className="editor-actions-dropdown__item editor-save-button"
+                  role="menuitem"
+                  onClick={handleSaveProject}
+                  disabled={!onSaveProject}
+                >
+                  Save
+                </button>
+              </li>
+              {onRestoreProject && (
+                <li role="none">
+                  <button
+                    className="editor-actions-dropdown__item editor-save-previewconfig-button"
+                    role="menuitem"
+                    onClick={handleRestoreProject}
+                  >
+                    Restore
+                  </button>
+                </li>
+              )}
+              <li role="none">
+                <button
+                  className="editor-actions-dropdown__item"
+                  role="menuitem"
+                  onClick={handleCopyAndClose}
+                  disabled={!canCopy}
+                >
+                  Copy
+                </button>
+              </li>
+              <li role="none">
+                <button
+                  className="editor-actions-dropdown__item"
+                  role="menuitem"
+                  onClick={handlePasteAndClose}
+                  disabled={!canPaste}
+                >
+                  Paste
+                </button>
+              </li>
+            </ul>
+          )}
+        </div>
       </div>
       {isDevicesModalOpen && (
-        <div
-          className="editor-modal"
-          role="dialog"
-          aria-modal="true"
-          aria-labelledby="device-selector-title"
-        >
-          <div
-            className="editor-modal__overlay"
-            onClick={() => setIsDevicesModalOpen(false)}
-          />
-          <div className="editor-modal__content">
-            <div className="editor-modal__header">
-              <h3 id="device-selector-title">Select a device</h3>
-              <button
-                className="editor-button"
-                aria-label="Close device selector"
-                onClick={() => setIsDevicesModalOpen(false)}
-              >
-                Close
-              </button>
-            </div>
-            <div className="editor-device-grid" role="list">
-              {devices.map((device: Device) => (
-                <DeviceButton
-                  key={device.name}
-                  selectedDevice={device}
-                  setSelectedDevice={(d: Device) => {
-                    setDevice(d);
-                    setIsDevicesModalOpen(false);
-                  }}
-                  device={device}
-                />
-              ))}
-            </div>
-          </div>
-        </div>
+        <DeviceSelectorModal
+          devices={devices}
+          selectedDevice={selectedDevice}
+          onSelect={setDevice}
+          onClose={() => setIsDevicesModalOpen(false)}
+        />
       )}
     </div>
   );