astro-tractstack 2.0.17 → 2.0.18

package/templates/src/components/edit/panels/StyleParentPanel_add.tsx

@@ -5,9 +5,17 @@ import ChevronUpDownIcon from '@heroicons/react/24/outline/ChevronUpDownIcon';
 import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
 import { settingsPanelStore } from '@/stores/storykeep';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import {
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
 import { useDropdownDirection } from '@/utils/helpers';
-import type { BasePanelProps, PaneFragmentNode } from '@/types/compositorTypes';
+import type {
+  ParentBasePanelProps,
+  MarkdownPaneFragmentNode,
+  GridLayoutNode,
+  DefaultClassValue,
+} from '@/types/compositorTypes';
 
 const RECOMMENDED_STYLES = [
   { key: 'bgCOLOR', title: 'Background Color' },
@@ -54,41 +62,66 @@ interface StyleOption {
   values: string[];
 }
 
-const StyleParentPanelAdd = ({ node, layer }: BasePanelProps) => {
+type StyleableNode = MarkdownPaneFragmentNode | GridLayoutNode;
+
+// This custom prop is passed via the settingsPanelStore signal.
+type CustomPanelProps = ParentBasePanelProps & {
+  targetProperty: 'parentClasses' | 'gridClasses';
+};
+
+const StyleParentPanelAdd = ({
+  node,
+  layer,
+  targetProperty,
+}: CustomPanelProps) => {
   const [query, setQuery] = useState('');
   const [showAdvanced, setShowAdvanced] = useState(false);
   const [selectedStyle, setSelectedStyle] = useState<string | null>(null);
   const comboboxRef = useRef<HTMLDivElement>(null);
   const { openAbove } = useDropdownDirection(comboboxRef);
 
-  const paneFragmentNode = node as PaneFragmentNode | null;
+  const styleableNode = node as StyleableNode | null;
 
   if (
-    !paneFragmentNode ||
-    !isMarkdownPaneFragmentNode(paneFragmentNode) ||
-    !layer
+    !styleableNode ||
+    (!isMarkdownPaneFragmentNode(styleableNode) &&
+      !isGridLayoutNode(styleableNode))
   ) {
     return null;
   }
 
-  const currentLayerClasses = new Set<string>();
+  const currentClassesSet = useMemo(() => {
+    const classSet = new Set<string>();
+    if (!styleableNode) return classSet;
 
-  if (paneFragmentNode.parentClasses?.[layer - 1]) {
-    const layerClasses = paneFragmentNode.parentClasses[layer - 1];
-    Object.keys(layerClasses.mobile || {}).forEach((key) =>
-      currentLayerClasses.add(key)
-    );
-    Object.keys(layerClasses.tablet || {}).forEach((key) =>
-      currentLayerClasses.add(key)
-    );
-    Object.keys(layerClasses.desktop || {}).forEach((key) =>
-      currentLayerClasses.add(key)
-    );
-  }
+    let classesSource: DefaultClassValue | undefined;
+
+    if (targetProperty === 'parentClasses' && layer) {
+      const layerIndex = layer - 1;
+      classesSource = styleableNode.parentClasses?.[layerIndex];
+    } else if (targetProperty === 'gridClasses') {
+      if (isMarkdownPaneFragmentNode(styleableNode)) {
+        classesSource = styleableNode.gridClasses;
+      }
+    }
+
+    if (classesSource) {
+      Object.keys(classesSource.mobile || {}).forEach((key) =>
+        classSet.add(key)
+      );
+      Object.keys(classesSource.tablet || {}).forEach((key) =>
+        classSet.add(key)
+      );
+      Object.keys(classesSource.desktop || {}).forEach((key) =>
+        classSet.add(key)
+      );
+    }
 
-  const styles = getFilteredStyles(showAdvanced, currentLayerClasses);
+    return classSet;
+  }, [styleableNode, layer, targetProperty]);
+
+  const styles = getFilteredStyles(showAdvanced, currentClassesSet);
 
-  // Create collection for Ark UI Combobox
   const collection = useMemo(() => {
     const filteredStyles =
       query === ''
@@ -107,24 +140,32 @@ const StyleParentPanelAdd = ({ node, layer }: BasePanelProps) => {
   }, [styles, query]);
 
   const availableRecommendedStyles = RECOMMENDED_STYLES.filter(
-    (style) => !currentLayerClasses.has(style.key)
+    (style) => !currentClassesSet.has(style.key)
   );
 
-  const handleValueChange = useCallback(
-    (details: { value: string[] }) => {
-      const styleKey = details.value[0] || '';
-      if (!styleKey) return;
-
-      setSelectedStyle(styleKey);
+  const dispatchUpdate = useCallback(
+    (styleKey: string) => {
+      if (!styleableNode) return;
       settingsPanelStore.set({
-        nodeId: paneFragmentNode.id,
+        nodeId: styleableNode.id,
         layer: layer,
         className: styleKey,
         action: 'style-parent-update',
+        targetProperty: targetProperty,
         expanded: true,
       });
     },
-    [paneFragmentNode.id, layer]
+    [styleableNode, layer, targetProperty]
+  );
+
+  const handleValueChange = useCallback(
+    (details: { value: string[] }) => {
+      const styleKey = details.value[0] || '';
+      if (!styleKey) return;
+      setSelectedStyle(styleKey);
+      dispatchUpdate(styleKey);
+    },
+    [dispatchUpdate]
   );
 
   const handleInputChange = useCallback(
@@ -136,30 +177,24 @@ const StyleParentPanelAdd = ({ node, layer }: BasePanelProps) => {
 
   const handleStyleClick = useCallback(
     (styleKey: string) => {
-      settingsPanelStore.set({
-        nodeId: paneFragmentNode.id,
-        layer: layer,
-        className: styleKey,
-        action: 'style-parent-update',
-        expanded: true,
-      });
+      dispatchUpdate(styleKey);
     },
-    [paneFragmentNode.id, layer]
+    [dispatchUpdate]
   );
 
   const handleCancel = () => {
+    if (!styleableNode) return;
     settingsPanelStore.set({
-      nodeId: paneFragmentNode.id,
+      nodeId: styleableNode.id,
       layer: layer,
       action: 'style-parent',
       expanded: true,
     });
   };
 
-  // CSS to properly style the combobox items with hover and selection
   const comboboxItemStyles = `
     .style-item[data-highlighted] {
-      background-color: #0891b2; /* bg-cyan-600 */
+      background-color: #0891b2;
       color: white;
     }
     .style-item[data-highlighted] .style-indicator {

package/templates/src/components/edit/panels/StyleParentPanel_deleteLayer.tsx

@@ -1,21 +1,37 @@
 import { settingsPanelStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import {
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
 import { cloneDeep } from '@/utils/helpers';
 import type {
-  BasePanelProps,
+  ParentBasePanelProps,
   MarkdownPaneFragmentNode,
+  GridLayoutNode,
 } from '@/types/compositorTypes';
 
-const StyleParentDeleteLayerPanel = ({ node, layer }: BasePanelProps) => {
-  if (!layer) return null;
-  if (!node || !isMarkdownPaneFragmentNode(node)) return null;
-  if (!node.parentClasses) return null;
+type StyleableNode = MarkdownPaneFragmentNode | GridLayoutNode;
+
+const StyleParentDeleteLayerPanel = ({ node, layer }: ParentBasePanelProps) => {
+  const styleableNode = node as StyleableNode | null;
+
+  if (
+    !layer ||
+    !styleableNode ||
+    !(
+      isMarkdownPaneFragmentNode(styleableNode) ||
+      isGridLayoutNode(styleableNode)
+    )
+  ) {
+    return null;
+  }
+  if (!styleableNode.parentClasses) return null;
 
   const layerIndex = layer - 1;
-  if (layerIndex >= node.parentClasses.length) return null;
+  if (layerIndex >= styleableNode.parentClasses.length) return null;
 
-  const currentLayer = node.parentClasses[layerIndex];
+  const currentLayer = styleableNode.parentClasses[layerIndex];
   const allKeys = new Set([
     ...Object.keys(currentLayer.mobile || {}),
     ...Object.keys(currentLayer.tablet || {}),
@@ -25,7 +41,7 @@ const StyleParentDeleteLayerPanel = ({ node, layer }: BasePanelProps) => {
 
   const resetStore = () => {
     settingsPanelStore.set({
-      nodeId: node.id,
+      nodeId: styleableNode.id,
       action: 'style-parent',
       expanded: true,
     });
@@ -33,25 +49,25 @@ const StyleParentDeleteLayerPanel = ({ node, layer }: BasePanelProps) => {
 
   const handleYesClick = () => {
     const ctx = getCtx();
-    const allNodes = ctx.allNodes.get();
-    const markdownNode = allNodes.get(node.id) as MarkdownPaneFragmentNode;
+    const nodeToUpdate = cloneDeep(
+      ctx.allNodes.get().get(styleableNode.id)
+    ) as StyleableNode;
 
-    if (!markdownNode || !isMarkdownPaneFragmentNode(markdownNode)) return;
-    if (!markdownNode.parentClasses) return;
+    if (!nodeToUpdate.parentClasses) return;
 
     // If this is the last layer, replace with empty classes instead of removing
-    if (markdownNode.parentClasses.length === 1) {
+    if (nodeToUpdate.parentClasses.length === 1) {
       const emptyLayer = {
         mobile: {},
         tablet: {},
         desktop: {},
       };
 
-      const updatedNode: MarkdownPaneFragmentNode = cloneDeep({
-        ...markdownNode,
+      const updatedNode = {
+        ...nodeToUpdate,
         parentClasses: [emptyLayer],
         isChanged: true,
-      });
+      };
 
       ctx.modifyNodes([updatedNode]);
       resetStore();
@@ -60,15 +76,15 @@ const StyleParentDeleteLayerPanel = ({ node, layer }: BasePanelProps) => {
 
     // Otherwise remove the layer
     const newParentClasses = [
-      ...markdownNode.parentClasses.slice(0, layerIndex),
-      ...markdownNode.parentClasses.slice(layerIndex + 1),
+      ...nodeToUpdate.parentClasses.slice(0, layerIndex),
+      ...nodeToUpdate.parentClasses.slice(layerIndex + 1),
     ];
 
-    const updatedNode: MarkdownPaneFragmentNode = cloneDeep({
-      ...markdownNode,
+    const updatedNode = {
+      ...nodeToUpdate,
       parentClasses: newParentClasses,
       isChanged: true,
-    });
+    };
 
     ctx.modifyNodes([updatedNode]);
     resetStore();

package/templates/src/components/edit/panels/StyleParentPanel_remove.tsx

@@ -1,87 +1,192 @@
+import { useState, useCallback, useMemo } from 'react';
 import { settingsPanelStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
-import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
 import { cloneDeep } from '@/utils/helpers';
+import {
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
 import type {
-  BasePanelProps,
+  ParentBasePanelProps,
   MarkdownPaneFragmentNode,
+  GridLayoutNode,
+  DefaultClassValue,
 } from '@/types/compositorTypes';
 
-const StyleParentRemovePanel = ({ node, layer, className }: BasePanelProps) => {
-  if (!className) return null;
+type StyleableNode = MarkdownPaneFragmentNode | GridLayoutNode;
 
-  const friendlyName = tailwindClasses[className]?.title || className;
+// This custom prop is passed via the settingsPanelStore signal.
+type CustomPanelProps = ParentBasePanelProps & {
+  targetProperty: 'parentClasses' | 'gridClasses';
+};
 
-  const resetStore = () => {
-    if (node?.id)
-      settingsPanelStore.set({
-        nodeId: node.id,
-        layer: layer,
-        action: `style-parent`,
-        expanded: true,
-      });
-  };
+const StyleParentPanelRemove = ({
+  node,
+  layer,
+  className,
+  targetProperty,
+}: CustomPanelProps) => {
+  const [confirm, setConfirm] = useState(false);
+  const ctx = getCtx();
 
-  const handleYesClick = () => {
-    if (!node || !className || !layer) {
-      console.error('Missing required properties for class removal');
-      return;
+  const styleableNode = node as StyleableNode | null;
+
+  if (
+    !styleableNode ||
+    (!isMarkdownPaneFragmentNode(styleableNode) &&
+      !isGridLayoutNode(styleableNode))
+  ) {
+    return null;
+  }
+
+  const values = useMemo(() => {
+    if (!styleableNode || !layer || !className) {
+      return { mobile: '', tablet: '', desktop: '' };
     }
-    const ctx = getCtx();
-    const allNodes = ctx.allNodes.get();
-    const markdownNode = cloneDeep(
-      allNodes.get(node.id) as MarkdownPaneFragmentNode
-    );
-    if (!markdownNode || !isMarkdownPaneFragmentNode(markdownNode)) return;
-    const layerIndex = layer - 1;
-    const layerClasses = markdownNode?.parentClasses?.[layerIndex];
-    if (!layerClasses) return;
-    // Remove the class from each viewport if it exists
-    if (className in layerClasses.mobile) delete layerClasses.mobile[className];
-    if (className in layerClasses.tablet) delete layerClasses.tablet[className];
-    if (className in layerClasses.desktop)
-      delete layerClasses.desktop[className];
-    // Update the node in the store
-    const newData = { ...markdownNode, isChanged: true };
-    ctx.modifyNodes([newData]);
-    resetStore();
-  };
 
-  const handleNoClick = () => {
-    resetStore();
+    let classesSource: DefaultClassValue | undefined;
+
+    if (targetProperty === 'parentClasses') {
+      const layerIndex = layer - 1;
+      classesSource = styleableNode.parentClasses?.[layerIndex];
+    } else if (
+      targetProperty === 'gridClasses' &&
+      isMarkdownPaneFragmentNode(styleableNode)
+    ) {
+      classesSource = styleableNode.gridClasses;
+    }
+
+    if (!classesSource) {
+      return { mobile: '', tablet: '', desktop: '' };
+    }
+
+    return {
+      mobile: classesSource.mobile?.[className] || '',
+      tablet: classesSource.tablet?.[className] || '',
+      desktop: classesSource.desktop?.[className] || '',
+    };
+  }, [styleableNode, layer, className, targetProperty]);
+
+  const handleCancel = () => {
+    settingsPanelStore.set({
+      nodeId: styleableNode.id,
+      layer: layer,
+      action: 'style-parent',
+      expanded: true,
+    });
   };
 
+  const handleRemove = useCallback(() => {
+    if (!styleableNode || !layer || !className) return;
+
+    const updatedNode = cloneDeep(styleableNode);
+    let wasModified = false;
+
+    if (targetProperty === 'parentClasses') {
+      const layerIndex = layer - 1;
+      if (updatedNode.parentClasses?.[layerIndex]) {
+        if (updatedNode.parentClasses[layerIndex].mobile?.[className]) {
+          delete updatedNode.parentClasses[layerIndex].mobile[className];
+          wasModified = true;
+        }
+        if (updatedNode.parentClasses[layerIndex].tablet?.[className]) {
+          delete updatedNode.parentClasses[layerIndex].tablet[className];
+          wasModified = true;
+        }
+        if (updatedNode.parentClasses[layerIndex].desktop?.[className]) {
+          delete updatedNode.parentClasses[layerIndex].desktop[className];
+          wasModified = true;
+        }
+      }
+    } else if (
+      targetProperty === 'gridClasses' &&
+      isMarkdownPaneFragmentNode(updatedNode)
+    ) {
+      if (updatedNode.gridClasses) {
+        if (updatedNode.gridClasses.mobile?.[className]) {
+          delete updatedNode.gridClasses.mobile[className];
+          wasModified = true;
+        }
+        if (updatedNode.gridClasses.tablet?.[className]) {
+          delete updatedNode.gridClasses.tablet[className];
+          wasModified = true;
+        }
+        if (updatedNode.gridClasses.desktop?.[className]) {
+          delete updatedNode.gridClasses.desktop[className];
+          wasModified = true;
+        }
+      }
+    }
+
+    if (wasModified) {
+      updatedNode.isChanged = true;
+      ctx.modifyNodes([updatedNode]);
+      ctx.notifyNode('root');
+    }
+
+    settingsPanelStore.set({
+      nodeId: styleableNode.id,
+      layer: layer,
+      action: 'style-parent',
+      expanded: true,
+    });
+  }, [styleableNode, layer, className, targetProperty, ctx]);
+
+  if (!className) return null;
+
   return (
     <div className="space-y-4">
-      <h3 className="text-xl font-bold">
-        Remove <span className="font-bold">{friendlyName}</span>?
-      </h3>
-      <div className="space-y-4 rounded bg-slate-50 p-6">
-        <ul className="text-mydarkgrey flex flex-wrap gap-x-4 gap-y-1">
-          <li>
-            <em>Are you sure?</em>
-          </li>
-          <li>
-            <button
-              onClick={handleYesClick}
-              className="font-bold underline hover:text-black"
-            >
-              Yes
-            </button>
-          </li>
-          <li>
-            <button
-              onClick={handleNoClick}
-              className="font-bold underline hover:text-black"
-            >
-              No / Cancel
-            </button>
-          </li>
-        </ul>
+      <div className="flex flex-row flex-nowrap justify-between">
+        <button
+          title="Return to preview pane"
+          onClick={handleCancel}
+          className="text-myblue hover:text-black"
+        >
+          Go Back
+        </button>
+      </div>
+      <div>
+        <h3 className="text-xl font-bold">Remove Style</h3>
+        <p className="text-mydarkgrey mt-2">
+          Are you sure you want to remove this style?
+        </p>
+        <div className="my-4 rounded-md bg-slate-100 p-4">
+          <p className="font-mono text-sm font-bold">{className}</p>
+          <div className="mt-2 space-y-1 text-sm">
+            <p>
+              <span className="font-bold">Mobile:</span>{' '}
+              {values.mobile || 'N/A'}
+            </p>
+            <p>
+              <span className="font-bold">Tablet:</span>{' '}
+              {values.tablet || 'N/A'}
+            </p>
+            <p>
+              <span className="font-bold">Desktop:</span>{' '}
+              {values.desktop || 'N/A'}
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="flex items-center justify-end space-x-3">
+        {!confirm ? (
+          <button
+            onClick={() => setConfirm(true)}
+            className="rounded-md bg-red-600 px-4 py-2 text-sm font-bold text-white shadow-sm hover:bg-red-700"
+          >
+            Remove
+          </button>
+        ) : (
+          <button
+            onClick={handleRemove}
+            className="rounded-md bg-red-700 px-4 py-2 text-sm font-bold text-white shadow-sm ring-2 ring-red-800 ring-offset-2"
+          >
+            Confirm Removal
+          </button>
+        )}
       </div>
     </div>
   );
 };
 
-export default StyleParentRemovePanel;
+export default StyleParentPanelRemove;