astro-tractstack 2.0.0-rc.0

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

@@ -0,0 +1,313 @@
+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 StyleLiElementUpdatePanel = ({
+  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 isContainer = node.tagName === 'ul' || node.tagName === 'ol';
+
+  const resetStore = () => {
+    settingsPanelStore.set({
+      action: 'style-li-element',
+      nodeId: isContainer && typeof childId === `string` ? childId : node.id,
+      expanded: true,
+    });
+  };
+
+  // Initialize values from current node state
+  useEffect(() => {
+    const ctx = getCtx();
+    const allNodes = ctx.allNodes.get();
+
+    // Get the correct target node based on whether we're styling container or list item
+    const targetNodeId = isContainer ? node.id : childId || node.id;
+    const targetNode = allNodes.get(targetNodeId) 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, isContainer]);
+
+  // 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 whether we're styling container or list item
+      const targetNodeId = isContainer ? node.id : childId || 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 = {};
+      }
+
+      // Initialize defaultClasses for this tagName if needed
+      if (!markdownNode.defaultClasses[node.tagName]) {
+        markdownNode.defaultClasses[node.tagName] = {
+          mobile: {},
+          tablet: {},
+          desktop: {},
+        };
+      }
+
+      // Add style to the correct tagName
+      markdownNode.defaultClasses[node.tagName][pendingUpdate.viewport][
+        className
+      ] = pendingUpdate.value;
+
+      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,
+    childId,
+    isContainer,
+  ]);
+
+  const handleToggleOverride = useCallback(
+    (checked: boolean) => {
+      const ctx = getCtx();
+      const allNodes = ctx.allNodes.get();
+
+      // Get the correct target node based on whether we're styling container or list item
+      const targetNodeId = isContainer ? node.id : childId || node.id;
+      const targetNode = 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, isContainer]
+  );
+
+  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} ({isContainer ? 'Container' : 'List Item'})
+        </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 StyleLiElementUpdatePanel;

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

