astro-tractstack 2.0.0-rc.0

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

@@ -0,0 +1,110 @@
+import { useState, useCallback, useEffect } from 'react';
+import { settingsPanelStore } from '@/stores/storykeep';
+import { getCtx } from '@/stores/nodes';
+import { isLinkNode } from '@/utils/compositor/typeGuards';
+import { cloneDeep } from '@/utils/helpers';
+import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
+import ViewportComboBox from '@/components/fields/ViewportComboBox';
+import type { BasePanelProps, FlatNode } from '@/types/compositorTypes';
+
+const StyleLinkUpdatePanel = ({ node, className, config }: BasePanelProps) => {
+  if (
+    !node ||
+    !className ||
+    (node.tagName !== 'a' && node.tagName !== 'button')
+  )
+    return null;
+
+  const [value, setValue] = useState<string>('');
+
+  const friendlyName = tailwindClasses[className]?.title || className;
+  const values = tailwindClasses[className]?.values || [];
+  const isHoverMode = settingsPanelStore.get()?.action?.endsWith('-hover');
+
+  const resetStore = () => {
+    settingsPanelStore.set({
+      action: 'style-link',
+      nodeId: node.id,
+      expanded: true,
+    });
+  };
+
+  // Initialize value from current node state
+  useEffect(() => {
+    if (!node.buttonPayload) return;
+
+    const classes = isHoverMode
+      ? node.buttonPayload.buttonHoverClasses
+      : node.buttonPayload.buttonClasses;
+    if (classes && className in classes) {
+      setValue(classes[className][0] || '');
+    }
+  }, [node, className, isHoverMode]);
+
+  const handleFinalChange = useCallback(
+    (newValue: string) => {
+      const ctx = getCtx();
+      const allNodes = ctx.allNodes.get();
+      const linkNode = cloneDeep(allNodes.get(node.id)) as FlatNode;
+      if (!isLinkNode(linkNode)) return;
+
+      const markdownId = ctx.getClosestNodeTypeFromId(node.id, 'Markdown');
+      if (!markdownId) return;
+
+      // Initialize buttonPayload if it doesn't exist
+      if (!linkNode.buttonPayload) {
+        linkNode.buttonPayload = {
+          buttonClasses: {},
+          buttonHoverClasses: {},
+          callbackPayload: '',
+        };
+      }
+
+      // Update the appropriate classes object
+      if (isHoverMode) {
+        linkNode.buttonPayload.buttonHoverClasses = {
+          ...linkNode.buttonPayload.buttonHoverClasses,
+          [className]: [newValue],
+        };
+      } else {
+        linkNode.buttonPayload.buttonClasses = {
+          ...linkNode.buttonPayload.buttonClasses,
+          [className]: [newValue],
+        };
+      }
+      setValue(newValue);
+      ctx.modifyNodes([{ ...linkNode, isChanged: true }]);
+    },
+    [node, className, isHoverMode]
+  );
+
+  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} ({isHoverMode ? 'Hover' : 'Button'} State)
+        </h3>
+        <button
+          className="text-myblue hover:text-black"
+          title="Return to link panel"
+          onClick={resetStore}
+        >
+          Go Back
+        </button>
+      </div>
+
+      <div className="text-mydarkgrey my-3 flex flex-col gap-y-2.5 text-xl">
+        <ViewportComboBox
+          value={value}
+          onFinalChange={(newValue) => handleFinalChange(newValue)}
+          values={values}
+          viewport="mobile"
+          config={config!}
+          isInferred={false}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default StyleLinkUpdatePanel;

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

