astro-tractstack 2.0.0-rc.0

package/templates/src/components/edit/state/StylesMemory.tsx

@@ -0,0 +1,310 @@
+import { useState, useEffect } from 'react';
+import { useStore } from '@nanostores/react';
+import ClipboardDocumentIcon from '@heroicons/react/24/outline/ClipboardDocumentIcon';
+import PaintBrushIcon from '@heroicons/react/24/outline/PaintBrushIcon';
+import { getCtx } from '@/stores/nodes';
+import {
+  isLinkNode,
+  isMarkdownPaneFragmentNode,
+  isPaneNode,
+} from '@/utils/compositor/typeGuards';
+import { cloneDeep, isDeepEqual } from '@/utils/helpers';
+import {
+  settingsPanelStore,
+  elementStylesMemoryStore,
+  parentStylesMemoryStore,
+  buttonStylesMemoryStore,
+} from '@/stores/storykeep';
+import type {
+  PanelState,
+  Tag,
+  BaseNode,
+  FlatNode,
+} from '@/types/compositorTypes';
+
+interface StylesMemoryProps {
+  node: FlatNode;
+  parentNode?: BaseNode;
+}
+
+export const StylesMemory = ({ node, parentNode }: StylesMemoryProps) => {
+  const elementStyles = useStore(elementStylesMemoryStore);
+  const parentStyles = useStore(parentStylesMemoryStore);
+  const buttonStyles = useStore(buttonStylesMemoryStore);
+  const [isMatchingMemory, setIsMatchingMemory] = useState(false);
+  const [prevPanelState, setPrevPanelState] = useState<PanelState | null>(null);
+
+  const type = isMarkdownPaneFragmentNode(node)
+    ? 'parent'
+    : isLinkNode(node)
+      ? 'button'
+      : 'element';
+
+  // **Effect to Check Style Matching**
+  useEffect(() => {
+    if (!node) return;
+
+    switch (type) {
+      case 'parent': {
+        if (isMarkdownPaneFragmentNode(node) && isPaneNode(parentNode)) {
+          const current = {
+            styles: node.parentClasses || [],
+            bgColour: parentNode.bgColour || '',
+          };
+          const memoryState = {
+            styles: parentStyles?.parentClasses || [],
+            bgColour: parentStyles?.bgColour || null,
+          };
+          setIsMatchingMemory(isDeepEqual(current, memoryState));
+        }
+        break;
+      }
+      case 'button': {
+        if (!isLinkNode(node) || !node.buttonPayload) break;
+        const current = {
+          buttonClasses: node.buttonPayload.buttonClasses || {},
+          buttonHoverClasses: node.buttonPayload.buttonHoverClasses || {},
+        };
+        setIsMatchingMemory(isDeepEqual(current, buttonStyles));
+        break;
+      }
+      case 'element': {
+        if (
+          !parentNode ||
+          !isMarkdownPaneFragmentNode(parentNode) ||
+          !('tagName' in node)
+        )
+          break;
+        const tagName = node.tagName as Tag;
+        const memoryStyles = elementStyles[tagName];
+        if (!memoryStyles) {
+          setIsMatchingMemory(false);
+          break;
+        }
+        const defaultClasses = parentNode.defaultClasses?.[tagName];
+        const overrideClasses = node.overrideClasses;
+        const current = {
+          mobile: {
+            ...(defaultClasses?.mobile || {}),
+            ...(overrideClasses?.mobile || {}),
+          },
+          tablet: {
+            ...(defaultClasses?.tablet || {}),
+            ...(overrideClasses?.tablet || {}),
+          },
+          desktop: {
+            ...(defaultClasses?.desktop || {}),
+            ...(overrideClasses?.desktop || {}),
+          },
+        };
+        setIsMatchingMemory(isDeepEqual(current, memoryStyles));
+        break;
+      }
+    }
+  }, [node, parentNode, elementStyles, parentStyles, buttonStyles, type]);
+
+  // **Handle Copying Styles to Memory**
+  const handleCopy = () => {
+    if (!node) return;
+
+    switch (type) {
+      case 'parent': {
+        if (!isMarkdownPaneFragmentNode(node) || !isPaneNode(parentNode)) break;
+        parentStylesMemoryStore.set({
+          parentClasses: node.parentClasses ? [...node.parentClasses] : [],
+          bgColour: parentNode?.bgColour || null,
+        });
+        break;
+      }
+      case 'button': {
+        if (!isLinkNode(node) || !node.buttonPayload) break;
+        buttonStylesMemoryStore.set({
+          buttonClasses: cloneDeep(node.buttonPayload.buttonClasses || {}),
+          buttonHoverClasses: cloneDeep(
+            node.buttonPayload.buttonHoverClasses || {}
+          ),
+        });
+        break;
+      }
+      case 'element': {
+        if (
+          !parentNode ||
+          !isMarkdownPaneFragmentNode(parentNode) ||
+          !('tagName' in node)
+        )
+          break;
+        const tagName = node.tagName as Tag;
+        const defaultClasses = parentNode.defaultClasses?.[tagName];
+        const overrideClasses = node.overrideClasses;
+
+        const newStyles = {
+          ...elementStyles,
+          [tagName]: {
+            mobile: {
+              ...(defaultClasses?.mobile || {}),
+              ...(overrideClasses?.mobile || {}),
+            },
+            tablet: {
+              ...(defaultClasses?.tablet || {}),
+              ...(overrideClasses?.tablet || {}),
+            },
+            desktop: {
+              ...(defaultClasses?.desktop || {}),
+              ...(overrideClasses?.desktop || {}),
+            },
+          },
+        };
+        elementStylesMemoryStore.set(newStyles);
+        break;
+      }
+    }
+    setIsMatchingMemory(true);
+  };
+
+  // **Handle Pasting Styles from Memory**
+  const handlePaste = () => {
+    const ctx = getCtx();
+    if (!node) return;
+
+    switch (type) {
+      case 'parent': {
+        if (!isMarkdownPaneFragmentNode(node) || !isPaneNode(parentNode)) break;
+        const memoryState = parentStyles;
+        if (!memoryState) break;
+        const updatedNode = cloneDeep(node);
+        const updatedParent = cloneDeep(parentNode);
+        if (memoryState.parentClasses) {
+          updatedNode.parentClasses = cloneDeep(memoryState.parentClasses);
+        }
+        if (typeof memoryState.bgColour === 'string') {
+          updatedParent.bgColour = memoryState.bgColour;
+        }
+        ctx.modifyNodes([
+          { ...updatedNode, isChanged: true },
+          { ...updatedParent, isChanged: true },
+        ]);
+        break;
+      }
+      case 'button': {
+        if (!isLinkNode(node)) break;
+        if (!buttonStyles) break;
+
+        const updatedNode = cloneDeep(node);
+        if (!updatedNode.buttonPayload) break;
+
+        updatedNode.buttonPayload = {
+          ...updatedNode.buttonPayload,
+          buttonClasses: cloneDeep(buttonStyles.buttonClasses),
+          buttonHoverClasses: cloneDeep(buttonStyles.buttonHoverClasses),
+        };
+
+        ctx.modifyNodes([{ ...updatedNode, isChanged: true }]);
+        const currentSignal = settingsPanelStore.get();
+        if (currentSignal) {
+          settingsPanelStore.set({ ...currentSignal });
+        }
+        break;
+      }
+      case 'element': {
+        if (
+          !parentNode ||
+          !isMarkdownPaneFragmentNode(parentNode) ||
+          !('tagName' in node)
+        )
+          break;
+        const memoryStyles = elementStyles[node.tagName as Tag];
+        if (!memoryStyles) break;
+
+        const updatedNode = cloneDeep(node);
+        const updatedParent = cloneDeep(parentNode);
+
+        if (!updatedParent.defaultClasses) {
+          updatedParent.defaultClasses = {};
+        }
+        updatedParent.defaultClasses[node.tagName] = cloneDeep(memoryStyles);
+        delete updatedNode.overrideClasses;
+
+        ctx.modifyNodes([
+          { ...updatedParent, isChanged: true },
+          { ...updatedNode, isChanged: true },
+        ]);
+        const currentSignal = settingsPanelStore.get();
+        if (currentSignal) {
+          settingsPanelStore.set({ ...currentSignal });
+        }
+        break;
+      }
+    }
+  };
+
+  // **Handle Mouse Events for Help HUD**
+  const handleMouseEnter = (mode: 'copy' | 'paste') => {
+    const ctx = getCtx();
+    setPrevPanelState(ctx.activePaneMode.get());
+    ctx.setPanelMode(node.id, 'styles-memory', mode);
+  };
+
+  const handleMouseLeave = () => {
+    const ctx = getCtx();
+    if (prevPanelState) {
+      ctx.activePaneMode.set(prevPanelState);
+    } else {
+      ctx.activePaneMode.set({ paneId: '', panel: '', mode: '' });
+    }
+    setPrevPanelState(null);
+  };
+
+  // **Check if Memory Exists**
+  const hasMemory =
+    type === 'parent'
+      ? !!parentStyles
+      : type === 'button'
+        ? !!buttonStyles
+        : 'tagName' in node
+          ? !!elementStyles[node.tagName as Tag]
+          : false;
+
+  // **Render Component**
+  return (
+    <div className="flex items-center gap-2">
+      <button
+        onClick={handleCopy}
+        onMouseEnter={() => handleMouseEnter('copy')}
+        onMouseLeave={handleMouseLeave}
+        className={`transition-colors ${
+          isMatchingMemory
+            ? 'text-myorange hover:text-myblack'
+            : 'text-mydarkgrey hover:text-black'
+        }`}
+        title="Copy styles to memory"
+      >
+        <PaintBrushIcon className="h-4 w-4" />
+      </button>
+
+      <div
+        onMouseEnter={() => handleMouseEnter('paste')}
+        onMouseLeave={handleMouseLeave}
+        className="flex items-center"
+      >
+        <button
+          onClick={handlePaste}
+          disabled={!hasMemory || isMatchingMemory}
+          className={`transition-colors ${
+            !hasMemory || isMatchingMemory
+              ? 'text-mylightgrey cursor-not-allowed'
+              : 'text-mydarkgrey hover:text-black'
+          }`}
+          title={
+            !hasMemory
+              ? 'No styles in memory'
+              : isMatchingMemory
+                ? 'Current styles match memory'
+                : 'Paste styles from memory'
+          }
+        >
+          <ClipboardDocumentIcon className="h-4 w-4" />
+        </button>
+      </div>
+    </div>
+  );
+};