@@ -0,0 +1,346 @@
+import { useMemo } from 'react';
+import Cog6ToothIcon from '@heroicons/react/24/outline/Cog6ToothIcon';
+import { settingsPanelStore } from '@/stores/storykeep';
+import { getCtx } from '@/stores/nodes';
+import { isLinkNode } from '@/utils/compositor/typeGuards';
+import { cloneDeep } from '@/utils/helpers';
+import { processClassesForViewports } from '@/utils/compositor/reduceNodesClassNames';
+import SelectedTailwindClass from '@/components/fields/SelectedTailwindClass';
+import { StylesMemory } from '@/components/edit/state/StylesMemory';
+import type { BasePanelProps, FlatNode } from '@/types/compositorTypes';
+
+const getButtonStyleClasses = (style: ButtonStyle) => ({
+  mobile: Object.entries(style).reduce(
+    (acc, [key, values]) => {
+      acc[key] = values[0];
+      return acc;
+    },
+    {} as Record<string, string>
+  ),
+  tablet: {},
+  desktop: {},
+});
+
+const addHoverPrefix = (str: string): string =>
+  str
+    .split(' ')
+    .map((word) => `hover:${word}`)
+    .join(' ');
+
+type ButtonStyle = Record<string, string[]>;
+type ButtonStylePair = [ButtonStyle, ButtonStyle];
+
+const buttonStyleOptions = [
+  'Plain text inline',
+  'Fancy text inline',
+  'Fancy button',
+];
+const buttonStyleClasses: ButtonStylePair[] = [
+  [
+    {
+      fontWEIGHT: ['bold'],
+      textDECORATION: ['underline'],
+      textUNDERLINEOFFSET: ['2'],
+      textCOLOR: ['brand-5'],
+    },
+    {
+      textUNDERLINEOFFSET: ['4'],
+      textCOLOR: ['brand-1'],
+    },
+  ],
+  [
+    {
+      bgCOLOR: ['brand-4'],
+      fontWEIGHT: ['bold'],
+      px: ['3.5'],
+      py: ['1.5'],
+      rounded: ['lg'],
+      textCOLOR: ['brand-1'],
+    },
+    {
+      bgCOLOR: ['brand-3'],
+    },
+  ],
+  [
+    {
+      bgCOLOR: ['brand-4'],
+      display: ['inline-block'],
+      fontWEIGHT: ['bold'],
+      px: ['3.5'],
+      py: ['2.5'],
+      rounded: ['md'],
+      textCOLOR: ['brand-1'],
+    },
+    {
+      bgCOLOR: ['brand-3'],
+      rotate: ['2'],
+    },
+  ],
+];
+
+const StyleLinkPanel = ({ node }: BasePanelProps) => {
+  if (!isLinkNode(node)) return null;
+
+  const buttonPayload = node.buttonPayload;
+  const buttonClasses = buttonPayload?.buttonClasses || {};
+  const hoverClasses = buttonPayload?.buttonHoverClasses || {};
+
+  const mergedButtonClasses = useMemo(() => {
+    const result: {
+      [key: string]: {
+        mobile: string;
+        tablet?: string;
+        desktop?: string;
+      };
+    } = {};
+
+    Object.entries(buttonClasses).forEach(([className, values]) => {
+      result[className] = {
+        mobile: values[0] || '',
+      };
+    });
+
+    return result;
+  }, [buttonClasses]);
+
+  const mergedHoverClasses = useMemo(() => {
+    const result: {
+      [key: string]: {
+        mobile: string;
+        tablet?: string;
+        desktop?: string;
+      };
+    } = {};
+
+    Object.entries(hoverClasses).forEach(([className, values]) => {
+      result[className] = {
+        mobile: values[0] || '',
+      };
+    });
+
+    return result;
+  }, [hoverClasses]);
+
+  const handleButtonStyleAdd = () => {
+    settingsPanelStore.set({
+      action: 'style-link-add',
+      nodeId: node.id,
+      expanded: true,
+    });
+  };
+
+  const handleHoverStyleAdd = () => {
+    settingsPanelStore.set({
+      action: 'style-link-add-hover',
+      nodeId: node.id,
+      expanded: true,
+    });
+  };
+
+  const handleButtonStyleRemove = (className: string) => {
+    settingsPanelStore.set({
+      action: 'style-link-remove',
+      nodeId: node.id,
+      className,
+      expanded: true,
+    });
+  };
+
+  const handleHoverStyleRemove = (className: string) => {
+    settingsPanelStore.set({
+      action: 'style-link-remove-hover',
+      nodeId: node.id,
+      className,
+      expanded: true,
+    });
+  };
+
+  const handleButtonStyleUpdate = (className: string) => {
+    settingsPanelStore.set({
+      action: 'style-link-update',
+      nodeId: node.id,
+      className,
+      expanded: true,
+    });
+  };
+
+  const handleHoverStyleUpdate = (className: string) => {
+    settingsPanelStore.set({
+      action: 'style-link-update-hover',
+      nodeId: node.id,
+      className,
+      expanded: true,
+    });
+  };
+
+  const handleLinkConfig = () => {
+    settingsPanelStore.set({
+      action: 'style-link-config',
+      nodeId: node.id,
+      expanded: true,
+    });
+  };
+
+  const applyQuickStyle = (styleIndex: number) => {
+    const ctx = getCtx();
+    const allNodes = ctx.allNodes.get();
+    const linkNode = cloneDeep(allNodes.get(node.id)) as FlatNode;
+    if (!isLinkNode(linkNode)) return;
+
+    const [buttonClasses, hoverClasses] = buttonStyleClasses[styleIndex];
+
+    linkNode.buttonPayload = {
+      ...linkNode.buttonPayload,
+      buttonClasses,
+      buttonHoverClasses: hoverClasses,
+      callbackPayload: linkNode.buttonPayload?.callbackPayload || '',
+    };
+
+    ctx.modifyNodes([{ ...linkNode, isChanged: true }]);
+
+    settingsPanelStore.set({
+      action: 'style-link',
+      nodeId: node.id,
+      expanded: true,
+    });
+  };
+
+  return (
+    <div className="space-y-8">
+      <div className="space-y-4">
+        <div className="pb-2">
+          <div className="text-myblack hover:bg-mygreen/20 w-fit rounded border border-slate-200 p-2 text-sm">
+            <div
+              title="Configure this Link"
+              className="flex items-center gap-2 font-bold"
+            >
+              <Cog6ToothIcon className="h-4 w-4" />
+              <button onClick={handleLinkConfig}>
+                Configure Link Settings
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {Object.keys(buttonClasses).length === 0 && (
+          <div className="space-y-4">
+            <h3 className="text-sm font-bold">Quick Style this Link</h3>
+            <div className="flex flex-col gap-4">
+              {buttonStyleOptions.map((_, index) => {
+                const [buttonStyle, hoverStyle] = buttonStyleClasses[index];
+
+                const [classesPayload] = processClassesForViewports(
+                  getButtonStyleClasses(buttonStyle),
+                  {},
+                  1
+                );
+                const [classesHoverPayload] = processClassesForViewports(
+                  getButtonStyleClasses(hoverStyle),
+                  {},
+                  1
+                );
+                const combinedClasses = `${classesPayload[0]} ${classesHoverPayload[0] ? addHoverPrefix(classesHoverPayload[0]) : ''}`;
+
+                return (
+                  <button
+                    key={index}
+                    onClick={() => applyQuickStyle(index)}
+                    className={combinedClasses}
+                  >
+                    Use this Button Style
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        {Object.keys(buttonClasses).length > 0 && (
+          <div className="space-y-4">
+            <h3 className="text-sm font-bold">Button Styles</h3>
+            {Object.keys(mergedButtonClasses).length > 0 ? (
+              <div className="flex flex-wrap gap-2">
+                {Object.entries(mergedButtonClasses).map(
+                  ([className, values]) => (
+                    <SelectedTailwindClass
+                      key={className}
+                      name={className}
+                      values={values}
+                      onRemove={handleButtonStyleRemove}
+                      onUpdate={handleButtonStyleUpdate}
+                    />
+                  )
+                )}
+              </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={handleButtonStyleAdd}
+                    className="text-myblue font-bold underline hover:text-black"
+                  >
+                    Add Style
+                  </button>
+                </li>
+                <li>
+                  <StylesMemory node={node} />
+                </li>
+              </ul>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {Object.keys(buttonClasses).length > 0 && (
+        <div className="space-y-4">
+          <h3 className="text-sm font-bold">Hover Styles</h3>
+
+          {Object.keys(mergedHoverClasses).length > 0 ? (
+            <div className="flex flex-wrap gap-2">
+              {Object.entries(mergedHoverClasses).map(([className, values]) => (
+                <SelectedTailwindClass
+                  key={className}
+                  name={className}
+                  values={values}
+                  onRemove={handleHoverStyleRemove}
+                  onUpdate={handleHoverStyleUpdate}
+                />
+              ))}
+            </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={handleHoverStyleAdd}
+                  className="text-myblue font-bold underline hover:text-black"
+                >
+                  Add Style
+                </button>
+              </li>
+            </ul>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default StyleLinkPanel;