@@ -0,0 +1,263 @@
+import { useState, useEffect } from 'react';
+import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
+import { settingsPanelStore } from '@/stores/storykeep';
+import { getCtx } from '@/stores/nodes';
+import {
+  isMarkdownPaneFragmentNode,
+  isPaneNode,
+} from '@/utils/compositor/typeGuards';
+import { StylesMemory } from '@/components/edit/state/StylesMemory';
+import SelectedTailwindClass from '@/components/fields/SelectedTailwindClass';
+import BackgroundImageWrapper from '@/components/fields/BackgroundImageWrapper';
+import { cloneDeep } from '@/utils/helpers';
+import type {
+  MarkdownPaneFragmentNode,
+  BasePanelProps,
+} from '@/types/compositorTypes';
+
+interface ParentStyles {
+  bgColor: string;
+  parentClasses: {
+    mobile: Record<string, string>;
+    tablet: Record<string, string>;
+    desktop: Record<string, string>;
+  }[];
+}
+
+const StyleParentPanel = ({
+  node,
+  parentNode,
+  layer,
+  config,
+}: BasePanelProps) => {
+  if (
+    !parentNode ||
+    !node ||
+    !isMarkdownPaneFragmentNode(node) ||
+    !isPaneNode(parentNode) ||
+    !isMarkdownPaneFragmentNode(node)
+  ) {
+    return null;
+  }
+
+  const [layerCount, setLayerCount] = useState(node.parentClasses?.length || 0);
+  const [currentLayer, setCurrentLayer] = useState<number>(layer || 1);
+  const [settings, setSettings] = useState<ParentStyles>({
+    bgColor: parentNode.bgColour || '',
+    parentClasses: node.parentClasses || [],
+  });
+
+  // Update state when node changes
+  useEffect(() => {
+    setLayerCount(node.parentClasses?.length || 0);
+    setSettings({
+      bgColor: parentNode.bgColour || '',
+      parentClasses: node.parentClasses || [],
+    });
+  }, [node, parentNode.bgColour]);
+
+  useEffect(() => {
+    setCurrentLayer(layer || 1);
+  }, [layer]);
+
+  const handleLayerAdd = (position: 'before' | 'after', layerNum: number) => {
+    const ctx = getCtx();
+    const allNodes = ctx.allNodes.get();
+    const markdownNode = cloneDeep(allNodes.get(node.id));
+    if (!markdownNode || !isMarkdownPaneFragmentNode(markdownNode)) return;
+
+    // Create an empty layer
+    const emptyLayer = {
+      mobile: {},
+      tablet: {},
+      desktop: {},
+    };
+
+    // Create new arrays for both parentClasses
+    let newParentClasses = [...(markdownNode.parentClasses || [])];
+
+    // Calculate the insert index based on position and layerNum
+    const insertIndex = position === 'before' ? layerNum - 1 : layerNum;
+
+    // Insert the empty layer at the calculated index
+    newParentClasses = [
+      ...newParentClasses.slice(0, insertIndex),
+      emptyLayer,
+      ...newParentClasses.slice(insertIndex),
+    ];
+
+    ctx.modifyNodes([
+      {
+        ...markdownNode,
+        parentClasses: newParentClasses,
+        isChanged: true,
+      } as MarkdownPaneFragmentNode,
+    ]);
+
+    // Update local state
+    setSettings((prev) => ({
+      ...prev,
+      parentClasses: newParentClasses,
+    }));
+    setLayerCount(newParentClasses.length);
+
+    // Set the current layer to the newly added layer
+    const newLayer = position === 'before' ? layerNum : layerNum + 1;
+    setCurrentLayer(newLayer);
+  };
+
+  const handleClickDeleteLayer = () => {
+    settingsPanelStore.set({
+      nodeId: node.id,
+      layer: currentLayer,
+      action: `style-parent-delete-layer`,
+      expanded: true,
+    });
+  };
+
+  const handleClickRemove = (name: string) => {
+    settingsPanelStore.set({
+      nodeId: node.id,
+      layer: currentLayer,
+      className: name,
+      action: `style-parent-remove`,
+      expanded: true,
+    });
+  };
+
+  const handleClickUpdate = (name: string) => {
+    settingsPanelStore.set({
+      nodeId: node.id,
+      layer: currentLayer,
+      className: name,
+      action: `style-parent-update`,
+      expanded: true,
+    });
+  };
+
+  const handleClickAdd = () => {
+    settingsPanelStore.set({
+      nodeId: node.id,
+      layer: currentLayer,
+      action: `style-parent-add`,
+      expanded: true,
+    });
+  };
+
+  // Safely get current classes
+  const currentClasses = settings.parentClasses?.[currentLayer - 1] || {
+    mobile: {},
+    tablet: {},
+    desktop: {},
+  };
+  const hasNoClasses = !Object.values(currentClasses).some(
+    (breakpoint) => Object.keys(breakpoint).length > 0
+  );
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-4">
+        <BackgroundImageWrapper
+          paneId={parentNode.id}
+          config={config || undefined}
+        />
+      </div>
+
+      <div className="mb-4 flex items-center gap-3 rounded-md bg-slate-50 p-3">
+        <span className="text-mydarkgrey text-sm font-bold">Layer:</span>
+        <div className="flex items-center gap-2">
+          <button
+            key="first-add"
+            className="border-mydarkgrey/30 text-mydarkgrey rounded border border-dashed p-1 text-xs transition-colors hover:bg-white/50 hover:text-black"
+            title="Add Layer Here"
+            onClick={() => handleLayerAdd('before', 1)}
+          >
+            <PlusIcon className="h-3 w-3" />
+          </button>
+          {[...Array(layerCount).keys()]
+            .map((i) => i + 1)
+            .map((num, index) => (
+              <div
+                key={`layer-group-${num}`}
+                className="flex items-center gap-1"
+              >
+                <button
+                  className={`min-w-[32px] rounded-md px-3 py-1.5 text-sm font-bold transition-colors ${
+                    currentLayer === num
+                      ? 'bg-myblue text-white shadow-sm'
+                      : 'text-mydarkgrey hover:bg-mydarkgrey/10 bg-white hover:text-black'
+                  }`}
+                  onClick={() => setCurrentLayer(num)}
+                >
+                  {num}
+                </button>
+                <button
+                  className="border-mydarkgrey/30 text-mydarkgrey rounded border border-dashed p-1 text-xs transition-colors hover:bg-white/50 hover:text-black"
+                  title="Add Layer Here"
+                  onClick={() =>
+                    handleLayerAdd(
+                      index === layerCount - 1 ? 'after' : 'before',
+                      index === layerCount - 1 ? num : num + 1
+                    )
+                  }
+                >
+                  <PlusIcon className="h-3 w-3" />
+                </button>
+              </div>
+            ))}
+        </div>
+      </div>
+
+      {hasNoClasses ? (
+        <div className="space-y-4">
+          <em>No styles.</em>
+        </div>
+      ) : currentClasses ? (
+        <div className="flex flex-wrap gap-2">
+          {Object.entries(currentClasses.mobile).map(([className]) => (
+            <SelectedTailwindClass
+              key={className}
+              name={className}
+              values={{
+                mobile: currentClasses.mobile[className],
+                tablet: currentClasses.tablet?.[className],
+                desktop: currentClasses.desktop?.[className],
+              }}
+              onRemove={handleClickRemove}
+              onUpdate={handleClickUpdate}
+            />
+          ))}
+        </div>
+      ) : null}
+
+      <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={() => handleClickAdd()}
+              className="text-myblue font-bold underline hover:text-black"
+            >
+              Add Style
+            </button>
+          </li>
+          <li>
+            <button
+              onClick={() => handleClickDeleteLayer()}
+              className="text-myblue font-bold underline hover:text-black"
+            >
+              Delete Layer
+            </button>
+          </li>
+          <li>
+            <StylesMemory node={node} parentNode={parentNode} />
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default StyleParentPanel;

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

@@ -0,0 +1,275 @@
+import { useState, useCallback, useMemo } from 'react';
+import { Combobox } from '@ark-ui/react';
+import { createListCollection } from '@ark-ui/react/collection';
+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 type { BasePanelProps, PaneFragmentNode } from '@/types/compositorTypes';
+
+const RECOMMENDED_STYLES = [
+  { key: 'bgCOLOR', title: 'Background Color' },
+  { key: 'borderCOLOR', title: 'Border Color' },
+  { key: 'borderSTYLE', title: 'Border Style' },
+  { key: 'borderWIDTH', title: 'Border Width' },
+  { key: 'rounded', title: 'Border Radius' },
+  { key: 'shadow', title: 'Box Shadow' },
+  { key: 'maxW', title: 'Max Width' },
+  { key: 'p', title: 'Padding' },
+  { key: 'px', title: 'Padding X' },
+  { key: 'py', title: 'Padding Y' },
+  { key: 'm', title: 'Margin' },
+  { key: 'mx', title: 'Margin X' },
+  { key: 'my', title: 'Margin Y' },
+  { key: 'opacity', title: 'Opacity' },
+  { key: 'backdrop', title: 'Backdrop Filter' },
+];
+
+const getFilteredStyles = (
+  showAdvanced: boolean,
+  existingClasses: Set<string>
+) => {
+  return Object.entries(tailwindClasses)
+    .filter(
+      ([key, details]) =>
+        (showAdvanced || details.priority <= 1) && !existingClasses.has(key)
+    )
+    .map(([key, details]) => ({
+      key,
+      title: details.title,
+      className: details.className,
+      prefix: details.prefix,
+      values: details.values,
+    }))
+    .sort((a, b) => a.title.localeCompare(b.title));
+};
+
+interface StyleOption {
+  key: string;
+  title: string;
+  className: string;
+  prefix: string;
+  values: string[];
+}
+
+const StyleParentPanelAdd = ({ node, layer }: BasePanelProps) => {
+  const [query, setQuery] = useState('');
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  const [selectedStyle, setSelectedStyle] = useState<string | null>(null);
+
+  const paneFragmentNode = node as PaneFragmentNode | null;
+
+  if (
+    !paneFragmentNode ||
+    !isMarkdownPaneFragmentNode(paneFragmentNode) ||
+    !layer
+  ) {
+    return null;
+  }
+
+  const currentLayerClasses = new Set<string>();
+
+  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)
+    );
+  }
+
+  const styles = getFilteredStyles(showAdvanced, currentLayerClasses);
+
+  // Create collection for Ark UI Combobox
+  const collection = useMemo(() => {
+    const filteredStyles =
+      query === ''
+        ? styles
+        : styles.filter(
+            (style) =>
+              style.title.toLowerCase().includes(query.toLowerCase()) ||
+              style.key.toLowerCase().includes(query.toLowerCase())
+          );
+
+    return createListCollection({
+      items: filteredStyles,
+      itemToValue: (item: StyleOption) => item.key,
+      itemToString: (item: StyleOption) => item.title,
+    });
+  }, [styles, query]);
+
+  const availableRecommendedStyles = RECOMMENDED_STYLES.filter(
+    (style) => !currentLayerClasses.has(style.key)
+  );
+
+  const handleValueChange = useCallback(
+    (details: { value: string[] }) => {
+      const styleKey = details.value[0] || '';
+      if (!styleKey) return;
+
+      setSelectedStyle(styleKey);
+      settingsPanelStore.set({
+        nodeId: paneFragmentNode.id,
+        layer: layer,
+        className: styleKey,
+        action: 'style-parent-update',
+        expanded: true,
+      });
+    },
+    [paneFragmentNode.id, layer]
+  );
+
+  const handleInputChange = useCallback(
+    (details: Combobox.InputValueChangeDetails) => {
+      setQuery(details.inputValue);
+    },
+    []
+  );
+
+  const handleStyleClick = useCallback(
+    (styleKey: string) => {
+      settingsPanelStore.set({
+        nodeId: paneFragmentNode.id,
+        layer: layer,
+        className: styleKey,
+        action: 'style-parent-update',
+        expanded: true,
+      });
+    },
+    [paneFragmentNode.id, layer]
+  );
+
+  const handleCancel = () => {
+    settingsPanelStore.set({
+      nodeId: paneFragmentNode.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 */
+      color: white;
+    }
+    .style-item[data-highlighted] .style-indicator {
+      color: white;
+    }
+    .style-item[data-state="checked"] .style-indicator {
+      display: flex;
+    }
+    .style-item .style-indicator {
+      display: none;
+    }
+    .style-item[data-state="checked"] {
+      font-weight: bold;
+    }
+  `;
+
+  return (
+    <div className="min-h-[400px] max-w-md space-y-4">
+      <style>{comboboxItemStyles}</style>
+
+      <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 className="mb-4 flex items-center gap-2">
+        <input
+          type="checkbox"
+          id="show-advanced"
+          checked={showAdvanced}
+          onChange={(e) => setShowAdvanced(e.target.checked)}
+          className="border-mydarkgrey h-4 w-4 rounded text-cyan-600 focus:ring-cyan-600"
+        />
+        <label htmlFor="show-advanced" className="text-mydarkgrey text-sm">
+          Show Advanced Styles
+        </label>
+      </div>
+
+      <div className="relative w-full">
+        <Combobox.Root
+          collection={collection}
+          value={selectedStyle ? [selectedStyle] : []}
+          onValueChange={handleValueChange}
+          onInputValueChange={handleInputChange}
+          loopFocus={true}
+          openOnKeyPress={true}
+          composite={true}
+        >
+          <div className="relative">
+            <Combobox.Input
+              className="border-mydarkgrey focus:border-myblue focus:ring-myblue w-full rounded-md py-2 pl-3 pr-10 text-xl shadow-sm"
+              placeholder="Search styles..."
+              autoComplete="off"
+            />
+            <Combobox.Trigger className="absolute inset-y-0 right-0 flex items-center pr-2">
+              <ChevronUpDownIcon
+                className="text-mydarkgrey h-5 w-5"
+                aria-hidden="true"
+              />
+            </Combobox.Trigger>
+          </div>
+
+          <Combobox.Content className="absolute z-50 mt-1 max-h-64 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+            {collection.items.length === 0 ? (
+              <div className="text-mydarkgrey relative cursor-default select-none px-4 py-2">
+                Nothing found.
+              </div>
+            ) : (
+              collection.items.map((style) => (
+                <Combobox.Item
+                  key={style.key}
+                  item={style}
+                  className="style-item relative cursor-default select-none py-2 pl-10 pr-4 text-black"
+                >
+                  <span className="block truncate">
+                    {style.title}
+                    <span className="ml-2 text-sm opacity-60">
+                      {style.className}
+                    </span>
+                  </span>
+                  <span className="style-indicator absolute inset-y-0 left-0 flex items-center pl-3 text-cyan-600">
+                    <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                  </span>
+                </Combobox.Item>
+              ))
+            )}
+          </Combobox.Content>
+        </Combobox.Root>
+      </div>
+
+      {availableRecommendedStyles.length > 0 && (
+        <div className="mt-8">
+          <h3 className="mb-3 text-lg font-bold">Recommended Styles</h3>
+          <div className="flex flex-wrap gap-2">
+            {availableRecommendedStyles.map((style) => (
+              <button
+                key={style.key}
+                onClick={() => handleStyleClick(style.key)}
+                className="hover:bg-mygreen/20 inline-flex items-center rounded-md bg-slate-50 px-3 py-2 text-sm text-black transition-colors duration-200"
+              >
+                <span className="font-bold">{style.title}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default StyleParentPanelAdd;