astro-tractstack 2.0.0-rc.0

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

@@ -0,0 +1,265 @@
+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 type { BasePanelProps } from '@/types/compositorTypes';
+
+// Recommended styles for button states
+const BUTTON_STYLES = [
+  { key: 'bgCOLOR', title: 'Background Color' },
+  { key: 'textCOLOR', title: 'Text Color' },
+  { key: 'fontWEIGHT', title: 'Font Weight' },
+  { key: 'fontFACE', title: 'Font Family' },
+  { key: 'rounded', title: 'Border Radius' },
+  { key: 'shadow', title: 'Box Shadow' },
+  { key: 'px', title: 'Padding X' },
+  { key: 'py', title: 'Padding Y' },
+  { key: 'borderSTYLE', title: 'Border Style' },
+  { key: 'borderCOLOR', title: 'Border Color' },
+  { key: 'borderWIDTH', title: 'Border Width' },
+  { key: 'display', title: 'Display Type' },
+];
+
+// Recommended styles for hover states
+const HOVER_STYLES = [
+  { key: 'bgCOLOR', title: 'Background Color' },
+  { key: 'textCOLOR', title: 'Text Color' },
+  { key: 'rotate', title: 'Rotation' },
+  { key: 'scale', title: 'Scale' },
+  { key: 'shadow', title: 'Box Shadow' },
+  { key: 'borderCOLOR', title: 'Border Color' },
+  { key: 'translate', title: 'Translation' },
+];
+
+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));
+};
+
+const StyleLinkPanelAdd = ({ node }: BasePanelProps) => {
+  const [query, setQuery] = useState('');
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  const [selectedStyle, setSelectedStyle] = useState<string | null>(null);
+
+  if (!node?.tagName || (node.tagName !== 'a' && node.tagName !== 'button'))
+    return null;
+
+  const currentClasses = new Set<string>();
+  const isHoverMode = settingsPanelStore.get()?.action?.endsWith('-hover');
+
+  // Get existing button or hover classes
+  if (node.buttonPayload) {
+    const classes = isHoverMode
+      ? node.buttonPayload.buttonHoverClasses
+      : node.buttonPayload.buttonClasses;
+    if (classes) {
+      Object.keys(classes).forEach((key) => currentClasses.add(key));
+    }
+  }
+
+  const styles = getFilteredStyles(showAdvanced, currentClasses);
+
+  // Create filtered collection for combobox
+  const styleCollection = 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) => item.key,
+      itemToString: (item) => item.title,
+    });
+  }, [styles, query]);
+
+  // Get appropriate recommended styles
+  const recommendedStyles = isHoverMode ? HOVER_STYLES : BUTTON_STYLES;
+  const availableRecommendedStyles = recommendedStyles.filter(
+    (style) => !currentClasses.has(style.key)
+  );
+
+  const handleValueChange = useCallback(
+    (details: { value: string[] }) => {
+      const styleKey = details.value[0] || null;
+      if (styleKey) {
+        setSelectedStyle(styleKey);
+        settingsPanelStore.set({
+          action: isHoverMode ? 'style-link-update-hover' : 'style-link-update',
+          nodeId: node.id,
+          className: styleKey,
+          expanded: true,
+        });
+      }
+    },
+    [node.id, isHoverMode]
+  );
+
+  const handleInputChange = useCallback(
+    (details: Combobox.InputValueChangeDetails) => {
+      setQuery(details.inputValue);
+    },
+    []
+  );
+
+  const handleStyleClick = useCallback(
+    (styleKey: string) => {
+      settingsPanelStore.set({
+        action: isHoverMode ? 'style-link-update-hover' : 'style-link-update',
+        nodeId: node.id,
+        className: styleKey,
+        expanded: true,
+      });
+    },
+    [node.id, isHoverMode]
+  );
+
+  const handleCancel = () => {
+    settingsPanelStore.set({
+      action: 'style-link',
+      nodeId: node.id,
+      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={styleCollection}
+          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">
+            {styleCollection.items.length === 0 ? (
+              <div className="text-mydarkgrey relative cursor-default select-none px-4 py-2">
+                Nothing found.
+              </div>
+            ) : (
+              styleCollection.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 StyleLinkPanelAdd;

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

@@ -0,0 +1,240 @@
+import { useState, useEffect } from 'react';
+import { settingsPanelStore, fullContentMapStore } from '@/stores/storykeep';
+import { getCtx } from '@/stores/nodes';
+import { cloneDeep } from '@/utils/helpers';
+import { lispLexer } from '@/utils/actions/lispLexer';
+import { preParseAction } from '@/utils/actions/preParse_Action';
+import { preParseBunny } from '@/utils/actions/preParse_Bunny';
+import ActionBuilderField from '@/components/form/ActionBuilderField';
+import BunnyMomentSelector from '@/components/fields/BunnyMomentSelector';
+import { GOTO_TARGETS } from '@/constants';
+import type { BrandConfig } from '@/types/tractstack';
+import type { FlatNode } from '@/types/compositorTypes';
+
+interface StyleLinkConfigPanelProps {
+  node: FlatNode;
+  config: BrandConfig;
+}
+
+const StyleLinkConfigPanel = ({ node, config }: StyleLinkConfigPanelProps) => {
+  if (!node?.tagName || (node.tagName !== 'a' && node.tagName !== 'button')) {
+    return null;
+  }
+
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [callbackPayload, setCallbackPayload] = useState('');
+  const [actionType, setActionType] = useState<'goto' | 'bunnyMoment'>('goto');
+
+  const ctx = getCtx();
+  const allNodes = ctx.allNodes.get();
+  const markdownId = ctx.getClosestNodeTypeFromId(node.id, 'Markdown');
+  const storyFragmentId = ctx.getClosestNodeTypeFromId(
+    node.id,
+    'StoryFragment'
+  );
+  const storyFragment = storyFragmentId ? allNodes.get(storyFragmentId) : null;
+  const slug =
+    storyFragment && 'slug' in storyFragment
+      ? (storyFragment.slug as string)
+      : '';
+  const isContext = ctx.getIsContextPane(markdownId);
+
+  useEffect(() => {
+    const currentPayload = node.buttonPayload?.callbackPayload || '';
+    setCallbackPayload(currentPayload);
+    setActionType(
+      currentPayload.startsWith('(bunnyMoment') ? 'bunnyMoment' : 'goto'
+    );
+    setIsInitialized(true);
+  }, [node]);
+
+  const updateNode = (newCallbackPayload: string) => {
+    try {
+      const linkNode = cloneDeep(allNodes.get(node.id)) as FlatNode;
+      if (!linkNode || !markdownId) return;
+
+      const lexedPayload = lispLexer(newCallbackPayload);
+      let targetUrl = null;
+      if (newCallbackPayload.startsWith('(goto')) {
+        targetUrl =
+          lexedPayload && preParseAction(lexedPayload, slug, isContext, config);
+      }
+      const bunnyPayload = lexedPayload && preParseBunny(lexedPayload);
+      const isExternalUrl =
+        typeof targetUrl === 'string' && targetUrl.startsWith('https://');
+      const existingButtonPayload = linkNode.buttonPayload || {
+        buttonClasses: {},
+        buttonHoverClasses: {},
+        callbackPayload: '',
+      };
+
+      if (newCallbackPayload.startsWith('(bunnyMoment')) {
+        linkNode.tagName = 'button';
+        linkNode.href = '#';
+      } else {
+        linkNode.href = isExternalUrl ? targetUrl : targetUrl || '#';
+        linkNode.tagName = !targetUrl || bunnyPayload ? 'button' : 'a';
+      }
+
+      linkNode.buttonPayload = {
+        ...existingButtonPayload,
+        callbackPayload: newCallbackPayload,
+        buttonClasses: existingButtonPayload.buttonClasses || {},
+        buttonHoverClasses: existingButtonPayload.buttonHoverClasses || {},
+        ...(isExternalUrl ? { isExternalUrl: true } : {}),
+        ...(bunnyPayload ? { bunnyPayload } : {}),
+      };
+
+      ctx.modifyNodes([{ ...linkNode, isChanged: true }]);
+    } catch (error) {
+      console.error('Error updating node:', error);
+    }
+  };
+
+  useEffect(() => {
+    if (!isInitialized) return;
+
+    if (callbackPayload.startsWith('(bunnyMoment')) {
+      const match = callbackPayload.match(
+        /\(bunnyMoment\s+\(\s*([^\s]+)\s+(\d+)\s*\)\)/
+      );
+      if (match && match[1] && match[2]) {
+        updateNode(callbackPayload);
+      }
+      return;
+    }
+
+    const match = callbackPayload.match(/\(goto\s+\(([^)]+)\)/);
+    if (!match) return;
+
+    const parts = match[1].split(' ').filter(Boolean);
+    if (parts.length === 0) return;
+
+    const target = parts[0];
+    const targetConfig = GOTO_TARGETS[target];
+    if (!targetConfig) return;
+
+    let isComplete = false;
+
+    if (target === 'url') {
+      isComplete = parts.length > 1;
+    } else if (targetConfig.subcommands) {
+      isComplete = parts.length > 1;
+    } else if (targetConfig.requiresParam) {
+      if (targetConfig.requiresSecondParam) {
+        isComplete = parts.length > 2;
+      } else {
+        isComplete = parts.length > 1;
+      }
+    } else {
+      isComplete = true;
+    }
+
+    if (isComplete) {
+      updateNode(callbackPayload);
+    }
+  }, [
+    callbackPayload,
+    isInitialized,
+    node.id,
+    config,
+    allNodes,
+    ctx,
+    markdownId,
+    slug,
+    isContext,
+  ]);
+
+  const handleChange = (value: string) => {
+    setCallbackPayload(value);
+  };
+
+  const handleActionTypeChange = (type: 'goto' | 'bunnyMoment') => {
+    setActionType(type);
+    if (type === 'bunnyMoment') {
+      setCallbackPayload('(bunnyMoment ( ))');
+    } else {
+      setCallbackPayload('');
+    }
+  };
+
+  const handleCloseConfig = () => {
+    settingsPanelStore.set({
+      nodeId: node.id,
+      action: 'style-link',
+      expanded: true,
+    });
+  };
+
+  const renderActionBuilder = () => {
+    switch (actionType) {
+      case 'bunnyMoment':
+        return (
+          <BunnyMomentSelector
+            value={callbackPayload}
+            onChange={handleChange}
+          />
+        );
+      case 'goto':
+      default:
+        return (
+          <ActionBuilderField
+            slug={slug}
+            value={callbackPayload}
+            onChange={handleChange}
+            contentMap={fullContentMapStore.get()}
+          />
+        );
+    }
+  };
+
+  return (
+    <div className="relative">
+      <div className="w-full max-w-md space-y-4">
+        <div className="flex flex-row flex-nowrap justify-between">
+          <button
+            className="text-myblue hover:text-black"
+            title="Return to style panel"
+            onClick={handleCloseConfig}
+          >
+            Go Back
+          </button>
+        </div>
+
+        <div className="mb-4 space-y-2">
+          <label className="block text-sm text-gray-700">Action Type</label>
+          <select
+            value={actionType}
+            onChange={(e) =>
+              handleActionTypeChange(e.target.value as 'goto' | 'bunnyMoment')
+            }
+            className="mt-1 block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
+          >
+            <option value="goto">Navigation Action</option>
+            <option value="bunnyMoment">Video Moment Action</option>
+          </select>
+          <p className="mt-1 text-sm text-gray-500">
+            {actionType === 'goto'
+              ? 'Create a link to navigate to another page or section'
+              : 'Jump to a specific moment in a video on this page'}
+          </p>
+        </div>
+
+        <div className="space-y-2">
+          <div className="relative max-h-[60vh] min-h-[400px] overflow-y-auto">
+            <div className="absolute inset-x-0">
+              <label className="text-mydarkgrey mb-2 block text-sm">
+                {actionType === 'goto'
+                  ? 'Callback Payload'
+                  : 'Video Moment Settings'}
+              </label>
+              {renderActionBuilder()}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StyleLinkConfigPanel;

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

@@ -0,0 +1,94 @@
+import { settingsPanelStore } from '@/stores/storykeep';
+import { getCtx } from '@/stores/nodes';
+import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
+import { cloneDeep } from '@/utils/helpers';
+import type { BasePanelProps, FlatNode } from '@/types/compositorTypes';
+
+const StyleLinkRemovePanel = ({ node, className }: BasePanelProps) => {
+  if (
+    !className ||
+    !node?.tagName ||
+    (node.tagName !== 'a' && node.tagName !== 'button')
+  ) {
+    return null;
+  }
+
+  const friendlyName = tailwindClasses[className]?.title || className;
+  const isHoverMode = settingsPanelStore.get()?.action?.endsWith('-hover');
+
+  const resetStore = () => {
+    if (node?.id) {
+      settingsPanelStore.set({
+        action: 'style-link',
+        nodeId: node.id,
+        expanded: true,
+      });
+    }
+  };
+
+  const handleYesClick = () => {
+    if (!node || !className) {
+      console.error('Missing required properties for class removal');
+      return;
+    }
+
+    const ctx = getCtx();
+    const allNodes = ctx.allNodes.get();
+    const linkNode = cloneDeep(allNodes.get(node.id)) as FlatNode;
+    // Get markdown node
+    const markdownId = ctx.getClosestNodeTypeFromId(node.id, 'Markdown');
+    if (!linkNode || !linkNode.buttonPayload || !markdownId) return;
+    // Remove from appropriate classes object based on action
+    if (isHoverMode) {
+      if (className in linkNode.buttonPayload.buttonHoverClasses) {
+        delete linkNode.buttonPayload.buttonHoverClasses[className];
+      }
+    } else {
+      if (className in linkNode.buttonPayload.buttonClasses) {
+        delete linkNode.buttonPayload.buttonClasses[className];
+      }
+    }
+    ctx.modifyNodes([{ ...linkNode, isChanged: true }]);
+    resetStore();
+  };
+
+  const handleNoClick = () => {
+    resetStore();
+  };
+
+  return (
+    <div className="space-y-4">
+      <h3 className="text-xl font-bold">
+        Remove <span className="font-bold">{friendlyName}</span>
+        <span className="ml-1">
+          from {isHoverMode ? 'Hover' : 'Button'} State?
+        </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>
+    </div>
+  );
+};
+
+export default StyleLinkRemovePanel;