astro-tractstack 2.0.0-rc.0

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

@@ -0,0 +1,439 @@
+import { useState, useCallback, useEffect, useMemo, useRef } from 'react';
+import { Combobox, Switch } from '@ark-ui/react';
+import { createListCollection } from '@ark-ui/react/collection';
+import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
+import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
+import ChevronUpDownIcon from '@heroicons/react/24/outline/ChevronUpDownIcon';
+import ExclamationTriangleIcon from '@heroicons/react/24/outline/ExclamationTriangleIcon';
+import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
+import { settingsPanelStore } from '@/stores/storykeep';
+import { getCtx } from '@/stores/nodes';
+import { cloneDeep } from '@/utils/helpers';
+import { isPaneNode } from '@/utils/compositor/typeGuards';
+import type { PaneNode, BasePanelProps } from '@/types/compositorTypes';
+
+interface ExtendedBasePanelProps extends BasePanelProps {
+  availableCodeHooks?: string[];
+}
+
+interface OptionState {
+  key: string;
+  value: string;
+  isDirty: boolean;
+}
+
+const StyleCodeHookPanel = ({
+  node,
+  availableCodeHooks = [],
+}: ExtendedBasePanelProps) => {
+  if (!node || !isPaneNode(node)) return null;
+
+  const [localTarget, setLocalTarget] = useState(node.codeHookTarget || '');
+  const [query, setQuery] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Parse the nested options from JSON string
+  const [localOptions, setLocalOptions] = useState<OptionState[]>(() => {
+    try {
+      const payload = node.codeHookPayload || {};
+      const optionsStr = payload.options || '{}';
+      const parsedOptions = JSON.parse(optionsStr);
+      return Object.entries(parsedOptions).map(([key, value]) => ({
+        key,
+        value: String(value),
+        isDirty: false,
+      }));
+    } catch (error) {
+      console.error('Error parsing options:', error);
+      return [];
+    }
+  });
+
+  // Debounced update to store
+  const updateStore = useCallback(
+    (target: string, options: Record<string, string>) => {
+      const ctx = getCtx();
+      const allNodes = ctx.allNodes.get();
+      const paneNode = cloneDeep(allNodes.get(node.id)) as PaneNode;
+      if (!paneNode) return;
+
+      const updatedNode = {
+        ...paneNode,
+        codeHookTarget: target,
+        codeHookPayload: {
+          options: JSON.stringify(options),
+        },
+        isChanged: true,
+      };
+      ctx.modifyNodes([updatedNode]);
+    },
+    [node]
+  );
+
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  useEffect(() => {
+    if (!isInitialized) {
+      setIsInitialized(true);
+      return;
+    }
+  }, []);
+
+  // Create collection for Ark UI Combobox
+  const collection = useMemo(() => {
+    const filteredCodeHooks =
+      query === ''
+        ? availableCodeHooks
+        : availableCodeHooks.filter((hook) =>
+            hook.toLowerCase().includes(query.toLowerCase())
+          );
+
+    return createListCollection({
+      items: filteredCodeHooks,
+      itemToValue: (item) => item,
+      itemToString: (item) => item,
+    });
+  }, [availableCodeHooks, query]);
+
+  const handleOptionKeyChange = useCallback((index: number, newKey: string) => {
+    setLocalOptions((prev) =>
+      prev.map((opt, idx) =>
+        idx === index ? { ...opt, key: newKey, isDirty: true } : opt
+      )
+    );
+  }, []);
+
+  const handleOptionKeyBlur = useCallback(
+    (index: number) => {
+      if (!isInitialized) return;
+
+      setLocalOptions((prev) => {
+        const updated = prev.map((opt, idx) =>
+          idx === index ? { ...opt, isDirty: false } : opt
+        );
+        const payload = updated.reduce(
+          (acc, { key, value }) => {
+            if (key.trim()) {
+              acc[key] = value;
+            }
+            return acc;
+          },
+          {} as Record<string, string>
+        );
+
+        updateStore(localTarget, payload);
+        return updated;
+      });
+    },
+    [isInitialized, localTarget, updateStore]
+  );
+
+  const handleOptionValueChange = useCallback(
+    (index: number, newValue: string) => {
+      if (!isInitialized) return;
+      setLocalOptions((prev) =>
+        prev.map((opt, idx) =>
+          idx === index ? { ...opt, value: newValue, isDirty: true } : opt
+        )
+      );
+    },
+    [isInitialized]
+  );
+
+  const handleOptionValueBlur = useCallback(
+    (index: number) => {
+      if (!isInitialized) return;
+
+      setLocalOptions((prev) => {
+        const updated = prev.map((opt, idx) =>
+          idx === index ? { ...opt, isDirty: false } : opt
+        );
+        const payload = updated.reduce(
+          (acc, { key, value }) => {
+            if (key.trim()) {
+              acc[key] = value;
+            }
+            return acc;
+          },
+          {} as Record<string, string>
+        );
+
+        updateStore(localTarget, payload);
+        return updated;
+      });
+    },
+    [isInitialized, localTarget, updateStore]
+  );
+
+  const toggleBooleanOption = useCallback(
+    (index: number) => {
+      if (!isInitialized) return;
+
+      setLocalOptions((prev) => {
+        const updated = prev.map((opt, idx) =>
+          idx === index
+            ? { ...opt, value: opt.value === 'true' ? 'false' : 'true' }
+            : opt
+        );
+        const payload = updated.reduce(
+          (acc, { key, value }) => {
+            if (key.trim()) {
+              acc[key] = value;
+            }
+            return acc;
+          },
+          {} as Record<string, string>
+        );
+
+        updateStore(localTarget, payload);
+        return updated;
+      });
+    },
+    [isInitialized, localTarget, updateStore]
+  );
+
+  const addOption = useCallback(() => {
+    setLocalOptions((prev) => [
+      ...prev,
+      { key: `newOption${prev.length + 1}`, value: '', isDirty: false },
+    ]);
+  }, []);
+
+  const removeOption = useCallback(
+    (index: number) => {
+      if (!isInitialized) return;
+
+      setLocalOptions((prev) => {
+        const updated = prev.filter((_, idx) => idx !== index);
+        const payload = updated.reduce(
+          (acc, { key, value }) => {
+            if (key.trim()) {
+              acc[key] = value;
+            }
+            return acc;
+          },
+          {} as Record<string, string>
+        );
+
+        updateStore(localTarget, payload);
+        return updated;
+      });
+    },
+    [isInitialized, localTarget, updateStore]
+  );
+
+  const isValidCodeHook = availableCodeHooks.includes(localTarget);
+
+  const handleTargetChange = useCallback(
+    (details: { value: string[] }) => {
+      if (!isInitialized) return;
+      const target = details.value[0] || '';
+      setLocalTarget(target);
+      setQuery('');
+      const payload = localOptions.reduce(
+        (acc, { key, value }) => {
+          if (key.trim()) {
+            acc[key] = value;
+          }
+          return acc;
+        },
+        {} as Record<string, string>
+      );
+      updateStore(target, payload);
+    },
+    [isInitialized, localOptions, updateStore]
+  );
+
+  const handleInputValueChange = useCallback(
+    (details: { inputValue: string }) => {
+      setQuery(details.inputValue);
+    },
+    [localTarget]
+  );
+
+  const handleBlur = useCallback(() => {
+    if (availableCodeHooks.includes(localTarget)) {
+      setQuery('');
+    } else {
+      setLocalTarget(node.codeHookTarget || '');
+      setQuery('');
+    }
+  }, [localTarget, availableCodeHooks, node.codeHookTarget]);
+
+  const handleCancel = () => {
+    settingsPanelStore.set({
+      nodeId: node.id,
+      action: 'style-break',
+      expanded: true,
+    });
+  };
+
+  const commonInputClass =
+    'block w-full rounded-md border-0 px-2.5 py-1.5 text-myblack ring-1 ring-inset ring-mygreen placeholder:text-mydarkgrey focus:ring-2 focus:ring-inset focus:ring-myorange xs:text-sm xs:leading-6';
+
+  // CSS to properly style the combobox items with hover and selection
+  const comboboxItemStyles = `
+    .codehook-item[data-highlighted] {
+      background-color: #0891b2; /* bg-cyan-600 */
+      color: white;
+    }
+    .codehook-item[data-highlighted] .codehook-indicator {
+      color: white;
+    }
+    .codehook-item[data-state="checked"] .codehook-indicator {
+      display: flex;
+    }
+    .codehook-item .codehook-indicator {
+      display: none;
+    }
+    .codehook-item[data-state="checked"] {
+      font-weight: bold;
+    }
+  `;
+
+  return (
+    <div className="space-y-4">
+      <style>{comboboxItemStyles}</style>
+
+      {/* Header section */}
+      <div className="flex flex-row flex-nowrap justify-between">
+        <button
+          className="text-myblue hover:text-black"
+          title="Return to preview pane"
+          onClick={handleCancel}
+        >
+          Go Back
+        </button>
+      </div>
+
+      <div className="space-y-4">
+        {/* Target ComboBox */}
+        <div className="max-w-md">
+          <label className="text-mydarkgrey block text-sm">Target</label>
+          <div className="relative mt-1">
+            <Combobox.Root
+              collection={collection}
+              value={localTarget ? [localTarget] : []}
+              inputValue={query || localTarget}
+              onValueChange={handleTargetChange}
+              onInputValueChange={handleInputValueChange}
+              loopFocus={true}
+              openOnKeyPress={true}
+              composite={true}
+            >
+              <div className="relative">
+                <Combobox.Input
+                  ref={inputRef}
+                  className={commonInputClass}
+                  placeholder="Select a code hook..."
+                  onBlur={handleBlur}
+                />
+                <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-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                {collection.items.length === 0 ? (
+                  <div className="text-mydarkgrey relative cursor-default select-none px-4 py-2">
+                    Nothing found.
+                  </div>
+                ) : (
+                  collection.items.map((hook) => (
+                    <Combobox.Item
+                      key={hook}
+                      item={hook}
+                      className="codehook-item relative cursor-default select-none py-2 pl-10 pr-4"
+                    >
+                      <span className="block truncate">{hook}</span>
+                      <span className="codehook-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>
+          {!isValidCodeHook && localTarget && (
+            <div className="mt-2 flex items-center text-amber-500">
+              <ExclamationTriangleIcon className="mr-2 h-5 w-5" />
+              <span className="text-sm">
+                Warning: Selected code hook is not available
+              </span>
+            </div>
+          )}
+        </div>
+
+        {/* Options section */}
+        <div>
+          <label className="text-mydarkgrey block text-sm">Options</label>
+          {localOptions.map((option, index) => (
+            <div key={index} className="mt-2 flex items-center space-x-2">
+              <input
+                type="text"
+                value={option.key}
+                onChange={(e) => handleOptionKeyChange(index, e.target.value)}
+                onBlur={() => handleOptionKeyBlur(index)}
+                placeholder="Key"
+                className={`w-1/3 ${commonInputClass}`}
+              />
+              {option.value === 'true' || option.value === 'false' ? (
+                <Switch.Root
+                  checked={option.value === 'true'}
+                  onCheckedChange={() => toggleBooleanOption(index)}
+                  aria-label={`Toggle ${option.key}`}
+                >
+                  <Switch.Control
+                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-cyan-600 focus:ring-offset-2 ${
+                      option.value === 'true' ? 'bg-cyan-600' : 'bg-mydarkgrey'
+                    }`}
+                  >
+                    <Switch.Thumb
+                      className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                        option.value === 'true'
+                          ? 'translate-x-6'
+                          : 'translate-x-1'
+                      }`}
+                    />
+                  </Switch.Control>
+                  <Switch.HiddenInput />
+                </Switch.Root>
+              ) : (
+                <input
+                  type="text"
+                  value={option.value}
+                  onChange={(e) =>
+                    handleOptionValueChange(index, e.target.value)
+                  }
+                  onBlur={() => handleOptionValueBlur(index)}
+                  placeholder="Value"
+                  className={`w-1/2 ${commonInputClass}`}
+                />
+              )}
+              <button
+                onClick={() => removeOption(index)}
+                className="text-cyan-600 hover:text-black"
+                title="Remove option"
+              >
+                <XMarkIcon className="h-5 w-5" />
+              </button>
+            </div>
+          ))}
+          <button
+            onClick={addOption}
+            className="text-myblue mt-2 flex items-center hover:text-cyan-600"
+          >
+            <PlusIcon className="mr-1 h-5 w-5" />
+            Add Option
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StyleCodeHookPanel;

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

@@ -0,0 +1,177 @@
+import { useMemo, useEffect } from 'react';
+import {
+  styleElementInfoStore,
+  resetStyleElementInfo,
+  settingsPanelStore,
+} from '@/stores/storykeep';
+import { StylesMemory } from '@/components/edit/state/StylesMemory';
+import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import SelectedTailwindClass from '@/components/fields/SelectedTailwindClass';
+import { tagTitles } from '@/types/compositorTypes';
+import type {
+  Tag,
+  FlatNode,
+  MarkdownPaneFragmentNode,
+} from '@/types/compositorTypes';
+
+interface StyleElementPanelProps {
+  node: FlatNode;
+  parentNode: MarkdownPaneFragmentNode;
+  onTitleChange?: (title: string) => void;
+}
+
+const StyleElementPanel = ({
+  node,
+  parentNode,
+  onTitleChange,
+}: StyleElementPanelProps) => {
+  if (!node?.tagName || !isMarkdownPaneFragmentNode(parentNode)) {
+    return null;
+  }
+
+  const defaultClasses = parentNode.defaultClasses?.[node.tagName];
+  const overrideClasses = node.overrideClasses;
+
+  const mergedClasses = useMemo(() => {
+    const result: {
+      [key: string]: {
+        mobile: string;
+        tablet?: string;
+        desktop?: string;
+      };
+    } = {};
+
+    // First add all default classes
+    if (defaultClasses) {
+      Object.keys(defaultClasses.mobile).forEach((className) => {
+        result[className] = {
+          mobile: defaultClasses.mobile[className],
+          ...(defaultClasses.tablet && {
+            tablet: defaultClasses.tablet[className],
+          }),
+          ...(defaultClasses.desktop && {
+            desktop: defaultClasses.desktop[className],
+          }),
+        };
+      });
+    }
+
+    // Then overlay any override classes
+    if (overrideClasses) {
+      ['mobile', 'tablet', 'desktop'].forEach((viewport) => {
+        const viewportOverrides =
+          overrideClasses[viewport as keyof typeof overrideClasses];
+        if (viewportOverrides) {
+          Object.entries(viewportOverrides).forEach(([className, value]) => {
+            if (!result[className]) {
+              result[className] = { mobile: value };
+            } else {
+              result[className] = {
+                ...result[className],
+                [viewport]: value,
+              };
+            }
+          });
+        }
+      });
+    }
+
+    return result;
+  }, [defaultClasses, overrideClasses]);
+
+  const handleClickAdd = () => {
+    settingsPanelStore.set({
+      nodeId: node.id,
+      action: `style-element-add`,
+      expanded: true,
+    });
+  };
+
+  const handleRemove = (className: string) => {
+    settingsPanelStore.set({
+      nodeId: node.id,
+      className,
+      action: `style-element-remove`,
+      expanded: true,
+    });
+  };
+
+  const handleUpdate = (className: string) => {
+    styleElementInfoStore.setKey('className', className);
+    settingsPanelStore.set({
+      nodeId: node.id,
+      className,
+      action: `style-element-update`,
+      expanded: true,
+    });
+  };
+
+  useEffect(() => {
+    if (
+      styleElementInfoStore.get().markdownParentId !== parentNode.id ||
+      styleElementInfoStore.get().tagName !== node.tagName
+    ) {
+      styleElementInfoStore.set({
+        markdownParentId: parentNode.id,
+        tagName: node.tagName,
+        overrideNodeId: null,
+        className: null,
+      });
+    }
+
+    return () => {
+      resetStyleElementInfo();
+    };
+  }, [parentNode.id, node.tagName]);
+
+  useEffect(() => {
+    if (node?.tagName && onTitleChange) {
+      const tagTitle =
+        tagTitles[node.tagName as Tag] || node.tagName.toUpperCase();
+      onTitleChange(`Style ${tagTitle}`);
+    }
+  }, [node?.tagName, onTitleChange]);
+
+  return (
+    <div className="space-y-4">
+      {Object.keys(mergedClasses).length > 0 ? (
+        <div className="flex flex-wrap gap-2">
+          {Object.entries(mergedClasses).map(([className, values]) => (
+            <SelectedTailwindClass
+              key={className}
+              name={className}
+              values={values}
+              onRemove={handleRemove}
+              onUpdate={handleUpdate}
+            />
+          ))}
+        </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={() => handleClickAdd()}
+              className="text-myblue font-bold underline hover:text-black"
+            >
+              Add Style
+            </button>
+          </li>
+          <li>
+            <StylesMemory node={node} parentNode={parentNode} />
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default StyleElementPanel;