astro-tractstack 2.0.0-rc.0

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

@@ -0,0 +1,312 @@
+import { useState, useCallback, useEffect } from 'react';
+import { settingsPanelStore } from '@/stores/storykeep';
+import { getCtx } from '@/stores/nodes';
+import ViewportComboBox from '@/components/fields/ViewportComboBox';
+import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
+import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import { cloneDeep } from '@/utils/helpers';
+import type {
+  BasePanelProps,
+  FlatNode,
+  MarkdownPaneFragmentNode,
+} from '@/types/compositorTypes';
+
+const StyleImageUpdatePanel = ({
+  node,
+  parentNode,
+  className,
+  config,
+  childId,
+}: BasePanelProps) => {
+  if (
+    !node ||
+    !className ||
+    !parentNode ||
+    !isMarkdownPaneFragmentNode(parentNode)
+  )
+    return null;
+
+  const [isOverridden, setIsOverridden] = useState(false);
+  const [mobileValue, setMobileValue] = useState<string>(``);
+  const [tabletValue, setTabletValue] = useState<string>(``);
+  const [desktopValue, setDesktopValue] = useState<string>(``);
+  const [pendingUpdate, setPendingUpdate] = useState<{
+    value: string;
+    viewport: 'mobile' | 'tablet' | 'desktop';
+  } | null>(null);
+
+  const friendlyName = tailwindClasses[className]?.title || className;
+  const values = tailwindClasses[className]?.values || [];
+  const isOuterContainer = node.tagName === 'ul' || node.tagName === 'ol';
+  const isContainer = node.tagName === 'li';
+  const isImage = node.tagName === 'img';
+  const elementTypeTitle = isOuterContainer
+    ? 'Outer Container'
+    : isContainer
+      ? 'Container'
+      : 'Image';
+
+  const resetStore = () => {
+    settingsPanelStore.set({
+      action: 'style-image',
+      nodeId: isOuterContainer || isContainer ? childId || node.id : node.id,
+      expanded: true,
+    });
+  };
+
+  // Initialize values from current node state
+  useEffect(() => {
+    const ctx = getCtx();
+    const allNodes = ctx.allNodes.get();
+    const targetNode = cloneDeep(allNodes.get(node.id)) as FlatNode;
+    if (!targetNode) return;
+
+    const hasOverride =
+      targetNode.overrideClasses?.mobile?.[className] !== undefined;
+    setIsOverridden(hasOverride);
+
+    const defaults = parentNode.defaultClasses?.[targetNode.tagName];
+
+    if (
+      hasOverride &&
+      targetNode.overrideClasses?.mobile?.[className] !== undefined
+    ) {
+      setMobileValue(targetNode.overrideClasses.mobile[className]);
+      setTabletValue(targetNode.overrideClasses.tablet?.[className] ?? '');
+      setDesktopValue(targetNode.overrideClasses.desktop?.[className] ?? '');
+    } else if (defaults) {
+      setMobileValue(defaults.mobile[className] || '');
+      setTabletValue(defaults.tablet?.[className] || '');
+      setDesktopValue(defaults.desktop?.[className] || '');
+    }
+  }, [node, parentNode, className, childId, isImage]);
+
+  // Handle updates after state changes
+  useEffect(() => {
+    if (!pendingUpdate) return;
+
+    const ctx = getCtx();
+    const allNodes = ctx.allNodes.get();
+
+    if (isOverridden) {
+      // Get the correct target node based on what we're styling
+      const targetNodeId = node.id;
+      const targetNode = cloneDeep(allNodes.get(targetNodeId)) as FlatNode;
+
+      if (!targetNode) return;
+
+      const newOverrides = {
+        mobile: { ...(targetNode.overrideClasses?.mobile || {}) },
+        tablet: { ...(targetNode.overrideClasses?.tablet || {}) },
+        desktop: { ...(targetNode.overrideClasses?.desktop || {}) },
+      };
+
+      newOverrides[pendingUpdate.viewport][className] = pendingUpdate.value;
+      targetNode.overrideClasses = newOverrides;
+
+      switch (pendingUpdate.viewport) {
+        case 'mobile':
+          setMobileValue(pendingUpdate.value);
+          break;
+        case 'tablet':
+          setTabletValue(pendingUpdate.value);
+          break;
+        case 'desktop':
+          setDesktopValue(pendingUpdate.value);
+          break;
+      }
+
+      ctx.modifyNodes([{ ...targetNode, isChanged: true }]);
+    } else {
+      const markdownNode = cloneDeep(
+        allNodes.get(parentNode.id)
+      ) as MarkdownPaneFragmentNode;
+      if (!markdownNode?.defaultClasses) {
+        markdownNode.defaultClasses = {};
+      }
+
+      // Use the actual target node's tagName
+      const targetTagName = node.tagName;
+
+      // Initialize defaultClasses for this tagName if needed
+      if (!markdownNode.defaultClasses[targetTagName]) {
+        markdownNode.defaultClasses[targetTagName] = {
+          mobile: {},
+          tablet: {},
+          desktop: {},
+        };
+      }
+
+      // Add style to the correct tagName
+      markdownNode.defaultClasses[targetTagName][pendingUpdate.viewport][
+        className
+      ] = pendingUpdate.value;
+
+      // Update state values
+      switch (pendingUpdate.viewport) {
+        case 'mobile':
+          setMobileValue(pendingUpdate.value);
+          break;
+        case 'tablet':
+          setTabletValue(pendingUpdate.value);
+          break;
+        case 'desktop':
+          setDesktopValue(pendingUpdate.value);
+          break;
+      }
+
+      ctx.modifyNodes([{ ...markdownNode, isChanged: true }]);
+    }
+
+    setPendingUpdate(null);
+  }, [pendingUpdate, isOverridden, node, parentNode, className]);
+
+  const handleToggleOverride = useCallback(
+    (checked: boolean) => {
+      const ctx = getCtx();
+      const allNodes = ctx.allNodes.get();
+
+      // Get the correct target node based on what we're styling
+      const targetNodeId = isImage ? node.id : childId || node.id;
+      const targetNode = cloneDeep(allNodes.get(targetNodeId)) as FlatNode;
+
+      if (!targetNode) return;
+
+      if (checked) {
+        // When toggling ON override mode
+        const newOverrides = {
+          mobile: { ...(targetNode.overrideClasses?.mobile || {}) },
+          tablet: { ...(targetNode.overrideClasses?.tablet || {}) },
+          desktop: { ...(targetNode.overrideClasses?.desktop || {}) },
+        };
+
+        // Initialize with current values from default classes if they exist
+        const defaults = parentNode.defaultClasses?.[targetNode.tagName];
+        if (defaults) {
+          newOverrides.mobile[className] = defaults.mobile[className] || '';
+          newOverrides.tablet[className] = defaults.tablet?.[className] || '';
+          newOverrides.desktop[className] = defaults.desktop?.[className] || '';
+        } else {
+          newOverrides.mobile[className] = '';
+          newOverrides.tablet[className] = '';
+          newOverrides.desktop[className] = '';
+        }
+
+        targetNode.overrideClasses = newOverrides;
+
+        setMobileValue(newOverrides.mobile[className]);
+        setTabletValue(newOverrides.tablet[className]);
+        setDesktopValue(newOverrides.desktop[className]);
+      } else {
+        // When toggling OFF override mode
+        if (targetNode.overrideClasses) {
+          const mobileClasses = {
+            ...(targetNode.overrideClasses.mobile || {}),
+          };
+          const tabletClasses = {
+            ...(targetNode.overrideClasses.tablet || {}),
+          };
+          const desktopClasses = {
+            ...(targetNode.overrideClasses.desktop || {}),
+          };
+
+          delete mobileClasses[className];
+          delete tabletClasses[className];
+          delete desktopClasses[className];
+
+          const hasClasses =
+            Object.keys(mobileClasses).length > 0 ||
+            Object.keys(tabletClasses).length > 0 ||
+            Object.keys(desktopClasses).length > 0;
+
+          targetNode.overrideClasses = hasClasses
+            ? {
+                mobile: mobileClasses,
+                tablet: tabletClasses,
+                desktop: desktopClasses,
+              }
+            : undefined;
+        }
+
+        // Reset to default values
+        const defaults = parentNode.defaultClasses?.[targetNode.tagName];
+        if (defaults) {
+          setMobileValue(defaults.mobile[className] || '');
+          setTabletValue(defaults.tablet?.[className] || '');
+          setDesktopValue(defaults.desktop?.[className] || '');
+        }
+      }
+
+      ctx.modifyNodes([{ ...targetNode, isChanged: true }]);
+      setIsOverridden(checked);
+    },
+    [node, className, parentNode, childId, isImage]
+  );
+
+  const handleFinalChange = useCallback(
+    (value: string, viewport: 'mobile' | 'tablet' | 'desktop') => {
+      setPendingUpdate({ value, viewport });
+    },
+    []
+  );
+
+  return (
+    <div className="isolate z-50 space-y-4">
+      <div className="flex flex-row flex-nowrap justify-between">
+        <h3 className="text-xl font-bold">
+          {friendlyName} ({elementTypeTitle})
+        </h3>
+        <button
+          className="text-myblue hover:text-black"
+          title="Return to preview pane"
+          onClick={resetStore}
+        >
+          Go Back
+        </button>
+      </div>
+
+      <div className="flex items-center space-x-2 py-2">
+        <input
+          type="checkbox"
+          checked={isOverridden}
+          onChange={(e) => handleToggleOverride(e.target.checked)}
+          className="border-mydarkgrey text-myorange focus:ring-myorange h-4 w-4 rounded"
+        />
+        <span className="text-mydarkgrey text-sm">
+          {isOverridden
+            ? 'Override mode. Styling this element only.'
+            : 'You are in quick styles mode. Click to override this element.'}
+        </span>
+      </div>
+
+      <div className="text-mydarkgrey my-3 flex flex-col gap-y-2.5 text-xl">
+        <ViewportComboBox
+          value={mobileValue}
+          onFinalChange={handleFinalChange}
+          values={values}
+          viewport="mobile"
+          config={config!}
+          isInferred={false}
+        />
+        <ViewportComboBox
+          value={tabletValue}
+          onFinalChange={handleFinalChange}
+          values={values}
+          viewport="tablet"
+          isInferred={!isOverridden && tabletValue === mobileValue}
+          config={config!}
+        />
+        <ViewportComboBox
+          value={desktopValue}
+          onFinalChange={handleFinalChange}
+          values={values}
+          viewport="desktop"
+          isInferred={!isOverridden && desktopValue === tabletValue}
+          config={config!}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default StyleImageUpdatePanel;

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

@@ -0,0 +1,273 @@
+import { useMemo } from 'react';
+import { settingsPanelStore } from '@/stores/storykeep';
+import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import SelectedTailwindClass from '@/components/fields/SelectedTailwindClass';
+import { StylesMemory } from '@/components/edit/state/StylesMemory';
+import { tagTitles } from '@/types/compositorTypes';
+import type {
+  Tag,
+  FlatNode,
+  MarkdownPaneFragmentNode,
+} from '@/types/compositorTypes';
+
+interface StyleLiElementPanelProps {
+  node: FlatNode;
+  outerContainerNode: FlatNode;
+  parentNode: MarkdownPaneFragmentNode;
+}
+
+const StyleLiElementPanel = ({
+  node,
+  outerContainerNode,
+  parentNode,
+}: StyleLiElementPanelProps) => {
+  if (
+    !node?.tagName ||
+    !outerContainerNode?.tagName ||
+    !isMarkdownPaneFragmentNode(parentNode)
+  ) {
+    return null;
+  }
+  const liDefaultClasses = parentNode.defaultClasses?.[node.tagName];
+  const liOverrideClasses = node.overrideClasses;
+  const containerDefaultClasses =
+    parentNode.defaultClasses?.[outerContainerNode.tagName];
+  const containerOverrideClasses = outerContainerNode.overrideClasses;
+
+  const mergedLiClasses = useMemo(() => {
+    const result: {
+      [key: string]: {
+        mobile: string;
+        tablet?: string;
+        desktop?: string;
+      };
+    } = {};
+    // First add all default classes
+    if (liDefaultClasses) {
+      Object.keys(liDefaultClasses.mobile).forEach((className) => {
+        result[className] = {
+          mobile: liDefaultClasses.mobile[className],
+          ...(liDefaultClasses.tablet && {
+            tablet: liDefaultClasses.tablet[className],
+          }),
+          ...(liDefaultClasses.desktop && {
+            desktop: liDefaultClasses.desktop[className],
+          }),
+        };
+      });
+    }
+    // Then overlay any override classes
+    if (liOverrideClasses) {
+      ['mobile', 'tablet', 'desktop'].forEach((viewport) => {
+        const viewportOverrides =
+          liOverrideClasses[viewport as keyof typeof liOverrideClasses];
+        if (viewportOverrides) {
+          Object.entries(viewportOverrides).forEach(([className, value]) => {
+            if (!result[className]) {
+              result[className] = { mobile: value };
+            } else {
+              result[className] = {
+                ...result[className],
+                [viewport]: value,
+              };
+            }
+          });
+        }
+      });
+    }
+    return result;
+  }, [liDefaultClasses, liOverrideClasses]);
+
+  const mergedContainerClasses = useMemo(() => {
+    const result: {
+      [key: string]: {
+        mobile: string;
+        tablet?: string;
+        desktop?: string;
+      };
+    } = {};
+    // First add all default classes
+    if (containerDefaultClasses) {
+      Object.keys(containerDefaultClasses.mobile).forEach((className) => {
+        result[className] = {
+          mobile: containerDefaultClasses.mobile[className],
+          ...(containerDefaultClasses.tablet && {
+            tablet: containerDefaultClasses.tablet[className],
+          }),
+          ...(containerDefaultClasses.desktop && {
+            desktop: containerDefaultClasses.desktop[className],
+          }),
+        };
+      });
+    }
+    // Then overlay any override classes
+    if (containerOverrideClasses) {
+      ['mobile', 'tablet', 'desktop'].forEach((viewport) => {
+        const viewportOverrides =
+          containerOverrideClasses[
+            viewport as keyof typeof containerOverrideClasses
+          ];
+        if (viewportOverrides) {
+          Object.entries(viewportOverrides).forEach(([className, value]) => {
+            if (!result[className]) {
+              result[className] = { mobile: value };
+            } else {
+              result[className] = {
+                ...result[className],
+                [viewport]: value,
+              };
+            }
+          });
+        }
+      });
+    }
+    return result;
+  }, [containerDefaultClasses, containerOverrideClasses]);
+
+  const handleLiAdd = () => {
+    settingsPanelStore.set({
+      action: `style-li-element-add`,
+      nodeId: node.id,
+      expanded: true,
+    });
+  };
+
+  const handleContainerAdd = () => {
+    settingsPanelStore.set({
+      action: `style-li-container-add`,
+      nodeId: outerContainerNode.id,
+      childId: node.id,
+      expanded: true,
+    });
+  };
+
+  const handleLiRemove = (className: string) => {
+    settingsPanelStore.set({
+      action: `style-li-element-remove`,
+      nodeId: node.id,
+      className,
+      expanded: true,
+    });
+  };
+
+  const handleContainerRemove = (className: string) => {
+    settingsPanelStore.set({
+      action: `style-li-container-remove`,
+      nodeId: outerContainerNode.id,
+      childId: node.id,
+      className,
+      expanded: true,
+    });
+  };
+
+  const handleLiUpdate = (className: string) => {
+    settingsPanelStore.set({
+      action: `style-li-element-update`,
+      nodeId: node.id,
+      className,
+      expanded: true,
+    });
+  };
+
+  const handleContainerUpdate = (className: string) => {
+    settingsPanelStore.set({
+      action: `style-li-container-update`,
+      nodeId: outerContainerNode.id,
+      childId: node.id,
+      className,
+      expanded: true,
+    });
+  };
+
+  return (
+    <div className="space-y-8">
+      <div className="space-y-4">
+        <h3 className="text-xl font-bold">
+          Style this {tagTitles[node.tagName as Tag]}
+        </h3>
+
+        {Object.keys(mergedLiClasses).length > 0 ? (
+          <div className="flex flex-wrap gap-2">
+            {Object.entries(mergedLiClasses).map(([className, values]) => (
+              <SelectedTailwindClass
+                key={className}
+                name={className}
+                values={values}
+                onRemove={handleLiRemove}
+                onUpdate={handleLiUpdate}
+              />
+            ))}
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <em>No styles.</em>
+          </div>
+        )}
+
+        <div className="space-y-4">
+          <ul className="text-mydarkgrey flex flex-wrap gap-x-4 gap-y-1">
+            <li>
+              <em>Actions:</em>
+            </li>
+            <li>
+              <button
+                onClick={handleLiAdd}
+                className="text-myblue font-bold underline hover:text-black"
+              >
+                Add Style
+              </button>
+            </li>
+            <li>
+              <StylesMemory node={node} parentNode={parentNode} />
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-sm font-bold">Container Styles</h3>
+
+        {Object.keys(mergedContainerClasses).length > 0 ? (
+          <div className="flex flex-wrap gap-2">
+            {Object.entries(mergedContainerClasses).map(
+              ([className, values]) => (
+                <SelectedTailwindClass
+                  key={className}
+                  name={className}
+                  values={values}
+                  onRemove={handleContainerRemove}
+                  onUpdate={handleContainerUpdate}
+                />
+              )
+            )}
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <em>No styles.</em>
+          </div>
+        )}
+
+        <div className="space-y-4">
+          <ul className="text-mydarkgrey flex flex-wrap gap-x-4 gap-y-1">
+            <li>
+              <em>Actions:</em>
+            </li>
+            <li>
+              <button
+                onClick={handleContainerAdd}
+                className="text-myblue font-bold underline hover:text-black"
+              >
+                Add Style
+              </button>
+            </li>
+            <li>
+              <StylesMemory node={outerContainerNode} parentNode={parentNode} />
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StyleLiElementPanel;