astro-tractstack 2.0.0-rc.9 → 2.0.0

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

@@ -1,5 +1,5 @@
-import { useState, useCallback, useMemo } from 'react';
-import { Combobox } from '@ark-ui/react';
+import { useState, useCallback, useMemo, useRef } from 'react';
+import { Combobox, Portal } 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';
@@ -7,6 +7,7 @@ import { settingsPanelStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
 import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import { useDropdownDirection } from '@/utils/helpers';
 import type { BasePanelProps } from '@/types/compositorTypes';
 
 // Recommended styles for widget containers (li)
@@ -68,6 +69,8 @@ const StyleWidgetPanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
   const [query, setQuery] = useState('');
   const [showAdvanced, setShowAdvanced] = useState(false);
   const [selectedStyle, setSelectedStyle] = useState<string | null>(null);
+  const comboboxRef = useRef<HTMLDivElement>(null);
+  const { openAbove } = useDropdownDirection(comboboxRef);
 
   if (!node?.tagName || !parentNode || !isMarkdownPaneFragmentNode(parentNode))
     return null;
@@ -79,13 +82,11 @@ const StyleWidgetPanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
   const ctx = getCtx();
   const allNodes = ctx.allNodes.get();
 
-  // When styling container or outer container, use their IDs directly
   const targetNode = allNodes.get(node.id);
   if (!targetNode) return null;
 
   const currentClasses = new Set<string>();
 
-  // Get existing classes from default classes in parent for THIS element type
   if (parentNode.defaultClasses?.[node.tagName]) {
     const defaults = parentNode.defaultClasses[node.tagName];
     Object.keys(defaults.mobile).forEach((key) => currentClasses.add(key));
@@ -95,7 +96,6 @@ const StyleWidgetPanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
       Object.keys(defaults.desktop).forEach((key) => currentClasses.add(key));
   }
 
-  // Get existing override classes for THIS element
   if (`overrideClasses` in targetNode && targetNode.overrideClasses) {
     Object.values(targetNode.overrideClasses).forEach((viewportClasses) => {
       Object.keys(viewportClasses).forEach((key) => currentClasses.add(key));
@@ -112,7 +112,6 @@ const StyleWidgetPanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
             style.key.toLowerCase().includes(query.toLowerCase())
         );
 
-  // Create collection for Ark UI Combobox
   const collection = useMemo(
     () =>
       createListCollection({
@@ -123,7 +122,6 @@ const StyleWidgetPanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
     [filteredStyles]
   );
 
-  // Get appropriate recommended styles based on element type
   const recommendedStyles = isOuterContainer
     ? OUTER_CONTAINER_STYLES
     : isContainer
@@ -147,7 +145,7 @@ const StyleWidgetPanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
             ? 'style-code-container-update'
             : 'style-code-update',
         nodeId: node.id,
-        childId, // Preserve childId for container context
+        childId,
         className: styleKey,
         expanded: true,
       });
@@ -156,10 +154,9 @@ const StyleWidgetPanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
   );
 
   const handleCancel = () => {
-    // Return to main panel with correct context
     settingsPanelStore.set({
       action: 'style-widget',
-      nodeId: childId || node.id, // Use childId when available for context
+      nodeId: childId || node.id,
       expanded: true,
     });
   };
@@ -170,7 +167,6 @@ const StyleWidgetPanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
       ? 'Container'
       : 'Widget';
 
-  // CSS to properly style the combobox items with hover and selection
   const comboboxItemStyles = `
     .style-item[data-highlighted] {
       background-color: #0891b2; /* bg-cyan-600 */
@@ -191,7 +187,7 @@ const StyleWidgetPanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
   `;
 
   return (
-    <div className="min-h-[400px] max-w-md space-y-4">
+    <div className="max-w-md space-y-4">
       <style>{comboboxItemStyles}</style>
 
       <div className="flex flex-row flex-nowrap justify-between">
@@ -226,46 +222,57 @@ const StyleWidgetPanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
           loopFocus={true}
           openOnKeyPress={true}
           composite={true}
+          positioning={{
+            placement: openAbove ? 'top' : 'bottom',
+            gutter: 4,
+            sameWidth: 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"
-              onChange={(e) => setQuery(e.target.value)}
-              placeholder="Search styles..."
-            />
-            <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.Control ref={comboboxRef}>
+            <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"
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder="Search styles..."
               />
-            </Combobox.Trigger>
-          </div>
+              <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.Control>
 
-          <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>
+          <Portal>
+            <Combobox.Positioner style={{ zIndex: 1002 }}>
+              <Combobox.Content className="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.Positioner>
+          </Portal>
         </Combobox.Root>
       </div>
 

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

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { getCtx } from '@/stores/nodes';
 import { cloneDeep } from '@/utils/helpers';
-import { widgetMeta } from '@/constants';
+import { regexpHook, widgetMeta } from '@/constants';
 import SingleParam from '@/components/fields/SingleParam';
 import BooleanParam from '@/components/fields/BooleanParam';
 import MultiParam from '@/components/fields/MultiParam';
@@ -11,13 +11,16 @@ import IdentifyAsWidget from '@/components/edit/widgets/IdentifyAsWidget';
 import SignupWidget from '@/components/edit/widgets/SignupWidget';
 import ToggleWidget from '@/components/edit/widgets/ToggleWidget';
 import YouTubeWidget from '@/components/edit/widgets/YouTubeWidget';
+import InteractiveDisclosureWidget from '@/components/edit/widgets/InteractiveDisclosureWidget';
 import type { FlatNode } from '@/types/compositorTypes';
+import type { BrandConfig } from '@/types/tractstack';
 
 interface StyleWidgetConfigPanelProps {
   node: FlatNode;
+  config: BrandConfig;
 }
 
-function StyleWidgetConfigPanel({ node }: StyleWidgetConfigPanelProps) {
+function StyleWidgetConfigPanel({ node, config }: StyleWidgetConfigPanelProps) {
   const [init, setInit] = useState(false);
 
   useEffect(() => {
@@ -27,8 +30,6 @@ function StyleWidgetConfigPanel({ node }: StyleWidgetConfigPanelProps) {
   if (!node || !('copy' in node) || typeof node.copy !== 'string') return null;
 
   // Extract the widget type from the node's copy
-  const regexpHook =
-    /^(identifyAs|youtube|bunny|bunnyContext|toggle|resource|belief|signup)\((.*)\)$/;
   const hookMatch = node.copy?.match(regexpHook);
   if (!hookMatch) return null;
 
@@ -75,7 +76,8 @@ function StyleWidgetConfigPanel({ node }: StyleWidgetConfigPanelProps) {
     newNode.codeHookParams = stringParams;
 
     // Update the copy field to match the new params
-    newNode.copy = `${widgetType}(${stringParams.join('|')})`;
+    const paramsForCopy = stringParams.slice(0, widgetInfo.parameters.length);
+    newNode.copy = `${widgetType}(${paramsForCopy.join('|')})`;
 
     // Mark the node as changed
     newNode.isChanged = true;
@@ -94,6 +96,13 @@ function StyleWidgetConfigPanel({ node }: StyleWidgetConfigPanelProps) {
     signup: () => <SignupWidget node={node} onUpdate={handleParamUpdate} />,
     toggle: () => <ToggleWidget node={node} onUpdate={handleParamUpdate} />,
     youtube: () => <YouTubeWidget node={node} onUpdate={handleParamUpdate} />,
+    interactiveDisclosure: () => (
+      <InteractiveDisclosureWidget
+        node={node}
+        onUpdate={handleParamUpdate}
+        config={config}
+      />
+    ),
   };
 
   // Generic parameter editor for widget types without specific editors