package/templates/src/components/edit/storyfragment/StoryFragmentConfigPanel.tsx

@@ -0,0 +1,289 @@
+import { useState, useEffect, useRef } from 'react';
+import { useStore } from '@nanostores/react';
+import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
+import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
+import TagIcon from '@heroicons/react/24/outline/TagIcon';
+import {
+  fullContentMapStore,
+  settingsPanelStore,
+  urlParamsStore,
+} from '@/stores/storykeep';
+import { getCtx } from '@/stores/nodes';
+import ColorPickerCombo from '@/components/fields/ColorPickerCombo';
+import StoryFragmentSlugPanel from './StoryFragmentPanel_slug';
+import StoryFragmentMenuPanel from './StoryFragmentPanel_menu';
+import StoryFragmentOpenGraphPanel from './StoryFragmentPanel_og';
+import {
+  tailwindToHex,
+  hexToTailwind,
+  findClosestTailwindColor,
+} from '@/utils/compositor/tailwindColors';
+import { cloneDeep } from '@/utils/helpers';
+import type { FullContentMapItem, BrandConfig } from '@/types/tractstack';
+import {
+  StoryFragmentMode,
+  type StoryFragmentNode,
+} from '@/types/compositorTypes';
+
+const StoryFragmentConfigPanel = ({
+  nodeId,
+  config,
+}: {
+  nodeId: string;
+  config?: BrandConfig;
+}) => {
+  const [isNodeAvailable, setIsNodeAvailable] = useState(false);
+  const [storyfragmentNode, setStoryfragmentNode] =
+    useState<StoryFragmentNode | null>(null);
+  const [isSEOReady, setIsSEOReady] = useState(false);
+  const [tempBgColor, setTempBgColor] = useState<string | null>(null);
+  const urlParamsProcessed = useRef(false);
+
+  const ctx = getCtx();
+  const isTemplate = useStore(ctx.isTemplate);
+  const activePaneMode = useStore(ctx.activePaneMode);
+  const $contentMap = useStore(fullContentMapStore) as FullContentMapItem[];
+  const $urlParams = useStore(urlParamsStore);
+
+  // Check if this specific panel is active
+  const isActive =
+    activePaneMode.panel === 'storyfragment' &&
+    activePaneMode.paneId === nodeId;
+
+  // Get the mode from activePaneMode or use DEFAULT
+  const mode =
+    isActive && activePaneMode.mode
+      ? (activePaneMode.mode as StoryFragmentMode)
+      : StoryFragmentMode.DEFAULT;
+
+  const setMode = (newMode: StoryFragmentMode) => {
+    // Set the panel mode in the context
+    ctx.setPanelMode(nodeId, 'storyfragment', newMode);
+
+    // Clear any settings panel
+    settingsPanelStore.set(null);
+  };
+
+  useEffect(() => {
+    // Check for node availability
+    const checkNode = () => {
+      const ctx = getCtx();
+      const allNodes = ctx.allNodes.get();
+      const node = allNodes.get(nodeId) as StoryFragmentNode;
+
+      if (node) {
+        setStoryfragmentNode(node);
+        setIsNodeAvailable(true);
+      }
+    };
+
+    // Initial check
+    checkNode();
+
+    // Set up an interval to check until node is available
+    const intervalId = setInterval(() => {
+      if (!isNodeAvailable) {
+        checkNode();
+      } else {
+        clearInterval(intervalId);
+      }
+    }, 100); // Check every 100ms
+
+    // Cleanup
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [nodeId]);
+
+  // Handle URL params auto-opening
+  useEffect(() => {
+    if (!isNodeAvailable || urlParamsProcessed.current) return;
+
+    const params = $urlParams;
+
+    // Check for URL params and auto-open panels
+    if (params.menu || params.seo) {
+      // Menu takes priority if both are present
+      if (params.menu) {
+        setMode(StoryFragmentMode.MENU);
+      } else if (params.seo) {
+        setMode(StoryFragmentMode.OG);
+      }
+
+      // Remove the flags from URL params store (one-time action)
+      const cleanedParams = { ...params };
+      delete cleanedParams.menu;
+      delete cleanedParams.seo;
+      urlParamsStore.set(cleanedParams);
+
+      urlParamsProcessed.current = true;
+    }
+  }, [isNodeAvailable, $urlParams]);
+
+  // Check if SEO is ready by checking the content map
+  useEffect(() => {
+    if (!isNodeAvailable || !storyfragmentNode) return;
+
+    // Find the story fragment content in the content map
+    const storyFragmentContent = $contentMap.find(
+      (item) => item.type === 'StoryFragment' && item.id === nodeId
+    );
+
+    // Set SEO ready if description exists and is not empty
+    const hasValidDescription = Boolean(
+      storyFragmentContent?.description &&
+        storyFragmentContent.description.trim() !== ''
+    );
+
+    setIsSEOReady(hasValidDescription);
+  }, [nodeId, isNodeAvailable, storyfragmentNode, $contentMap]);
+
+  const handleBgColorChange = (newColor: string) => {
+    setTempBgColor(newColor);
+  };
+
+  const applyBgColorChange = () => {
+    if (!storyfragmentNode) return;
+
+    const ctx = getCtx();
+    const updatedNode: StoryFragmentNode = {
+      ...cloneDeep(storyfragmentNode),
+      isChanged: true,
+    };
+
+    if (!tempBgColor) {
+      // Remove background color entirely (empty string means no color)
+      delete updatedNode.tailwindBgColour;
+    } else {
+      // Set the new background color
+      const val = hexToTailwind(tempBgColor, config?.BRAND_COLOURS);
+      const exactValPayload = val
+        ? null
+        : findClosestTailwindColor(tempBgColor);
+      const exactVal =
+        exactValPayload && `${exactValPayload.name}-${exactValPayload.shade}`;
+
+      if (typeof exactVal === `string`) updatedNode.tailwindBgColour = exactVal;
+      else if (typeof val === `string`) updatedNode.tailwindBgColour = val;
+      else updatedNode.tailwindBgColour = undefined;
+    }
+
+    ctx.modifyNodes([updatedNode]);
+    setStoryfragmentNode(updatedNode);
+    setTempBgColor(null);
+  };
+
+  if (!isNodeAvailable || !storyfragmentNode) {
+    return null;
+  }
+
+  if (mode === StoryFragmentMode.SLUG) {
+    return (
+      <StoryFragmentSlugPanel
+        nodeId={nodeId}
+        setMode={setMode}
+        config={config!}
+      />
+    );
+  } else if (mode === StoryFragmentMode.MENU) {
+    return <StoryFragmentMenuPanel nodeId={nodeId} setMode={setMode} />;
+  } else if (mode === StoryFragmentMode.OG) {
+    return (
+      <StoryFragmentOpenGraphPanel
+        nodeId={nodeId}
+        setMode={setMode}
+        config={config}
+      />
+    );
+  }
+
+  return (
+    <div className="mb-4">
+      <div className="w-full rounded-b-md bg-white p-4">
+        <div className="flex flex-wrap items-center gap-2">
+          <button
+            onClick={() => setMode(StoryFragmentMode.OG)}
+            className="text-md min-h-9 rounded border border-cyan-200 bg-white px-3 text-cyan-700 shadow-sm transition-colors hover:bg-cyan-700 hover:text-white focus:bg-cyan-700 focus:text-white"
+          >
+            Title: <span className="font-bold">{storyfragmentNode.title}</span>
+          </button>
+
+          <button
+            onClick={() => setMode(StoryFragmentMode.SLUG)}
+            className="text-md h-9 rounded border border-cyan-200 bg-white px-3 text-cyan-700 shadow-sm transition-colors hover:bg-cyan-700 hover:text-white focus:bg-cyan-700 focus:text-white"
+          >
+            Slug: <span className="font-bold">{storyfragmentNode.slug}</span>
+          </button>
+
+          {!isTemplate && (
+            <>
+              <button
+                onClick={() => setMode(StoryFragmentMode.MENU)}
+                className="text-md flex h-9 items-center gap-1 rounded border border-cyan-200 bg-white px-3 text-cyan-700 shadow-sm transition-colors hover:bg-cyan-700 hover:text-white focus:bg-cyan-700 focus:text-white"
+              >
+                {storyfragmentNode.menuId ? (
+                  <>
+                    <CheckIcon className="h-4 w-4" />
+                    <span className="font-bold">Has Menu</span>
+                  </>
+                ) : (
+                  <>
+                    <XMarkIcon className="h-4 w-4" />
+                    <span>No Menu</span>
+                  </>
+                )}
+              </button>
+
+              <button
+                onClick={() => setMode(StoryFragmentMode.OG)}
+                className="text-md flex h-9 items-center gap-1 rounded border border-cyan-200 bg-white px-3 text-cyan-700 shadow-sm transition-colors hover:bg-cyan-700 hover:text-white focus:bg-cyan-700 focus:text-white"
+              >
+                {isSEOReady ? (
+                  <>
+                    <CheckIcon className="h-4 w-4" />
+                    <span className="font-bold">SEO Ready</span>
+                  </>
+                ) : (
+                  <>
+                    <TagIcon className="mr-1 h-4 w-4" />
+                    <span>SEO Ready?</span>
+                  </>
+                )}
+              </button>
+            </>
+          )}
+
+          {config && (
+            <div className="flex items-center gap-2">
+              <div className="text-md">Background Colour:</div>
+              <ColorPickerCombo
+                title=""
+                defaultColor={
+                  storyfragmentNode.tailwindBgColour
+                    ? tailwindToHex(
+                        storyfragmentNode.tailwindBgColour,
+                        config?.BRAND_COLOURS || null
+                      )
+                    : ''
+                }
+                onColorChange={handleBgColorChange}
+                config={config}
+                allowNull={true}
+              />
+              {tempBgColor !== null && (
+                <button
+                  onClick={applyBgColorChange}
+                  className="text-md h-9 rounded bg-cyan-700 px-3 text-white shadow-sm transition-colors hover:bg-cyan-800 focus:bg-cyan-800"
+                >
+                  Apply
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StoryFragmentConfigPanel;