astro-tractstack 2.0.0-rc.7 → 2.0.0-rc.70

package/templates/src/components/fields/ViewportComboBox.tsx

@@ -1,12 +1,11 @@
 import {
-  useRef,
   useState,
   useEffect,
   useCallback,
   useMemo,
   type ChangeEvent,
 } from 'react';
-import { Combobox } from '@ark-ui/react';
+import { Combobox, Portal } from '@ark-ui/react';
 import { createListCollection } from '@ark-ui/react/collection';
 import ChevronUpDownIcon from '@heroicons/react/20/solid/ChevronUpDownIcon';
 import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
@@ -14,6 +13,7 @@ import DevicePhoneMobileIcon from '@heroicons/react/24/outline/DevicePhoneMobile
 import DeviceTabletIcon from '@heroicons/react/24/outline/DeviceTabletIcon';
 import ComputerDesktopIcon from '@heroicons/react/24/outline/ComputerDesktopIcon';
 import { classNames } from '@/utils/helpers';
+import { settingsPanelStore } from '@/stores/storykeep';
 import { tailwindToHex, colorValues } from '@/utils/compositor/tailwindColors';
 import type { BrandConfig } from '@/types/tractstack';
 
@@ -45,7 +45,6 @@ const ViewportComboBox = ({
   const [internalValue, setInternalValue] = useState(value);
   const [query, setQuery] = useState('');
   const [isNowNegative, setIsNowNegative] = useState(isNegative);
-  const inputRef = useRef<HTMLInputElement>(null);
 
   const Icon =
     viewport === 'mobile'
@@ -100,6 +99,13 @@ const ViewportComboBox = ({
       const selectedValue = details.value[0] || '';
       setInternalValue(selectedValue);
       setQuery('');
+      const currentSignal = settingsPanelStore.get();
+      if (currentSignal) {
+        settingsPanelStore.set({
+          ...currentSignal,
+          editLock: Date.now(),
+        });
+      }
       onFinalChange(selectedValue, viewport, isNowNegative);
     },
     [onFinalChange, viewport, isNowNegative]
@@ -154,8 +160,13 @@ const ViewportComboBox = ({
               loopFocus={true}
               openOnKeyPress={true}
               composite={true}
+              positioning={{
+                placement: 'bottom',
+                gutter: 4,
+                sameWidth: true,
+              }}
             >
-              <div className="relative">
+              <Combobox.Control>
                 <div className="relative flex items-center">
                   {isColorValue && (
                     <div
@@ -169,7 +180,6 @@ const ViewportComboBox = ({
                     />
                   )}
                   <Combobox.Input
-                    ref={inputRef}
                     className={classNames(
                       'border-mydarkgrey w-full rounded-md border py-2 text-xl leading-5 focus:border-cyan-600 focus:ring-1 focus:ring-cyan-600',
                       isInferred ? 'text-black/20' : 'text-black',
@@ -186,44 +196,51 @@ const ViewportComboBox = ({
                     />
                   </Combobox.Trigger>
                 </div>
-              </div>
-              <Combobox.Content className="absolute z-50 mt-1 max-h-32 w-full overflow-auto rounded-md bg-white py-1 text-xl 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((item) => (
-                    <Combobox.Item
-                      key={item}
-                      item={item}
-                      className="viewport-item relative cursor-default select-none py-2"
-                    >
-                      <div className="flex items-center">
-                        {colorValues.includes(item) && (
-                          <div
-                            className="absolute left-3 top-1/2 h-6 w-6 -translate-y-1/2 rounded border border-black/10 shadow-sm"
-                            style={{
-                              backgroundColor: tailwindToHex(
-                                item,
-                                config.BRAND_COLOURS || null
-                              ),
-                            }}
-                          />
-                        )}
-                        <span
-                          className={`block truncate ${colorValues.includes(item) ? 'pl-12' : 'pl-6'} pr-9`}
-                        >
-                          {item}
-                        </span>
-                        <span className="viewport-indicator absolute inset-y-0 right-0 flex items-center pr-4 text-cyan-600">
-                          <CheckIcon className="h-5 w-5" aria-hidden="true" />
-                        </span>
+              </Combobox.Control>
+              <Portal>
+                <Combobox.Positioner style={{ zIndex: 1002 }}>
+                  <Combobox.Content className="max-h-64 w-full overflow-auto rounded-md bg-white py-1 text-xl 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>
-                    </Combobox.Item>
-                  ))
-                )}
-              </Combobox.Content>
+                    ) : (
+                      collection.items.map((item) => (
+                        <Combobox.Item
+                          key={item}
+                          item={item}
+                          className="viewport-item relative cursor-default select-none py-2"
+                        >
+                          <div className="flex items-center">
+                            {colorValues.includes(item) && (
+                              <div
+                                className="absolute left-3 top-1/2 h-6 w-6 -translate-y-1/2 rounded border border-black/10 shadow-sm"
+                                style={{
+                                  backgroundColor: tailwindToHex(
+                                    item,
+                                    config.BRAND_COLOURS || null
+                                  ),
+                                }}
+                              />
+                            )}
+                            <span
+                              className={`block truncate ${colorValues.includes(item) ? 'pl-12' : 'pl-6'} pr-9`}
+                            >
+                              {item}
+                            </span>
+                            <span className="viewport-indicator absolute inset-y-0 right-0 flex items-center pr-4 text-cyan-600">
+                              <CheckIcon
+                                className="h-5 w-5"
+                                aria-hidden="true"
+                              />
+                            </span>
+                          </div>
+                        </Combobox.Item>
+                      ))
+                    )}
+                  </Combobox.Content>
+                </Combobox.Positioner>
+              </Portal>
             </Combobox.Root>
           </div>
           {allowNegative && (

package/templates/src/components/form/ActionBuilderBeliefSelector.tsx

@@ -0,0 +1,117 @@
+import { useState, useEffect, useMemo } from 'react';
+import type { BeliefNode } from '@/types/compositorTypes';
+import { heldBeliefsScales } from '@/constants/beliefs';
+
+interface ActionBuilderBeliefSelectorProps {
+  value: string;
+  onChange: (value: string) => void;
+  beliefs: BeliefNode[];
+}
+
+const parseValue = (value: string): [string, string] => {
+  try {
+    const match = value.match(/\(([^)]+)\)/);
+    if (match) {
+      const parts = match[1].split(' ').filter(Boolean);
+      if (parts.length >= 2) {
+        return [parts[0], parts.slice(1).join(' ')];
+      }
+      if (parts.length === 1) {
+        return [parts[0], ''];
+      }
+    }
+  } catch (e) {
+    console.error('Error parsing belief selector value:', e);
+  }
+  return ['', ''];
+};
+
+export default function ActionBuilderBeliefSelector({
+  value,
+  onChange,
+  beliefs,
+}: ActionBuilderBeliefSelectorProps) {
+  const [selectedBeliefSlug, setSelectedBeliefSlug] = useState('');
+  const [selectedValue, setSelectedValue] = useState('');
+
+  useEffect(() => {
+    const [slug, val] = parseValue(value);
+    setSelectedBeliefSlug(slug);
+    setSelectedValue(val);
+  }, [value]);
+
+  useEffect(() => {
+    if (selectedBeliefSlug && selectedValue) {
+      const newValue = `(${selectedBeliefSlug} ${selectedValue})`;
+      if (value !== newValue) {
+        onChange(newValue);
+      }
+    }
+  }, [selectedBeliefSlug, selectedValue, onChange, value]);
+
+  const selectedBelief = useMemo(
+    () => beliefs.find((b) => b.slug === selectedBeliefSlug),
+    [selectedBeliefSlug, beliefs]
+  );
+
+  const valueOptions = useMemo(() => {
+    if (!selectedBelief) return [];
+    if (selectedBelief.scale === 'custom' && selectedBelief.customValues) {
+      return selectedBelief.customValues.map((v) => ({ label: v, value: v }));
+    }
+    const scale =
+      heldBeliefsScales[selectedBelief.scale as keyof typeof heldBeliefsScales];
+    if (scale) {
+      return scale.map(({ slug, name }) => ({ label: name, value: slug }));
+    }
+    return [];
+  }, [selectedBelief]);
+
+  const handleBeliefChange = (slug: string) => {
+    setSelectedBeliefSlug(slug);
+    setSelectedValue('');
+    onChange(slug ? `(${slug} )` : '');
+  };
+
+  const commonSelectClass =
+    'w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-700 focus:ring-cyan-700';
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-2">
+        <label className="block text-sm text-gray-700">Belief</label>
+        <select
+          value={selectedBeliefSlug}
+          onChange={(e) => handleBeliefChange(e.target.value)}
+          className={commonSelectClass}
+        >
+          <option value="">Select a belief...</option>
+          {beliefs.map((belief) => (
+            <option key={belief.id} value={belief.slug}>
+              {belief.title} ({belief.scale})
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {selectedBelief && (
+        <div className="space-y-2">
+          <label className="block text-sm text-gray-700">Value</label>
+          <select
+            value={selectedValue}
+            onChange={(e) => setSelectedValue(e.target.value)}
+            className={commonSelectClass}
+            disabled={!selectedBelief || valueOptions.length === 0}
+          >
+            <option value="">Select a value...</option>
+            {valueOptions.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </div>
+      )}
+    </div>
+  );
+}